Figma Skills

mcp-server-guide/skills/code-connect-components

Stellt bidirektionale Verknüpfungen zwischen Figma-Designkomponenten und Code-Implementierungen mithilfe von Code Connect her. Erfordert eine Figma-MCP-Serververbindung und veröffentlichte Komponenten in Organisation- oder Enterprise-Plänen. Identifiziert automatisch nicht zugeordnete Komponenten in Figma-Auswahlen und durchsucht dann Ihre Codebasis nach passenden Codekomponenten anhand von Name, Struktur und Props. Präsentiert gefundene Komponenten zur Überprüfung, bevor Zuordnungen erstellt werden, und ermöglicht selektive Annahme oder Ablehnung. Unterstützt mehrere...

mcp-server-guide/skills/create-design-system-rules

Benutzerdefinierte Design-System-Regeln für eine konsistente Figma-zu-Code-Implementierung in Ihrem Projekt. Generiert projektspezifische Konventionen für Komponentenorganisation, Styling, Design-Tokens und Asset-Handling, die KI-Agenten zu konsistentem Code führen. Unterstützt drei Regeldateiformate: CLAUDE.md für Claude Code, AGENTS.md für Codex CLI und .cursor/rules/figma-design-system.mdc für Cursor. Erfordert Figma-MCP-Serververbindung und Codebase-Analyse, um bestehende Muster vor der Regel... zu entdecken.

mcp-server-guide/skills/figma-code-connect

Erstellt und pflegt Figma Code Connect-Vorlagendateien, die Figma-Komponenten Code-Snippets zuordnen. Verwenden Sie dies, wenn der Benutzer Code Connect, Figma-Komponente… erwähnt.

mcp-server-guide/skills/figma-code-connect-components

Connects 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`.

mcp-server-guide/skills/figma-create-design-system-rules

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.

mcp-server-guide/skills/figma-create-new-file

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)

mcp-server-guide/skills/figma-design-to-code

Verwende diese Fähigkeit, wenn ein Figma-Design als Code implementiert wird (Design → Code) – die Lese-von-Figma-Richtung. Auslöser: 'dieses Figma-Design implementieren', 'dieses … erstellen

mcp-server-guide/skills/figma-generate-design

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

mcp-server-guide/skills/figma-generate-diagram

MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. Routes to type-specific guidance (generic flowchart, architecture…

mcp-server-guide/skills/figma-generate-library

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

mcp-server-guide/skills/figma-implement-design

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

mcp-server-guide/skills/figma-implement-motion

Übersetzt Figma-Bewegungen und Animationen in produktionsreifen Anwendungscode. Verwenden Sie dies bei der Implementierung von Animationen/Bewegungen aus einem Figma-Design – der Benutzer erwähnt…

mcp-server-guide/skills/figma-swiftui

SwiftUI ↔ Figma-Übersetzung. Verwende, wenn der Benutzer Swift, SwiftUI, iOS, iPhone oder iPad erwähnt – in BEIDE Richtungen – und ein Figma-Design in… übersetzt.

mcp-server-guide/skills/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.

mcp-server-guide/skills/figma-use-figjam

Diese Fähigkeit hilft Agenten, das use_figma MCP-Tool von Figma im FigJam-Kontext zu verwenden. Kann zusammen mit figma-use verwendet werden, das grundlegendes Wissen zur Nutzung des…

mcp-server-guide/skills/figma-use-motion

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…

mcp-server-guide/skills/figma-use-slides

Diese Fähigkeit hilft Agenten, das Figma-use_figma-MCP-Tool im Slides-Kontext zu verwenden. Kann zusammen mit figma-use verwendet werden, das grundlegendes Wissen zur Nutzung des…

mcp-server-guide/workflow-skills/generate-project-plan

Erstelle ein FigJam-Projektplan-Board aus einem PRD plus Codebase-Kontext. Interaktiver Ablauf: Recherche → Abschnitte vorschlagen → tiefgehende Recherche pro Abschnitt → pro Abschnitt…

mcp-server-guide/skills/implement-design

Übersetzt Figma-Designs in produktionsreifen Code mit pixelgenauer visueller Wiedergabetreue. Erfordert eine Figma-MCP-Serververbindung und eine Figma-URL mit Dateischlüssel und Knoten-ID, um Designkontext, Screenshots und Assets zu extrahieren. Siebenstufiger strukturierter Arbeitsablauf: URL parsen, Designkontext abrufen, visuelle Referenz erfassen, Assets herunterladen, in Projektkonventionen übersetzen, 1:1-Parität erreichen und gegen Figma validieren. Priorisiert die Wiederverwendung von Designsystemen gegenüber Duplikation; bildet Figma-Tokens auf das Projekt-Design ab...

mcp-server-guide/workflow-skills/video-interaction-mapper

Diese Fähigkeit sollte verwendet werden, wenn der Benutzer darum bittet, eine UI-Bildschirmaufnahme zu analysieren und Interaktionszustände in Figma zu kartieren. Auslöser für Anfragen wie "Video einfügen…