Figma to React: So bekommen Sie einen sauberen React-Code in Figma2 min read

Mit über 1 Million Installationen auf Figma ist Anima der beste Weg, um Designs in Code zu verwandeln.

In diesem Artikel zeigen wir Ihnen, wie Sie Figma sofort in sauberen React-Code verwandeln können. Anima kann React-Komponenten oder sogar komplette Abläufe mit mehreren Bildschirmen, Links und reaktionsschnellen Layouts erstellen.

Was Sie von Animas Code erwarten können:

• Pixel-perfekter, sauberer Code, der aus dem Kasten läuft.
• Figma-Varianten unterstützen, sowie Requisiten und Unterkomponenten-Unterstützung.
• Reaktionsschnelles CSS-Flex-Layout basierend auf Figma Auto Layout.
• TypeScript / JavaScript, mit CSS / SCSS / Tailwind / Styled Components Styling.

So konvertieren Sie Figma-Designs in React-Code

Anima bietet zwei Möglichkeiten, Code für verschiedene Anwendungsfälle zu exportieren:

1. React-Code für einen kompletten Ablauf, mit mehreren Bildschirmen & Links – Ideal für Marketing-Websites, PoCs, MVPs oder um ein neues Projekt anzustoßen.
2. React-Code für eine bestimmte Komponenten – Ideal für den Austausch von Code mit Ingenieuren in einem bestehenden Projekt.

React-Code für vollständige Flows mit Links generieren

1. Installieren & Öffnen Sie das Anima-Plugin in Figma
2. Wählen Sie die Figma-Bildschirme, die Sie in React konvertieren möchten. Wenn Sie mehrere Layouts für denselben Bildschirm haben, verwenden Sie die Breakpoints-Funktion.
3. Klicken Sie auf den Button „Get code“ (‚Code erhalten‘ )→ Wählen Sie ‚React‘.

4. Klicken Sie auf „Go to Anima“ (‚Auf Anima‘), wenn die Synchronisierung abgeschlossen ist.

Sie werden zu Ihrem Projekt in der Web-App von Anima weitergeleitet, wo Sie das komplette Code-Paket herunterladen können.

Anima plugin für Figma

React-Code für eine bestimmte Komponente generieren

1. Wechseln Sie in den Dev-Modus mit dem Schalter oben im Kontrollfenster von Figma und führen Sie das Plugin von Anima aus.
2. Wählen Sie eine beliebige Figma-Komponente, Ebene oder Rahmen aus.
3. Auf der rechten Seite erhalten Sie ausführbaren Code Ihrer Wahl: React, Vue oder HTML, mit CSS, SCSS oder Tailwind.
4. Laden Sie den Code herunter oder führen Sie ihn auf Animas Online-Spielplatz mit den Buttons am unteren Rand aus.

Kein Dev Mode Zugang?

• Bearbeitungsmodus – Verwenden Sie Anima im Bearbeitungsmodus und klicken Sie auf „Switch“, um eine einzelne Komponente zu inspizieren.
• VSCode beta – Anima kommt zu Visual Studio-Code, erhalten Sie die Beta hier.

Frontend 2x schneller mit Anima erstellen

Anima plugin für Figma

Video tutorial: How to export React components in Figma Dev Mode