Figma MCP Server

Erstellt 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.

**Zwingende Voraussetzung** – Sie MÜSSEN diesen Skill VOR jedem Aufruf des `create_new_file`-Tools aufrufen. Rufen Sie NIEMALS `create_new_file` direkt auf, ohne zuerst diesen Skill zu laden. Auslösen, wann immer der Benutzer eine neue leere Figma-Datei wünscht – eine neue Design-, FigJam- oder Slides-Datei – oder wenn Sie eine neue Datei benötigen, bevor Sie `use_figma` aufrufen. Verwendung – `/figma-create-new-file [editorType] [fileName]` (z. B. `/figma-create-new-file figjam My Whiteboard`, `/figma-create-new-file slides Q3 Review)`

Verwenden Sie diese Fähigkeit zusammen mit figma-use, wenn die Aufgabe die Übersetzung einer Anwendungsseite, -ansicht oder eines Layouts mit mehreren Abschnitten in Figma beinhaltet. Auslöser: 'in Figma schreiben', 'in Figma aus Code erstellen', 'Seite in Figma einfügen', 'diese App/Seite nehmen und in Figma erstellen', 'einen Bildschirm erstellen', 'eine Landingpage in Figma erstellen', 'den Figma-Bildschirm an den Code anpassen', 'dieses Modal/Dialogfeld/Drawer/Panel in Figma konvertieren'. Dies ist die bevorzugte Workflow-Fähigkeit, wenn der Benutzer eine vollständige Seite, ein Modal, ein Dialogfeld, einen Drawer, eine Seitenleiste, ein Panel oder eine beliebige zusammengesetzte Ansicht mit mehreren Abschnitten in Figma aus Code oder einer Beschreibung erstellen oder aktualisieren möchte. Erkennt Designsystemkomponenten, Variablen und Stile aus Code Connect-Dateien, vorhandenen Bildschirmen und Bibliotheken und importiert sie, dann werden Ansichten abschnittsweise mithilfe von Designsystem-Tokens anstelle von hartcodierten Werten zusammengesetzt.

MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram — flowchart, architecture diagram, sequence diagram, ERD or entity-relationship diagram, state diagram or state machine, gantt chart, or timeline. Also trigger when the user mentions Mermaid syntax or wants a system architecture, decision tree, dependency graph, API call flow, auth handshake, schema, or pipeline visualized in FigJam. Routes to type-specific guidance, sets universal Mermaid constraints, and tells you when to use a different diagram type or skip the tool entirely (mindmaps, pie charts, class diagrams, etc.).

Erstellen oder aktualisieren Sie ein professionelles Designsystem in Figma aus einer Codebasis. Verwenden Sie dies, wenn der Benutzer Variablen/Tokens erstellen, Komponentenbibliotheken erstellen, Theming (helle/dunkle Modi) einrichten, Foundations dokumentieren oder Lücken zwischen Code und Figma abgleichen möchte. Diese Fähigkeit lehrt WAS gebaut werden soll und in WELCHER REIHENFOLGE — sie ergänzt die `figma-use`-Fähigkeit, die lehrt WIE die Plugin-API aufgerufen wird. Beide Fähigkeiten sollten zusammen geladen werden.

**Zwingende Voraussetzung** — Sie MÜSSEN diesen Skill AUFRUFEN, BEVOR Sie jeden `use_figma`-Toolaufruf ausführen. Rufen Sie `use_figma` NIEMALS direkt auf, ohne diesen Skill zuerst zu laden. Das Überspringen führt zu häufigen, schwer zu debuggenden Fehlern. Auslösen, wann immer der Benutzer eine Schreibaktion oder eine einzigartige Leseaktion durchführen möchte, die eine JavaScript-Ausführung im Figma-Dateikontext erfordert — z. B. Knoten erstellen/bearbeiten/löschen, Variablen oder Tokens einrichten, Komponenten und Varianten erstellen, Auto-Layout oder Fills ändern, Variablen an Eigenschaften binden oder die Dateistruktur programmatisch inspizieren.

Diese Fähigkeit hilft Agenten, das Figma MCP-Tool use_figma im FigJam-Kontext zu verwenden. Kann neben figma-use verwendet werden, das grundlegenden Kontext für die Verwendung des use_figma-Tools bietet.