Lokalisierter Leseleitfaden
figma-code-connect-componentsZweck, Verwendung und Quelle
Verbindet Figma-Designkomponenten mit Codekomponenten mithilfe der Code Connect-Mapping-Tools. Verwenden Sie diese Funktion, wenn der Benutzer „Code Connect“, „Diese Komponente mit Code verbinden“, „Diese Komponente zuordnen“, „Komponente mit Code verknüpfen“, „Code Connect-Mapping erstellen“ angibt oder Zuordnungen zwischen Figma-Designs und Code-Implementierungen herstellen möchte. Für Canvas-Schreibvorgänge überuse_figma, verwendenfigma-useDie
Quelle abgerufen:
- Quell-Repository
- openai/skills
- SKILL.md
skills/.curated/figma-code-connect-components/SKILL.md- Repository-Sterne
- 28,420
- Repository zuletzt aktualisiert
- 2026-10-29
- Fähigkeitskategorien
- Design
- Letzte Datenerfassung
Lizenz: Nicht angegeben
Die Workflow-Auszüge dienen als Lesehilfe und sind keine ausführbaren Anweisungen von Codez. Für die Erstellung dieser Seite wurde keine Drittanbieter-Skill verwendet.
Die folgenden Abschnitte zu Zweck und Arbeitsablauf sind vorgelagertes Material, das zur besseren Lesbarkeit aufbereitet und übersetzt wurde. Sie unterscheiden sich von der separat gekennzeichneten redaktionellen Analyse von Codez.
Was diese Fähigkeit bewirkt
Verbindet Figma-Designkomponenten mit Codekomponenten mithilfe der Code Connect-Mapping-Tools. Verwenden Sie diese Funktion, wenn der Benutzer „Code Connect“, „Diese Komponente mit Code verbinden“, „Diese Komponente zuordnen“, „Komponente mit Code verknüpfen“, „Code Connect-Mapping erstellen“ angibt oder Zuordnungen zwischen Figma-Designs und Code-Implementierungen herstellen möchte. Für Canvas-Schreibvorgänge überuse_figma, verwendenfigma-useDie
Wie der vorgelagerte Workflow funktioniert
Erforderlicher Arbeitsablauf
Befolgen Sie diese Schritte in der angegebenen Reihenfolge. Überspringen Sie keine Schritte.
Aufwärtspassage · L29 ↗Überblick
Diese Funktion hilft Ihnen, Figma-Designkomponenten mithilfe der Figma-Code-Connect-Funktion mit ihren entsprechenden Code-Implementierungen zu verknüpfen. Sie analysiert die Figma-Designstruktur, durchsucht Ihre Codebasis nach passenden Komponenten und erstellt Zuordnungen, die die Konsistenz zwischen Design und Code gewährleisten.
Aufwärtspassage · L8 ↗Schritt1: Code-Verbindungsvorschläge abrufen
Anrufget_code_connect_suggestionsDieses Tool identifiziert alle nicht zugeordneten Komponenten in einem einzigen Vorgang. Es führt folgende Schritte automatisch durch: Abrufen von Komponenteninformationen aus dem Figma-Szenengraphen, Identifizieren veröffentlichter Komponenten in der Auswahl, Prüfen vorhandener Code Connect-Zuordnungen und Herausfiltern bereits verbundener Komponenten.
get_code_connect_suggestions(fileKey=":fileKey", nodeId="1:2")Anforderungen und Einrichtung
Voraussetzungen
Der Figma MCP-Server muss verbunden und erreichbar sein. Der Benutzer muss eine Figma-URL mit Knoten-ID angeben:https://figma.com/design/:fileKey/:fileName?node-id=1-2
Grenzwerte und Qualitätskontrollen
Aus dieser Datei wurde kein separater Grenzwertabschnitt ausgewählt. Dies bedeutet nicht, dass die Anwendung für jede Eingabe oder Umgebung geeignet ist. Überprüfen Sie den vollständigen Quellcode und validieren Sie Ihr Ergebnis selbst.
Beginnen Sie mit einem sicheren Testlauf
- Prüfen Sie den unterstützten Host und die Installationsanweisungen für das Repository. Halten Sie das Skill-Verzeichnis und die darin enthaltenen Skripte, Assets und Dokumentationen zusammen;SKILL.mdEine Einzelperson kann Abhängigkeiten außer Acht lassen.
- Geben Sie dem Agenten Ihre tatsächlichen Eingaben, die gewünschten Ausgaben und die Akzeptanzkriterien an. Aufrufsyntax und verfügbare Tools hängen vom Hostsystem ab; diese Website geht nicht von einem universellen Installationsbefehl aus.
- Testen Sie den Quellworkflow in einem temporären Projekt oder auf einer Kopie. Überprüfen Sie Vorgänge, die Dateien, Remote-Dienste oder abrechnungsfähige Ressourcen ändern, bevor Sie diese zulassen.
- Überprüfen Sie die Ausgabe anhand der Quellqualitätsprüfungen und Ihrer eigenen Anforderungen. Ein erfolgreicher Trigger oder eine hohe Anzahl von Sternen im Repository garantiert kein korrektes Ergebnis.
Lesen Sie mehr dazu in der Quelle.
- Überblick
- Kompetenzgrenzen
- Voraussetzungen
- Erforderlicher Arbeitsablauf
- Schritt1: Code-Verbindungsvorschläge abrufen
- Option A: Verwendung
figma-desktopMCP (keine URL angegeben) - Option B: Wenn eine Figma-URL angegeben wird
- Schritt2: Codebasis nach übereinstimmenden Komponenten durchsuchen
- Schritt3Dem Benutzer passende Ergebnisse präsentieren
- Schritt4: Code Connect-Zuordnungen erstellen
- Beispiel1: Verbinden einer Schaltflächenkomponente
- Beispiel2Mehrere Komponenten mit Teilauswahl
- Beispiel3: Erstellung einer Komponente erforderlich
- Proaktive Komponentenerkennung
- Genaue Strukturanpassung
- Klare Kommunikation
- Umgang mit Mehrdeutigkeit
- Anmutiger Niedergang
- Fehler: „In dieser Auswahl wurden keine veröffentlichten Komponenten gefunden.“
- Problem: „Code Connect ist nur in den Plänen „Organisation“ und „Unternehmen“ verfügbar.“
- Problem: Es wurde keine passende Komponente im Quellcode gefunden.
- Fehler: „Veröffentlichte Komponente nicht gefunden“ (CODE_CONNECT_ASSET_NOT_FOUND)
- Problem: "Komponente ist bereits einem Code zugeordnet" (CODE_CONNECT_MAPPING_ALREADY_EXISTS)
- Problem: „Unzureichende Berechtigungen zum Erstellen einer Zuordnung“ (CODE_CONNECT_INSUFFICIENT_PERMISSIONS)
- Problem: Code Connect-Zuordnung schlägt mit URL-Fehlern fehl
- Problem: Mehrere ähnliche Komponenten gefunden
- Code verstehen
- Zusätzliche Ressourcen
Verwandte Fähigkeiten
Übersetzung und Umfang
Dieser Leseleitfaden wählt Passagen aus dem markierten stromaufwärts gelegenen Abschnitt aus.SKILL.mdDie Übersetzung wurde unterstützt. Es handelt sich weder um ein vollständiges Handbuch noch um eine Garantie für geprüfte Kompatibilität. Lesen Sie vor der Verwendung das Original und die darin referenzierten Dateien.
Diese Einleitung bezieht sich auf die unten angepinnte Version; die aktuelle Repository-Aktivität und der Erfassungszeitpunkt werden separat angezeigt.
- Angeheftete Quelle
- Lesen Sie das Original ↗
- Quelle abgerufen
- Source-Commit
49f948faa9258a0c61caceaf225e179651397431- Quelle SHA-256
0f19edad8aed28063a3517c419fbcbef5421d024f189fd02a17fae25093ec69d