CP Registry
Workflow

Figma-Workflow

Wie Figma und Code zusammenarbeiten, ohne dass jemand Werte abtippen muss. Drei Setup-Bausteine: Variables-Sync, Code-Connect, MCP.

Das Problem

Designer baut in Figma. Frontend tippt Werte ab. Designer ändert was. Frontend übersieht's oder übernimmt falsch. Bei jedem Token-Update das gleiche Spiel — bis irgendwann Figma und Code unterschiedliche Wahrheiten erzählen.

Lösung: Tokens als Single Source of Truth, in beide Richtungen synchronisierbar. Plus ein Code-Snippet pro Component direkt im Figma-Inspektor.

Drei Bausteine

1

Variables-Sync

Figma-Variables spiegeln dieselben Tokens wie der Code. Bei Token-Änderung im Code → Skript pusht zu Figma. Bei Änderung in Figma (selten) → Designer exportiert, Frontend mergt.

Tool: Figma MCP Server + figma-generate-library-Skill

2

Code-Connect

Pro Component eine .figma.ts-Datei. Mapping: dieser Figma-Component-Name → dieser Astro-Snippet. Designer klickt in Figma einen Hero an → der echte <Hero ... />-Code steht im Inspektor zum Kopieren.

Tool: Figma Code-Connect-CLI + figma-code-connect-Skill

3

MCP-Plugin

Claude Code mit Figma-Verbindung. Befehl: "Erstelle in Figma einen Frame mit Hero + 3 Cards basierend auf dieser Werkstatt-Konfig" — und es passiert. Round-Trip Werkstatt ↔ Figma ohne manuelle Schritte.

Tool: Figma Plugin claude-figma + figma-generate-design-Skill

Setup-Anleitung

  1. 1. Figma MCP installieren

    Figma stellt einen offiziellen MCP-Server bereit. Einmalig im Claude-Code-Profil aktivieren — danach kann Claude Code direkt mit Figma sprechen (Variables, Frames, Components anlegen / lesen).

    npx @figma/mcp-server --token=$FIGMA_TOKEN

  2. 2. Variables-Library generieren

    Mit dem figma-generate-library-Skill wird die Tokens-Definition aus dem Code in die Figma-File gepusht. Ergebnis: Figma kennt alle Brand-Farben, Spacings, Schriften — als richtige Variables, nicht als Style-Hacks.

    Pro Token-Änderung im Code läuft das Skript erneut. Designer arbeiten immer mit aktuellen Werten.

  3. 3. Code-Connect-Templates anlegen

    Pro Component-Datei (src/components/Hero/Hero.astro) eine Mapping-Datei (Hero.figma.ts). Der figma-code-connect-Skill generiert Templates basierend auf den Astro-Props.

    // Hero.figma.ts
import { figma } from '@figma/code-connect';
figma.connect(figmaComponentUrl, {
  props: {
    title: figma.string('title'),
    subtitle: figma.string('subtitle'),
    align: figma.enum('align', { Left: 'left', Center: 'center' }),
  },
  example: ({ title, subtitle, align }) =>
    `<Hero title="${title}" subtitle="${subtitle}" align="${align}" />`,
});

  4. 4. Werkstatt → Figma exportieren

    Designer baut in Werkstatt → speichert Konfig → kopiert ID. Im Figma-File: "Insert from Werkstatt" (mit MCP-Befehl). Komplette Seite mit echten Components als Frame-Hierarchie.

    Anders herum: Designer hat Figma-Frame, will Werkstatt-Konfig draus → Skill figma-implement-design.

  5. 5. Prüfen + Iterieren

    Light/Dark in der Werkstatt mit Mode-Picker. Mobile-Studio für Responsive. Code-Export fürs Frontend. Werkstatt-Link an alle.

Was du jetzt schon kannst (auch ohne MCP)

  • Werkstatt als Wireframe-Tool: Auch ohne Figma-Bridge — die Werkstatt nutzt echte Components, dein "Wireframe" ist sofort produktionsreif.
  • Token-Library exportieren: Manuell aus globals.css die Token-Werte in eine Figma-Variables-Collection eintragen — einmalig, dann nur Updates.
  • Code-Snippets als Style-Block: In Figma einen Code-Block pro Component anlegen, der den Astro-Snippet zeigt. Notfall-Lösung bevor Code-Connect steht.

Hinweise / Stolpersteine

  • Nicht jede Pixel-Detail synchronisierbar. Container Queries, Hover-States, Animationen leben im Code. Figma zeigt eine Variante, der Code beherrscht alle.
  • Code-Connect braucht Pflege. Bei jeder neuen Component-Variante muss das Mapping aktualisiert werden — sonst veraltet die Vorschau.
  • Tokens-Naming muss verbindlich sein. Wenn der Designer "Brand-Blue" sagt und der Code "--color-brand-primary" — schon driftet's. Glossar-Eintrag pflegen.
  • Lizenz-Kosten: Figma-Variables sind nur in Professional/Organization. Code-Connect ist Beta — prüfen ob im Plan enthalten.