Figma
Integrazione con Figma: accedi ai file di design, estrai componenti, leggi i token e converti i design in codice. Colma il divario tra design e sviluppo.
Il plugin Figma colma il divario tra design e sviluppo collegando Claude Code direttamente ai tuoi file Figma. Accedi al contesto di design, estrai informazioni sui componenti, recupera i design token e converti i design in codice pronto per la produzione con fedeltà pixel-perfect.
Le funzionalità principali includono: estrazione di dati di design strutturati (layout, tipografia, colori) dai frame Figma, recupero di variabili e design token, mappatura dei componenti Figma nel codebase esistente tramite Code Connect e acquisizione di riferimenti visivi per la validazione. Il plugin è compatibile sia con il server cloud di Figma sia con l'app desktop.
Come si usa: Condividi un URL Figma e chiedi a Claude di implementare il design. Usa /implement-design per convertire i frame Figma in codice usando il design system del progetto. Usa /create-design-system-rules per generare linee guida personalizzate che codificano le convenzioni di sviluppo del team. Usa /code-connect-components per definire le mappature tra i componenti Figma e le relative implementazioni nel codebase.
Esempi di prompt: "Implementa questo design Figma: [incolla l'URL Figma]", "Crea le regole del design system per il mio progetto React", "Collega il mio componente Button alla sua controparte in Figma", "Estrai le variabili colore da questo file di design".