Figma MCP-Server
Gib KI-Agenten Zugriff auf strukturierte Design-Informationen, damit du präzisen, designorientierten Code generieren kannst.
Dev Mode
Entwicklung und Design, bei jedem Schritt verbunden
Der Figma MCP-Server bindet die Komponenten des Designsystems direkt in deine Codebase ein.
Wechsle von der Arbeitsfläche zum Code – und vom Code zurück zur Arbeitsfläche.
Beweg dich fließend zwischen den verschiedenen Phasen des Entwicklungsprozesses hin und her, und schließe so die Lücke zwischen der Designabsicht und dem Code.
Auf die Arbeitsfläche schreiben
Erstelle direkt über deinen KI-Agenten funktionsfähige Figma-Designs. Sie sind bearbeitbar, sodass dein Team sie direkt auf der Arbeitsfläche anpassen kann.
Verbinde Code und Design
Ordne die Designkomponenten den tatsächlichen Produktionskomponenten zu, damit der neue Code dein aktuelles System nutzt.
Codesyntax in Variablen
Stelle Variablen im Code dar, um die Implementierung zu vereinfachen. Der Codeausschnitt der Variablen wird bei der Überprüfung angezeigt.
Die Produkte, die du liebst, werden in Figma entworfen
Mit dem Dev-Modus hat sich auch unsere Herangehensweise grundlegend geändert. Er hilft Designer*innen und Entwickler*innen, eine gemeinsame Sprache zu finden, und unterstützt uns dabei, den Prozess der Produktentwicklung neu zu denken.
Andrei Garcia
Director, Design Systems, HP
- 90 %
90 % der Entwickler*innen stellten Verbesserungen der Arbeitsqualität fest
- 1,5 Std.
1,5 Stunden Arbeit pro Woche gespart
Synchron bleiben – ohne Meetings.
Verwandle Code in überprüfbare Visuals, verfolge, wann Designs für die Entwicklung bereit sind, und sieh dir alle Aktualisierungen in einem speziell für Entwickler*innen gestalteten Feed an.
Dev-Status und Benachrichtigungen
Verfolge, wann Designs „Ready for dev“ sind. Lass dich benachrichtigen, wenn sich Status ändern oder Designs aktualisiert werden.
Vergleiche Änderungen
Sieh genau, was sich im Laufe der Zeit verändert hat, indem du die beiden Versionen nebeneinander vergleichst.
Vom Code zur Arbeitsfläche
Verwandle die Live-UI in eine bearbeitbare Figma-Datei, damit Designer*innen sie im Kontext überprüfen können.
Dev-Ressourcen
Verknüpfe GitHub-Dateien, Jira-Tickets und Storybook-Stories direkt mit Ebenen.
Finde die Details, die du zum Bauen brauchst – und zwar schnell.
Verstehe die Struktur hinter jedem Design. Experimentiere, teste und programmiere, ohne die Designdatei zu verändern.
Fokusansicht
Erhalte eine isolierte Ansicht der Frames, die du gerade erstellst, und blende den Rest der Arbeitsfläche aus.
Erweiterte Inspektion
Greife direkt von der Arbeitsfläche aus auf Code-Schnipsel, Komponenteneigenschaften und strukturierte Ebenendaten zu.
Komponenten-Testumgebung
Entdecke die Eigenschaften und Varianten der Komponenten interaktiv. Finde heraus, welche Komponente du verwenden solltest und wie du sie einsetzt.
Annotationen
Entwickler*innen können Variablen-, Eigenschaften- und Messwertinformationen für bestimmte Ebenen abrufen.
