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

Canva in Claude hinzufügen (öffnet neuen Tab)

Deine KI-Vermarkterin für Paid Ads, SEO, E-Mail, Social Media und Analytics

Helena by Enrich Labs in Claude hinzufügen (öffnet neuen Tab)

Ein KI-Concierge, der Formulare in Gespräche verwandelt

Perspective AI in Claude hinzufügen (öffnet neuen Tab)

Erstelle in Minuten eine Website oder Web-App! Generiere, gestalte, schreibe Code und erstelle Texte für deine Website. Powered by B12. Kontakt: hello@b12.io

Website Generator by B12 in Claude hinzufügen (öffnet neuen Tab)

Projekte, Aufgaben, Portfolios, Boards, Workflows, Meilensteine, Abhängigkeiten, Formulare und Dashboards mit monday.com verwalten.

monday.com in Claude hinzufügen (öffnet neuen Tab)