Dev Mode
Pensato per gli sviluppatori, Dev Mode offre la possibilità di ispezionare facilmente i progetti e tradurli in codice, senza modificare il file di progettazione. Dev Mode è incluso nelle postazioni Full e Dev di tutti i piani a pagamento.
La scelta dei team di
Genera un codice migliore utilizzando il contesto di Figma
Trasforma i progetti Figma in codice accurato con il server MCP di Figma. Porta il contesto di Figma direttamente negli strumenti di codifica agentica, come VS Code, Cursor, Windsurf e Claude, per un flusso di lavoro più efficiente.
Trova le informazioni di cui hai bisogno per iniziare a sviluppare più velocemente
Con funzionalità progettate per semplificare l'ispezione del codice e mettere in evidenza ciò che è pronto per lo sviluppo, il tuo flusso di lavoro sarà più fluido che mai.
Confronta le modifiche al design
Scopri quando è avvenuta l'ultima modifica a una particolare cornice o componente, oppure apri la cronologia delle versioni per confrontare le modifiche al design sfruttando la visualizzazione in parallelo.
Immergiti nelle specifiche del design
Ispeziona le proprietà dei componenti, come i codici colore e i valori dei token, controlla la spaziatura e copia e incolla il codice per velocizzare il processo di sviluppo.
Cambia la modalità di visualizzazione e fai chiarezza
Clicca sulla vista Ready for Dev per visualizzare i progetti contrassegnati come ready for dev. La vista Focus invece ti consente di fare clic su componenti specifici per isolarli.
Crea con l'estensione VS Code
Lavora in un ambiente che già conosci e ami con l'estensione VS Code: meno cambi di schermata e più programmazione.
Dev Mode di Figma rende la collaborazione più fluida tra sviluppatori e designer, riducendo l'attrito tra i due. E e noi lo adoriamo
Sandra Schaus
Lead UX Expert, Business Development Services, Volkswagen Group Services
Collega il sistema di progettazione e la base di codice per accrescere la coerenza
Dev Mode ti offre la possibilità di creare design coerenti e riutilizzabili e di collegarli facilmente alla base di codice utilizzando Code Connect.
Collega la base di codice con Code Connect
Code Connect consente di generare istantaneamente frammenti pronti all'uso, collegando la base di codice con il sistema di progettazione esistente in Figma.
Visualizza tutte le opzioni dei componenti
Il playground Component ti permette di visualizzare tutte le possibili varianti dei componenti, di osservarne il comportamento e di ottenere il codice pronto per l'implementazione. Tutto ciò che dovrai fare sarà scegliere l'opzione migliore.
Accedi alle variabili di progettazione a livello di sistema
Rimani sempre in linea con il marchio e risparmia tempo, utilizzando le variabili esistenti o i valori token con le sintassi di codice corrispondenti in Figma. In questo modo, mantenere la coerenza tra le applicazioni sarà molto più semplice.
Quello che amiamo di Code Connect è che riduce drasticamente il passaggio continuo da un contesto all'altro che prima era inevitabile per gli sviluppatori.
Gilson Hoffmeister
Design Systems Strategist, HP
Semplifica il passaggio da una fase all'altra per i tuoi partner della progettazione
Funzioni come gli aggiornamenti di stato, i commenti e le annotazioni ti consentono di essere sempre in sincronia con i designer, per tutta la durata dello sviluppo.
Riduci il lavoro ripetitivo migliorando la comunicazione
Ricevi notifiche in tempo reale sulle modifiche al design, per assicurarti di non lavorare mai basandoti su informazioni non aggiornate. La Ready for Dev View ti offre un riepilogo chiaro di ciò che è pronto per essere sviluppato, di ciò che è stato modificato e di ciò che è stato completato.
Codifica con il giusto contesto
Esamina le annotazioni e i commenti dei designer per capire chiaramente cosa sviluppare.
Controlla le misure
I designer possono aggiungere delle misure per aiutarti a visualizzare rapidamente spazi e dimensioni, in modo da non tralasciare nulla nel passaggio dal progetto al codice.
Scopri altre risorse su progettazione e sviluppo
Tutto quello che c'è da sapere su Dev Mode
Abbiamo sviluppato Dev Mode per rendere più efficiente lo sviluppo del prodotto, dall'idea al codice. Scopri la nostra filosofia del prodotto e le prossime novità.
Le 5 cose che i designer devono sapere per un passaggio di consegne senza intoppi
Il passaggio di consegne è un processo, non un momento. Quindi, come si può semplificare il passaggio di consegne quando è in corso un flusso continuo di progetti, comunicazioni e interazioni? Lauren Andres, Designer Advocate, condivide i suoi consigli.
Scopri i plugin della community pensati per gli sviluppatori
Esplora migliaia di plugin creati dalla community per lavorare in Figma in modi sempre nuovi.