Figma Code Connect Componentsvon OpenAI

Figma Code Connect Components Skill.

Mache die Beziehung zwischen einer Design-Komponente und ihrer Implementierung explizit.

Figma
Designsysteme
Developer Handoff

OpenDesign herunterladen Anleitung ansehen

Quellenprüfung · Figma Code Connect ComponentsSKILL.md

Aufgabe Figma Ergebnis • Eine vorgeschlagene Liste von Figma-Node-zu-Code-Komponenten-Zuordnungen • Freigegebene Code-Connect-Zuordnungen mit Quellpfaden und Framework-Bezeichnungen • Eine Zusammenfassung, die verbundene, übersprungene und fehlgeschlagene Zuordnungen trennt Vor dem Start Verbundenes Figma MCP, Zugriff auf veröffentlichte Komponenten und die Codebasis sowie aktuelle Code-Connect-Berechtigung und Bearbeitungsrechte.

Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Veröffentlichte Figma-Komponenten ihrem Code zuordnen

Ein Figma-MCP-Workflow zum Finden, Prüfen und Schreiben freigegebener Code-Connect-Zuordnungen.

Workflow auf QuellenbasisKein Ausführungs-Benchmark

Die Arbeitsweise

Figma Code Connect Components ist ein Mapping-Workflow, kein Screen-Generator. Er findet nicht zugeordnete veröffentlichte Komponenten in einer Figma-Auswahl, durchsucht die lokale Codebasis und vergleicht Komponentenstruktur und Eigenschaften. Ein übereinstimmender Name ist nur ein Ausgangspunkt: Auch Variantenoptionen, Standardwerte und Zweck müssen zusammenpassen.

Laut Quelle müssen die vorgeschlagenen Zuordnungen dem Nutzer gezeigt werden, bevor Mappings erstellt werden. Eine teilweise Freigabe wird unterstützt; mehrdeutige oder fehlende Komponenten werden gemeldet statt geraten. Das Ergebnis ist eine auffindbare Verbindung zwischen Design und Code; sie schreibt keine der beiden Seiten automatisch um und beweist nicht, dass das gerenderte Erscheinungsbild identisch ist.

Erwartete Ergebnisse

Eine vorgeschlagene Liste von Figma-Node-zu-Code-Komponenten-Zuordnungen
Freigegebene Code-Connect-Zuordnungen mit Quellpfaden und Framework-Bezeichnungen
Eine Zusammenfassung, die verbundene, übersprungene und fehlgeschlagene Zuordnungen trennt

Beispiel-Brief ansehen

Vom Brief zur Prüfung

01
Veröffentlichte Komponenten identifizieren
Verwende einen node-spezifischen Figma-Link oder eine unterstützte Desktop-Auswahl und finde heraus, welche Komponenten noch nicht zugeordnet sind.
02
Implementierungen vergleichen
Durchsuche das Repository und prüfe tatsächliche Exporte, Eigenschaften und Standardwerte. Zeige Alternativen, wenn mehr als eine Komponente passen könnte.
03
Freigegebene Auswahl verbinden
Übermittle nur vom Nutzer freigegebene Zuordnungen und melde erfolgreiche und fehlgeschlagene Einträge getrennt.

02 Einsatzbereiche

Wann er sich eignet

Verbundenes Figma MCP, Zugriff auf veröffentlichte Komponenten und die Codebasis sowie aktuelle Code-Connect-Berechtigung und Bearbeitungsrechte.

Gut geeignet

Bibliotheks-HandoffNützlich, wenn Designer und Entwickler bereits entsprechende Komponentenbibliotheken pflegen, die Verknüpfungen dazwischen aber unklar sind.
Schrittweise Mapping-BereinigungPasst zu einer Auswahl mit bereits zugeordneten Komponenten und einigen neuen Elementen.

Zu prüfende Grenzen

Veröffentlichte Komponenten erforderlichDer geprüfte Workflow gilt für veröffentlichte Komponenten oder Komponentensätze, nicht für beliebige Rechtecke oder nicht geteilte Entwurfskomponenten.
Zugriff ist separatPrüfe vor dem Erstellen von Zuordnungen, dass dein Figma-Tarif Code Connect unterstützt und du Bearbeitungsrechte sowie eine funktionierende Verbindung hast.

Diese Eingaben bereithalten

Figma-AuswahlGib einen Dateilink mit der Ziel-Node-ID an oder einen ausgewählten Node über eine unterstützte Desktop-Verbindung.
Code-RepositoryStelle die Implementierungsdateien bereit, damit Exporte und Props geprüft werden können.
Freigabe der ZuordnungenWähle alle, einige oder keine der vorgeschlagenen Zuordnungen aus, bevor sie geschrieben werden.

03 Wichtige Entscheidungen

Entscheidende Punkte

Abgleich auf Eigenschaftsebene
Der Vergleich von Varianten- und Größenschnittstellen verringert irreführende Verknüpfungen zwischen Komponenten, die nur den Namen teilen.
Teilerfolg explizit
Eine fehlgeschlagene oder übersprungene Komponente bleibt im Handoff sichtbar, statt hinter einer allgemeinen Erfolgsmeldung zu verschwinden.

04 Beispielbriefing

Einen fokussierten Brief ausprobieren

Der folgende Beispiel-Brief wurde nicht getestet. Prüfe die Einrichtung des Skills, bevor du ihn verwendest.

Einrichtung prüfen

Installiere den kuratierten Skill über den unterstützten Mechanismus deiner Agent-Umgebung und verbinde Figma separat. Diese Beta-Materialien unterliegen den Figma Developer Terms, nicht MIT. Die Installation gewährt keinen Code-Connect-Zugriff.

Upstream-Quelldatei

https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-code-connect-components/SKILL.md

Verbundenes Figma MCP, Zugriff auf veröffentlichte Komponenten und die Codebasis sowie aktuelle Code-Connect-Berechtigung und Bearbeitungsrechte.

Mit einem Ergebnis beginnen

Passe Umfang, Quellmaterial und Vorgaben in diesem Brief an, bevor du den Skill ausführst.

Beispiel-Brief

Verwende figma-code-connect-components, um die veröffentlichten Komponenten in diesem Figma-Frame zu prüfen und ihre Implementierungen in unserem Repository zu finden. Vergleiche Varianten-Props und Standardwerte, zeige die vorgeschlagenen Quellpfade und warte auf meine Freigabe, bevor du Zuordnungen erstellst. Wenn eine Komponente zwei plausible Treffer hat, erkläre den Unterschied, statt stillschweigend zu wählen.

Ergebnis prüfen

Prüfe die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

Jeder vorgeschlagene Quellpfad verweist auf den tatsächlichen Komponentenexport.
Nur ausdrücklich akzeptierte Zuordnungen werden erstellt.
Nicht veröffentlichte, bereits zugeordnete oder durch fehlende Berechtigungen blockierte Elemente werden korrekt gemeldet.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass seine externen Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladen Quickstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, festgelegte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellen-Inhaber: OpenAI
Repository: openai/skills
Skill-Datei: skills/.curated/figma-code-connect-components/SKILL.md
Lizenz: Figma-Bedingungen
Geprüfter Snapshot: 2026-10-07 · 49f948faa925

Redaktionelle Quellenzusammenfassung

Ein Figma-MCP-Workflow zum Finden, Prüfen und Schreiben freigegebener Code-Connect-Zuordnungen.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, weder Skill-Nutzung noch Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Erzeugt das Anwendungscode?

Nein. Er ordnet Design-Komponenten bestehenden Implementierungen zu. Code aus einem Figma-Frame zu erstellen, ist ein separater Workflow.

Kann er nicht veröffentlichte Komponenten verbinden?

Laut der geprüften Quelle müssen die Komponenten in einer Team-Bibliothek veröffentlicht sein, bevor Code Connect sie zuordnen kann.

Kann ich nur eine Zuordnung freigeben?

Ja. Der Workflow unterstützt ausdrücklich, alle, einige oder keine der vorgeschlagenen Zuordnungen zu akzeptieren.

OpenDesign

Schaffe Raum für die nächste Design-Iteration.

Halte Brief, Quellmaterial und Design-Arbeit in einem lokalen Arbeitsbereich zusammen. Prüfe die Einrichtung des Skills selbst, bevor du ihn in deinen Workflow aufnimmst.

OpenDesign herunterladen Design-Skills durchstöbern