Figma
Diagramme und besseren Code aus Figma-Kontext generieren
Zu Claude hinzufügen (opens in new tab)Der Figma-MCP-Server hilft dir, Figma-Kontext einzubinden und hochwertigen Code zu generieren, der zu deiner Codebasis und deinen Design-Absichten passt. Nutze den MCP-Server, um Code-Ressourcen aus Figma Design oder Make-Dateien abzurufen und deine Ideen in produktionsreife Apps zu verwandeln.
**Wichtige Funktionen:**
• **Code aus ausgewählten Frames oder Nodes generieren** – Wähle einen Frame in Figma oder gib eine Node-URL an, damit ein KI-Agent dein Design in Code umwandelt.
• **Design-Kontext aus Ebenen extrahieren** – Rufe Variablen, Komponenten und Layouts aus einem Design ab, damit Builds den Design-Patterns entsprechen.
• **Smarter programmieren mit Code Connect** – Steigere die Ausgabequalität durch die Wiederverwendung deiner bestehenden Komponenten: Der MCP-Server informiert KI-Agenten über vorhandene Komponenten auf Basis von Code-Connect-Informationen.
• **Flows mit Diagrammen abbilden** – Der Figma-MCP-Server kann deine Claude-Prompts in Flussdiagramme, Gantt-Diagramme oder andere Diagramme in FigJam umwandeln.
**Hinweis:** Das Tool get_screenshot ist derzeit darauf beschränkt, bei Verwendung in Claude und Claude Code eine Beschreibung von Figma-Screenshots zurückzugeben. Entwicklungsbedingungen [hier](https://www.figma.com/legal/developer-terms/) einsehen.
Tools
- generate_diagram
- get_design_context
- get_screenshot
- get_metadata
- create_design_system_rules
- get_variable_defs
- get_code_connect_map
- get_figjam
- whoami
Verwende nur Connectors von Entwicklern, denen du vertraust. Anthropic hat keine Kontrolle darüber, welche Tools Entwickler bereitstellen, und kann nicht garantieren, dass sie wie vorgesehen funktionieren oder unverändert bleiben.
