Figma
Figma-Integration: Design-Dateien abrufen, Komponenten extrahieren, Tokens lesen, in Code übersetzen. Überbrücke die Lücke zwischen Design und Entwicklung.
Das Figma-Plugin schließt die Lücke zwischen Design und Entwicklung, indem es Claude Code direkt mit deinen Figma-Design-Dateien verbindet. Greife auf Design-Kontext zu, extrahiere Komponenteninformationen, rufe Design-Tokens ab und übersetze Designs in produktionsreifen Code mit pixelgenauer Wiedergabe.
Zu den wichtigsten Funktionen zählen: Extraktion strukturierter Design-Daten (Layout, Typografie, Farben) aus Figma-Frames, Abrufen von Design-Variablen und -Tokens, Zuordnung von Figma-Komponenten zu deiner bestehenden Codebasis via Code Connect sowie die Aufnahme visueller Referenzen zur Validierung. Das Plugin funktioniert sowohl mit Figmas Cloud-Server als auch mit der Desktop-App.
So verwendest du es: Teile eine Figma-URL und bitte Claude, das Design umzusetzen. Verwende /implement-design, um Figma-Frames mithilfe des Design-Systems deines Projekts in Code zu übersetzen. Verwende /create-design-system-rules, um individuelle Richtlinien zu generieren, die die Entwicklungskonventionen deines Teams abbilden. Verwende /code-connect-components, um Zuordnungen zwischen Figma-Komponenten und deinen Codebase-Implementierungen herzustellen.
Beispiel-Prompts: „Implementiere dieses Figma-Design: [Figma-URL einfügen]", „Erstelle Design-System-Regeln für mein React-Projekt", „Verknüpfe meine Button-Komponente mit ihrem Figma-Gegenstück", „Extrahiere die Farbvariablen aus dieser Design-Datei".