Consegna agli sviluppatori
Export di codice e Dev Mode
Clicca su qualsiasi elemento e copia codice pronto all'uso in sette formati — CSS, React, Tailwind, SwiftUI, UIKit, Jetpack Compose e Android XML — direttamente dal design che il tuo team già modifica.
- Sette formati di codice, a un clic in Dev Mode
- Ispeziona spaziature, colori e tipografia esatti su qualsiasi elemento
- Esporta PNG, JPEG, SVG e PDF — ZIP in blocco incluso
Ogni superficie di consegna in un solo posto
- CSS
- React
- Tailwind
- SwiftUI
- UIKit
- Jetpack Compose
- Android XML
- Ispezione di spaziatura e tipografia
- Variabili con modalità
- Annotazioni Ready-for-Dev
- Export PNG / JPEG / SVG / PDF
- Export in blocco come ZIP
- 7
- formati di codice in Dev Mode: CSS, React, Tailwind, SwiftUI, UIKit, Compose, Android XML
- 4
- formati di asset in uscita dall'editor: PNG, JPEG, SVG e PDF
- 0
- redline o documenti di specifica da scrivere — il design stesso è la specifica
- $12
- per postazione editor su Professional sblocca Dev Mode per tutto il team
Una settimana di consegna con Dev Mode
Lunedì — arriva il design
Un designer segna i frame finiti come Ready-for-Dev. Non si scrive nessun documento di specifica separato, perché il file stesso sta per diventare la specifica.
Martedì — gli ingegneri ispezionano
Gli sviluppatori aprono Dev Mode, cliccano tra gli elementi e leggono spaziature, stili di testo e valori delle variabili esatti. Nessuno misura uno screenshot col righello.
Metà settimana — il codice scorre
Ogni componente viene copiato nel formato del team: Tailwind per la web app, SwiftUI e Compose per la coppia mobile — tutti generati dallo stesso design.
Venerdì — asset e automazione
Icone e immagini si esportano come SVG e PNG in un unico ZIP in blocco. Lo strumento a riga di comando copre gli export via script, e MCP consente agli agenti AI di generare codice dallo stesso file.
Il design è la specifica
La consegna tradizionale è una traduzione con perdite: un designer appiattisce l'intento in screenshot, uno sviluppatore fa reverse engineering degli screenshot in numeri, e ogni passaggio aggiunge un margine di errore. Tuvi genera il codice dal design stesso — gli stessi padding, colori, stili di testo e variabili impostati dal designer — così ciò che l'ingegneria riceve sono dati, non interpretazione. I frame in auto-layout arrivano come il flexbox che già sono nel comportamento; le variabili con modalità restano design token invece di collassare in valori fissati nel codice.
L'inquadramento onesto: il codice generato è un punto di partenza fedele, non una funzionalità finita. Elimina il lavoro di trascrizione — le misurazioni, la ridigitazione, il tira e molla su «è 12 o 16» — e lascia agli ingegneri la vera ingegneria: collegare stato, comportamento e convenzioni. È esattamente questa divisione a renderlo affidabile per i team.
Una consegna che va oltre l'editor
Dev Mode è la superficie interattiva, ma la consegna non si ferma a un clic del mouse: uno strumento a riga di comando esporta i render per documentazione e CI, e l'integrazione MCP consente a un assistente AI di coding di chiedere codice vero al design vero — così un agente che implementa una schermata lavora dalla stessa fonte di verità che i vostri designer modificano.
Attorno al codice c'è il flusso di lavoro: le annotazioni Ready-for-Dev segnano la stabilità, i commenti portano il contesto che i numeri non possono dare, e la cronologia delle versioni risponde a «cosa è cambiato da quando l'ho costruito». La consegna smette di essere una riunione settimanale e diventa una proprietà del file.
Domande frequenti
Il codice generato è pronto per la produzione?
È fedele: padding, colori, stili di testo e variabili reali, con l'auto-layout espresso come flexbox. Lo integri comunque nei tuoi componenti, nel naming e nella gestione dello stato — Dev Mode elimina il lavoro di trascrizione, non l'ingegneria.
Quali piani includono Dev Mode?
Dev Mode e la generazione di codice arrivano con Professional e Organization. L'export degli asset — PNG, JPEG, SVG, PDF e ZIP in blocco — è disponibile dall'editor su ogni piano.
Gli sviluppatori devono saper usare uno strumento di design?
No. Uno sviluppatore apre il file condiviso nel browser, clicca sull'elemento che sta costruendo e legge i valori esatti o copia il codice nel suo formato. Nessun software extra, nessuna licenza Figma — e visualizzare i design è gratuito su ogni piano.
Gli strumenti AI possono guidare la generazione di codice?
Sì. Tramite MCP, un assistente AI può leggere la struttura del design e le proprietà degli elementi, generare codice da qualsiasi elemento e renderizzare un'anteprima PNG per verificare il proprio lavoro — tutto dallo stesso file che il tuo team modifica.
Come segnalano i designer cosa è pronto da costruire?
Con le annotazioni Ready-for-Dev sui frame, sostenute dai commenti nel contesto. Gli ingegneri vedono un contratto esplicito, frame per frame, invece di indovinare quali parti di un file in lavorazione sono stabili.