Figma

Integrazione Figma: accedi ai file di progettazione, estrai componenti, leggi i token, traduci in codice. Colma il divario tra progettazione e sviluppo.

Play video

Il plugin Figma colma il divario tra progettazione e sviluppo collegando Claude Code direttamente ai file di progettazione Figma. Accedi al contesto di design, estrai informazioni sui componenti, recupera i token e traduci i progetti in codice pronto per la produzione con una fedeltà a livello di pixel.

Le funzionalità principali includono l'estrazione di dati di progettazione strutturati (layout, tipografia, colori) dai frame di Figma, il recupero di variabili e token di progettazione, la mappatura dei componenti di Figma alla codebase esistente tramite Code Connect e l'acquisizione di riferimenti visivi per la convalida. Il plugin è compatibile sia con il server cloud di Figma che con l'app desktop.

Come funziona: condividi un URL Figma e chiedi a Claude di implementare il design. Utilizza /implement-design per tradurre i frame Figma in codice utilizzando il sistema di progettazione del tuo progetto. Utilizza /create-design-system-rules per generare linee guida personalizzate che codificano le convenzioni di sviluppo del tuo team. Utilizza /code-connect-components per stabilire mappature tra i componenti di Figma e le implementazioni della codebase.

Prompt di esempio: "Implementa questo design Figma: [incolla URL Figma]", "Crea regole del design system per il mio progetto React", "Collega il mio componente Button alla sua controparte Figma", "Estrai le variabili di colore da questo file di progettazione".