Figma Code Connect
Skill Verifiziert AktivErstellt und pflegt Figma Code Connect-Vorlagendateien, die Figma-Komponenten mit Code-Snippets verknüpfen. Verwenden Sie dies, wenn der Benutzer Code Connect, die Zuordnung von Figma-Komponenten, die Design-zu-Code-Übersetzung erwähnt oder darum bittet, `.figma.ts`- oder `.figma.js`-Dateien zu erstellen/aktualisieren.
Um den Design-zu-Code-Prozess zu optimieren, indem die automatische Generierung von genauen und wartbaren Figma Code Connect-Vorlagendateien ermöglicht wird, wodurch die Konsistenz zwischen Designs und Code gewährleistet wird.
Funktionen
- Erstellt Figma Code Connect-Vorlagendateien (`.figma.ts`)
- Analysiert Figma-URLs, um Dateischlüssel und Knoten-IDs zu extrahieren
- Identifiziert nicht zugeordnete Figma-Komponenten mithilfe von MCP-Werkzeugen
- Ruft Komponenteneigenschaften ab (TEXT, BOOLEAN, VARIANT, INSTANCE_SWAP, SLOT)
- Durchsucht die Codebasis nach übereinstimmenden Codekomponenten
- Generiert eine Vorlagenstruktur mit Code-Snippets und Importen
Anwendungsfälle
- Wenn ein Benutzer `.figma.ts`-Dateien zur Zuordnung von Figma-Komponenten zu Code erstellen oder aktualisieren muss.
- Wenn ein Benutzer Code Connect, die Zuordnung von Figma-Komponenten oder die Design-zu-Code-Übersetzung erwähnt.
- Zur Automatisierung des Prozesses der Verbindung von Figma-Designs mit vorhandenen Codekomponenten für eine bessere Konsistenz.
Nicht-Ziele
- Erstellung oder Aktualisierung von `.figma.tsx`-Dateien, die `figma.connect()` verwenden.
- Verarbeitung von Figma-Komponenten, die nicht in einer Team-Bibliothek veröffentlicht wurden.
- Bereitstellung der Code Connect-Funktionalität für kostenlose oder professionelle Figma-Pläne.
- Generierung von Code-Snippets direkt aus Figma, ohne eine `.figma.ts`-Vorlagendatei zu erstellen.
Installation
/plugin install mcp-server-guide@figma-mcp-server-guideQualitätspunktzahl
VerifiziertÄhnliche Erweiterungen
Generate Project Plan
98Generiert ein FigJam-Projektplan-Board aus einem PRD plus Codebase-Kontext. Interaktiver Ablauf: Recherche → Abschnitte vorschlagen → tiefgehende Recherche pro Abschnitt → Vorschlag für Inhalt + Blockstruktur pro Abschnitt → FigJam erstellen → Skelett → füllen → Diagramme → abschließen. Jeder Inhaltsblock (Abschnitt, verschachtelter Abschnitt, Einführungsaufruf, Tabelle, mehrspaltiger Text, Sticky-Spalte, Diagrammabschnitt, Metadatenleiste) hat seine eigene Unterfertigkeits-Referenzdatei. Verwenden Sie dies, wenn der Benutzer nach 'Projektplan in FigJam', 'interaktiver Projektplan', '/generate-project-plan' fragt oder ein PRD bereitstellt und eine Bestätigung pro Abschnitt für Inhalt + Rendering wünscht.
Figma Code Connect Components
90Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.
Project Session Manager
100Worktree-first dev environment manager for issues, PRs, and features with optional tmux sessions
Public Google Drive
100Erstellen Sie öffentliche Google Docs- oder Google Sheet-Dateien, ohne OAuth zu benötigen. Verwenden Sie diese Fähigkeit, um Google Docs und Sheets zu erstellen und zu bearbeiten, keine Google-Anmeldung erforderlich. Dokumente sind unter teilbaren Links sichtbar. Die Registrierung erfolgt automatisch bei der ersten Verwendung.
Oh My Claudecode
100Process-first advisor routing for Claude, Codex, or Gemini via `omc ask`, with artifact capture and no raw CLI assembly
Use My Browser
100Verwenden Sie dies, wenn die Arbeit von den Live-Browsersitzungs- oder gerenderten Zustand des Benutzers abhängt und nicht von statischen Abrufen, insbesondere für Browser-Debugging-Kontexte oder von DevTools ausgewählte Elemente oder Anfragen, angemeldeten Dashboards oder CMS-Flows, localhost-Apps, Formularen, Uploads, Downloads, Medieninspektion, DOM- oder iframe-Inspektion, Shadow DOM oder Browserfehlern, die wie Soft-404s, Authentifizierungswände, Anti-Bot-Prüfungen oder Ratenbegrenzungen aussehen.