Da Figma a codice: il supporto di MarkupGen per React, Vue e i framework CSS

Una delle decisioni più dispendiose in termini di tempo in qualsiasi passaggio di consegna del design non è se il design ha un bell'aspetto, ma su quale stack deve girare il codice generato. Un team React ha bisogno di JSX con props tipizzate, un team Vue ha bisogno di un vero Single File Component, e una landing page statica potrebbe non aver bisogno di alcun framework. MarkupGen non ti blocca su un unico stack di output per ogni progetto: il framework di output è una scelta per singolo export, sullo stesso design Figma di partenza.

Come funziona la conversione

Prima di arrivare alla scelta del framework, MarkupGen elabora il design in quattro passaggi:

1. Esporta la frame da Figma. Il plugin Figma di MarkupGen invia struttura, stili e immagini della frame selezionata direttamente nel tuo workspace — non uno screenshot da ricostruire a occhio.
2. L'IA costruisce HTML/CSS a partire dal design reale. Layout, spaziature, colori e Auto Layout vengono letti direttamente dal file Figma, non indovinati in modo generico.
3. Scegli il formato di output. È qui che scegli il framework: HTML/CSS puro, React, Vue, Svelte, Angular e, per il CSS nello specifico, Tailwind, Bootstrap, Bulma, Materialize o Pico.
4. Rifinisci, poi esporta. Regola contenuti, font e layout nell'editor visuale prima di scaricare il codice finale, con un punteggio di qualità AI automatico che ti dice se l'export è pronto.

Poiché struttura e stile vengono letti una sola volta dal design sorgente, puoi cambiare formato di output al passaggio 3 senza dover ricostruire il design da zero ogni volta.

Esportare in React

Scegli React e MarkupGen costruisce un componente funzionale con JSX, in TypeScript (TSX) oppure in JavaScript puro (JSX), a seconda di un interruttore al momento dell'export. Le props sono tipizzate, e gli stili possono essere esportati come CSS Modules invece che come stili inline, se ti serve uno scoping per singolo componente invece di un unico foglio di stile condiviso. L'Auto Layout di Figma viene mappato su Flexbox direttamente negli stili del componente, quindi ottieni un componente con una struttura responsive già integrata, non un blocco statico di HTML con delle props aggiunte sopra. Per uno sguardo più approfondito all'intero workflow, vedi Da Figma a React: un workflow pratico per sviluppatori.

Esportare in Vue

Scegli Vue e il risultato è un vero Single File Component di Vue 3 (.vue), che usa defineProps per dichiarare le props e mantiene la struttura <template>/<script>/<style> già seguita dalla maggior parte dei codebase Vue esistenti. Proprio come per React, il layout generato dall'Auto Layout di Figma mantiene la sua struttura Flexbox negli stili del componente, e puoi comunque impostare il nome del componente e alternare TypeScript e JavaScript puro dalla stessa schermata di export. Consulta la pagina di conversione da Figma a Vue per saperne di più su cosa include un export Vue.

Anche Svelte e Angular

Oltre a React e Vue, MarkupGen esporta anche Svelte (4/5) e Angular (17+, come componente standalone) — utile se il tuo team non usa uno dei due stack più diffusi ma vuole comunque un componente invece di HTML statico.

I framework CSS inclusi in ogni componente

Se non ti serve il componente di uno specifico framework JS, puoi esportare direttamente in HTML/CSS e scegliere un framework CSS nella configurazione del progetto: Vanilla CSS, Tailwind, Bootstrap, Bulma, Materialize o Pico. L'IA rimappa il layout sulla griglia, sulla spaziatura e sulle convenzioni di classe reali di quel framework, invece di limitarsi ad aggiungere una classe generica lasciando a te il compito di sistemarla. Per un'analisi dettagliata dei compromessi di tutti e sei — peso dell'output, fedeltà al design, curva di apprendimento — vedi I 6 framework CSS supportati da MarkupGen.

Cosa scegliere per il tuo progetto

• Lavori già dentro un codebase React o Vue esistente? Esporta direttamente in componenti React o Vue, abbinati a Tailwind o CSS Modules a seconda delle convenzioni del tuo team.
• Ti serve solo una pagina statica senza bundler? HTML/CSS puro o Pico — nessuna dipendenza a runtime.
• Ti serve un'interfaccia funzionante in fretta con componenti già pronti (navbar, modal, form)? Bootstrap o Materialize.
• Il tuo team usa Svelte o Angular? Entrambi vengono esportati come componenti veri e propri, non come qualcosa da convertire a mano partendo dall'HTML.

Non esiste un'unica risposta giusta per ogni progetto — il punto è che MarkupGen ti permette di scegliere il framework per ogni export, sullo stesso design sorgente, invece di legarti a un unico stack. Provalo gratis sul tuo file Figma per vedere il codice nello stack che stai effettivamente usando.