Entwicklung
Figma Implement Design
Setzt Figma-Designs per MCP-Server pixelgenau in Produktionscode um
Dieser Skill übersetzt Figma-Designs in produktionsreifen Anwendungscode mit dem Ziel visueller 1:1-Übereinstimmung. Er nutzt den offiziellen Figma MCP-Server, um über eine Figma-URL oder die aktuelle Auswahl in der Desktop-App strukturierte Design-Daten, Screenshots und Assets abzurufen. Der Workflow ist in klar definierte Schritte gegliedert: Node-ID ermitteln, Design-Kontext und Screenshot laden, Assets herunterladen, in projektspezifische Konventionen übersetzen und abschließend gegen die Vorlage validieren.
Besonderen Wert legt der Skill auf die Integration in bestehende Projektstrukturen: Tailwind-Ausgaben aus dem MCP-Server werden als Referenz behandelt, nicht als finaler Code-Stil, und sollen durch vorhandene Design-System-Komponenten und -Tokens ersetzt werden. Klare Abgrenzungen zu verwandten Skills wie figma-use, figma-generate-design oder figma-code-connect-components sorgen dafür, dass der richtige Workflow für Code-Implementierung statt für Figma-interne Bearbeitung gewählt wird. Geeignet für Entwicklerteams, die Design-Handoffs aus Figma zuverlässig und mit minimaler Nacharbeit in Code überführen wollen.
FAQ
Häufige Fragen zu Figma Implement Design
- Was brauche ich, damit der Skill funktioniert?
- Der Figma MCP-Server muss verbunden sein, entweder als Remote-Server mit einer Figma-URL im Format https://figma.com/design/:fileKey/:fileName?node-id=1-2 oder als figma-desktop-MCP mit der lokal geöffneten Figma-App. Bei der Desktop-Variante reicht auch eine aktive Auswahl im Figma-File statt einer URL.
- Ersetzt dieser Skill mein bestehendes Design System oder Tailwind-Setup?
- Nein, der Skill behandelt die vom Figma MCP-Server gelieferten Tailwind-Klassen ausdrücklich nur als Referenz für Design und Verhalten, nicht als finalen Code-Stil. Im Workflow werden diese Ausgaben in die projektspezifischen Konventionen und vorhandene Design-System-Komponenten und -Tokens übersetzt.
- Wie unterscheidet sich figma-implement-design von figma-use oder figma-generate-design?
- figma-implement-design ist für den Fall gedacht, dass am Ende Code im eigenen Repository entstehen soll. Für Änderungen direkt an Nodes innerhalb von Figma ist figma-use zuständig, für das Erzeugen ganzer Screens in Figma aus Code oder Beschreibung figma-generate-design, und für reine Code-Connect-Mappings figma-code-connect-components.
- Werden Icons oder Bilder automatisch mitgeliefert oder muss ich eigene Assets einbinden?
- Assets wie Bilder, Icons und SVGs werden über den Assets-Endpunkt des Figma MCP-Servers bezogen, etwa als localhost-Quellen, die direkt verwendet werden sollen. Laut Workflow sollen dabei keine zusätzlichen Icon-Pakete importiert oder Platzhalter erzeugt werden, wenn bereits eine Quelle aus Figma vorliegt.