Gerätelinks
Eine der besten Funktionen von Figma ist, dass Sie die damit erstellten Designs schnell in Code übertragen können. Wenn Sie ein App-Entwickler sind oder mit Designern zusammenarbeiten, ist dies eine wertvolle Fähigkeit, die Sie lernen sollten. Mit Hilfe integrierter Tools und zahlreicher Plugins ermöglicht Figma Ihnen, Ihr Design auf verschiedene Plattformen zu exportieren.
Wenn Sie mehr über die Konvertierung Ihres Figma-Designs in Code erfahren möchten, sind Sie hier genau richtig. In diesem Artikel besprechen wir, wie Sie Code in Figma exportieren und welche Tools Sie verwenden müssen.
So exportieren Sie Code in Figma auf einem Windows-PC
Wenn Sie ein Windows-Benutzer sind und Code in Figma exportieren möchten, werden Sie erfreut sein zu wissen, dass Sie zahlreiche Optionen verwenden können.
Figma Inspizieren
Eine der Methoden, die Sie zum Exportieren von Code in Figma verwenden können, ist Figma Inspect. Mit dieser Funktion können Sie Ihre Designs ganz einfach in Android-, iOS- oder Webcode konvertieren. Da es integriert ist, müssen Sie keine Plugins oder Apps von Drittanbietern installieren.
So verwenden Sie es:
- Wählen Sie die Elemente aus, an denen Sie interessiert sind, und gehen Sie zur Registerkarte Prüfen.
- Wählen Sie im Abschnitt Code den Code aus, den Sie exportieren möchten (CSS für Web, Swift für iOS oder XML für Android).
Das Tool generiert den Code je nach gewählter Option und Sie können ihn dann exportieren. Obwohl dies ein großartiges Tool ist, hat es einige Einschränkungen. Sie können SVG nämlich nicht nach HTML exportieren. Dafür müssen Sie ein Plugin verwenden.
Figma-Plugins
Figma bietet Hunderte von nützlichen Plugins. Wir werden einige erwähnen, die Sie verwenden können, um Ihr Design in HTML zu exportieren.
Figma zu HTML
Der Plugin ermöglicht es Ihnen, Ihr Design je nach Bedarf in HTML oder CSS umzuwandeln. Führen Sie die folgenden Schritte aus, um das Plugin zu installieren und den Code zu exportieren:
- Greifen Sie auf das Hauptmenü zu, indem Sie auf das Symbol in der oberen linken Ecke drücken.
- Drücken Sie Plugins.
- Drücken Sie Plug-ins in der Community durchsuchen.
- Geben Sie Figma to HTML ein und wählen Sie oben Plugins aus.
- Drücken Sie Installieren.
- Gehen Sie zurück zu Ihrem Design und wählen Sie die gewünschten Elemente aus.
- Gehen Sie zurück zum Hauptmenü, wählen Sie Plugins und dann Figma to HTML.
- Wählen Sie HTML oder CSS.
- Drücken Sie je nach Bedarf auf Kopieren oder Herunterladen.
Anima für Figma
Ein weiteres hilfreiches Plugin ist Anima für Figma. Mit diesem Plugin können Sie Ihr Design in HTML, CSS, React und Vue konvertieren. Befolgen Sie diese Schritte, um das Plugin zu verwenden:
- Öffnen Sie das Hauptmenü, indem Sie das Symbol oben links auswählen.
- Drücken Sie Plugins.
- Wählen Sie Plugins in der Community durchsuchen aus.
- Geben Sie Anima für Figma ein.
- Drücken Sie Installieren.
- Wählen Sie die Elemente aus, die Sie exportieren möchten.
- Öffnen Sie das Hauptmenü, drücken Sie Plugins und wählen Sie Anima for Figma. Melden Sie sich an, wenn Sie kein Konto haben.
- Wählen Sie den Codetyp und drücken Sie Code exportieren.
So exportieren Sie Code in Figma auf einem Mac
Das Exportieren Ihres Designs in Code auf einem Mac-Gerät kann auf verschiedene Arten erfolgen.
Figma Inspizieren
Mit diesem integrierten Tool können Sie Code und andere Werte für Ihre Designs überprüfen und exportieren. Mit Figma Inspect können Sie zwischen drei Codeoptionen wählen: Android, iOS oder Web (nur CSS).
Führen Sie die folgenden Schritte aus, um Figma Inspect auf einem Mac zu verwenden:
- Wählen Sie die Elemente aus, die Sie exportieren möchten.
- Öffnen Sie rechts die Registerkarte Inspizieren.
- Wählen Sie zwischen CSS, iOS oder Android.
- Kopieren Sie Ihren Code.
Wenn Sie nur an CSS, iOS und Android interessiert sind, ist dies ein hervorragendes Tool. Wenn Sie Ihr Design jedoch in HTML exportieren möchten, müssen Sie eine andere Methode verwenden.
Figma-Plugins
Wenn Sie Ihre Designs in HTML konvertieren möchten, bietet Figma Dutzende von Plugins an, die diesem Zweck dienen. Der Installationsprozess ist einfach. Wir werden einige der beliebtesten auflisten.
Figma zu HTML
Dies Plugin ermöglicht es Ihnen, Ihr Design in CSS oder HTML umzuwandeln. So installieren Sie es:
- Wählen Sie das Symbol oben links, um das Hauptmenü zu öffnen.
- Drücken Sie Plugins.
- Wählen Sie Plugins in der Community durchsuchen aus.
- Geben Sie Figma to HTML in die Suchleiste ein und wählen Sie oben Plugins aus.
- Drücken Sie Installieren.
- Kehren Sie zu Ihrem Design zurück und wählen Sie die Elemente aus, die Sie exportieren möchten.
- Öffnen Sie das Hauptmenü, wählen Sie Plugins und dann Figma to HTML.
- Wählen Sie HTML oder CSS aus.
- Drücken Sie Kopieren oder Herunterladen.
Figma zu Code
Mit diesem Plugin , können Sie Ihr Figma-Design in HTML, Tailwind, Flutter oder Swift UI konvertieren. Führen Sie die folgenden Schritte aus, um es zu installieren und zu verwenden:
- Drücken Sie das Symbol oben links, um auf das Hauptmenü zuzugreifen.
- Wählen Sie Plugins aus.
- Drücken Sie Plug-ins in der Community durchsuchen.
- Geben Sie Figma to Code in die Suchleiste ein und wählen Sie oben Plugins aus, um relevante Ergebnisse zu erhalten.
- Drücken Sie Installieren.
- Gehen Sie zu Ihrem Design und wählen Sie die gewünschten Elemente aus.
- Greifen Sie erneut auf das Hauptmenü zu, wählen Sie Plugins und dann Figma to Code.
- Wählen Sie den gewünschten Code aus.
- Drücken Sie In Zwischenablage kopieren.
Kann ich Code in Figma auf dem iPhone exportieren?
Die neue Figma iPhone App war bisher nur als Beta-Version erhältlich Testflight für die ersten 10.000 iPhones, aber das Unternehmen gibt an, dass die vollständige Einführung bald bevorsteht. Mit der App können Sie Ihre Designs durchsuchen und darauf zugreifen und Live-Änderungen auf Ihrem iPhone verfolgen, während Sie das Design auf Ihrem Computer bearbeiten.
Derzeit ist es nicht möglich, Designs über die iPhone-App zu bearbeiten, was bedeutet, dass es keine Möglichkeit gibt, Code darüber zu exportieren.
Figma bietet auch die Figma-Spiegel App im App Store. Mit dieser App können Sie Ihre Designs auf jedem iOS-Gerät spiegeln, ohne mit demselben Netzwerk verbunden zu sein. Auf diese Weise können Sie überprüfen, wie Ihr Design auf einem bestimmten Gerät (in diesem Fall dem iPhone) aussieht, und Änderungen verfolgen. Obwohl nützlich, erlaubt Ihnen die App nicht, Code auf Ihr iPhone zu exportieren. Dafür müssen Sie sich Ihren Computer schnappen.
Sie können auch über Ihren Browser auf Ihre Designs zugreifen. Sie können jedoch weiterhin nur Ihr Design anzeigen und Live-Änderungen verfolgen.
Kann ich Code in Figma auf einem iPad exportieren?
Leider ist es nicht möglich, Code in Figma zu exportieren, wenn Sie ein iPad verwenden. Figma arbeitet an der mobilen App, und es gibt eine Beta-Version, die jedoch nicht für Tablets verfügbar war, sondern nur für iPhones und Android.
Die Figma Mirror-App ist für iPads verfügbar. Mit der App können Sie Änderungen verfolgen, die Sie an Ihrem Design über den Computer vornehmen, und überprüfen, wie sie auf dem iPad-Bildschirm aussehen. Leider ist die Option zum Exportieren von Code innerhalb der App nicht verfügbar.
Wenn Sie die App nicht installieren möchten, können Sie über Ihren Browser auf Figma zugreifen und Änderungen am Design verfolgen. Das Exportieren von Code in Figma ist jedoch nur auf einem Computer möglich.
Kann ich Code in Figma auf einem Android exportieren
Figma arbeitet derzeit an der Android-App und bietet eine Beta-Version für 10.000 Android-Handys an. Sie können Tester werden, indem Sie die App von herunterladen Spielladen und darauf zugreifen Verknüpfung . Sie können Ihre Designs durchsuchen, anzeigen und teilen und Änderungen innerhalb der App verfolgen, auch wenn Sie sich nicht in der Nähe Ihres Computers befinden.
Obwohl die App für viele Zwecke nützlich ist, können Sie mit ihr vorerst keinen Code exportieren.
Der Figma-Spiegel Die App ist auch für Android verfügbar. Sein Hauptzweck besteht darin, Änderungen zu verfolgen, die Sie an Ihren Designs auf Ihrem Computer vornehmen, und sicherzustellen, dass sie auf allen Android-Geräten gut aussehen. Die Option zum Exportieren von Code ist nicht verfügbar.
Sie können Figma auch in Ihrem Browser verwenden, wenn Sie die App nicht installieren möchten. Sie können den Code jedoch immer noch nicht exportieren. Dafür müssen Sie Ihren Computer verwenden.
So verbinden Sie den Ring wieder mit dem WLAN
Weitere häufig gestellte Fragen
Wie exportiere ich Farben von Figma nach Xcode?
Leider ist es nicht möglich, Farben von Figma nach Xcode zu exportieren, da Figma dies nicht unterstützt. Es gibt jedoch eine Problemumgehung, die Sie verwenden können Figma-Export . Führen Sie die folgenden Schritte aus, um es zu verwenden:
1. Wenn Sie es noch nicht getan haben, installieren Sie es Figma-Export .
2. Öffnen Sie Terminal.app.
3. Öffnen Sie den Ordner mit der Figma-Exportdatei.
4. Starten Sie figma-export.
5. Exportieren Sie Farben mit ./figma-export colors -i figma-export.yaml.
Wie exportiere ich HTML-Code aus Figma?
Wie bereits erwähnt, können Sie mit dem integrierten Tool namens Figma Inspect CSS, aber kein HTML abrufen. Wenn Sie den HTML-Code benötigen, müssen Sie ein Plugin installieren.
Figma verfügt über Dutzende von Plugins, die diesem Zweck dienen. Unsere Empfehlung ist Figma zu HTML . So verwenden Sie es:
1. Öffnen Sie das Hauptmenü. Es ist das Symbol oben links.
2. Drücken Sie Plugins.
3. Wählen Sie Plugins in Community durchsuchen aus.
4. Geben Sie Figma to HTML in die Suchleiste ein und stellen Sie sicher, dass Plugins oben ausgewählt ist.
5. Wählen Sie Installieren.
6. Kehren Sie zu Ihrem Design zurück und wählen Sie die Elemente aus, die Sie in HTML konvertieren möchten.
7. Gehen Sie zum Hauptmenü, wählen Sie Plugins und öffnen Sie Figma to HTML.
8. Drücken Sie HTML.
9. Wählen Sie zwischen Kopieren oder Herunterladen.
Holen Sie sich den Code, den Sie brauchen
Figma ermöglicht es Ihnen, verschiedene Arten von Codes mit mehreren Methoden zu exportieren. Sie können je nach Bedarf integrierte Tools verwenden oder verschiedene Plugins herunterladen. Der Export von Codes ist derzeit nur über Computer möglich. Figma hat die Beta-Version der mobilen App veröffentlicht (begrenzt auf 10.000 iPhone- oder Android-Geräte), diese Option ist jedoch nicht verfügbar. Glücklicherweise ist das Exportieren von Code auf Computern schnell und einfach.
Wie exportiert man Code in Figma? Verwenden Sie eine der Methoden, die wir in diesem Artikel erwähnt haben? Sagen Sie es uns im Kommentarbereich unten.
