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.
Verwandte Connectors
Canva-Designs suchen, erstellen, befüllen und exportieren
Deine KI-Vermarkterin für Paid Ads, SEO, E-Mail, Social Media und Analytics
Mit Adobe-Profi-Tools ideieren, erstellen und liefern
monday.com Projektmanagement & CRM für Projekte, Aufgaben, Portfolios, Boards, Workflows, Meilensteine, Abhängigkeiten, Formulare, Dashboards, projektübergreifenden Portfolio-Status und kritische Pfade.
Miro-Boards aufrufen und neue Inhalte erstellen
Dropbox-Inhalte durchsuchen, organisieren und bearbeiten