figma-code-connect-components

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.

Generiert benutzerdefinierte Design-System-Regeln für die Codebasis des Benutzers. Verwenden, wenn der Benutzer sagt: "Design-System-Regeln erstellen", "Regeln für mein Projekt generieren", "Design-Regeln einrichten", "Design-System-Richtlinien anpassen" oder projektspezifische Konventionen für Figma-to-Code-Workflows festlegen möchte. Erfordert eine Verbindung zum Figma MCP-Server.

Erstelle eine neue leere Figma-Datei. Verwende dies, wenn der Benutzer ein neues Figma-Design oder eine FigJam-Datei erstellen möchte, oder wenn du eine neue Datei benötigst, bevor du use_figma aufrufst. Übernimmt die Planauflösung über whoami, falls erforderlich. Nutzung — /figma-create-new-file [editorType] [fileName] (z. B. /figma-create-new-file figjam My Whiteboard)

Verwenden Sie diese Fähigkeit zusammen mit figma-use, wenn die Aufgabe darin besteht, eine An

We need to translate the given English text into German, preserving the name "figma-generate-library" if it appears. The name appears in the source text? Actually, the instruction says "Name to preserve: figma-generate-library" but the text inside <text> does not contain that name. The text mentions "figma-use" but not "figma-generate-library". So we just translate the text as is, without adding the name. Also preserve product names like Figma, Plugin API, etc. No extra commentary. Translation: "Erstellen oder aktualisieren Sie ein professionelles Designsystem in Figma auf Basis einer Codebasis. Verwenden Sie dies, wenn der Benutzer Variablen/Tokens erstellen, Komponentenbibliotheken aufbauen, Theming (Hell-/Dunkelmodi) einrichten, Grundlagen dokumentieren oder Lücken zwischen Code und Figma schließen möchte. Diese Fähigkeit lehrt, WAS zu bauen und in WELCHER REIHENFOLGE – sie