Figma è una piattaforma collaborativa per progettare interfacce digitali, creare prototipi e organizzare sistemi di design. Ma fermarsi a questa definizione oggi significa descriverne solo una parte.
Il punto interessante è come Figma collega fasi che per anni sono rimaste separate: struttura della pagina, UI, componenti, comportamento responsive, prototipazione, collaborazione con gli sviluppatori e, sempre più spesso, AI e codice. La stessa piattaforma comprende ormai prodotti e workflow differenti come Figma Design, Dev Mode, Figma Make, Figma Sites e Figma Motion. La documentazione ufficiale di Figma distingue chiaramente questi ambienti e il loro ruolo.
Se progetti siti web, quindi, Figma non serve semplicemente a creare “la grafica del sito”. Serve soprattutto a trasformare decisioni visive e funzionali in un sistema abbastanza coerente da poter essere discusso, testato e successivamente implementato.
Questa distinzione è importante anche per capire i suoi limiti: un progetto Figma può descrivere molto bene come dovrebbe funzionare un sito, ma non coincide automaticamente con il sito reale che arriverà in produzione.
Cos’è Figma e a cosa serve oggi
Figma nasce come strumento di interface design collaborativo e browser-based, ma oggi la definizione più utile è quella di workspace per la progettazione di prodotti digitali. Puoi usarlo per costruire schermate, componenti, prototipi, librerie condivise e specifiche per gli sviluppatori; attorno a questo nucleo si sono aggiunti strumenti dedicati ad AI, codice, pubblicazione web e motion design.
Questo spiega anche perché Figma compare sempre più spesso nel lavoro del web designer, del product designer e dello sviluppatore front-end. Non perché tutti debbano fare lo stesso mestiere, ma perché il file di progetto diventa un punto di incontro fra competenze differenti.
Da editor collaborativo a workspace per design, codice e AI
Il cambiamento più interessante riguarda la distanza fra ciò che viene disegnato e ciò che viene costruito.
Nel workflow tradizionale il designer preparava il mockup, lo consegnava allo sviluppatore e da quel momento iniziava una seconda interpretazione del progetto. Spaziature, stati dei componenti, responsive behaviour e dettagli di interazione potevano perdersi durante il passaggio.
Figma sta riducendo questa distanza su più livelli. Dev Mode rende leggibili misure, proprietà e componenti dal punto di vista dello sviluppo; Code Connect può collegare componenti di design alle controparti effettivamente presenti nella codebase; il server MCP permette ad agenti di coding compatibili di ricevere contesto strutturato dal progetto.
Le funzioni più recenti vanno ancora oltre. L’agent integrato può modificare direttamente i file Design, mentre Figma Make lavora sul passaggio da prompt o design esistente a prototipi funzionali e web app. I code layers in Figma Design puntano invece a portare codice eseguibile sul canvas, ma sono ancora in closed beta: vanno quindi considerati una direzione del prodotto, non una capacità disponibile indistintamente a tutti.
Figma Design, FigJam, Dev Mode, Make, Sites e Motion non fanno la stessa cosa
Uno degli errori più facili è parlare di “Figma” come se fosse ormai un solo editor.
Figma Design rimane il cuore del lavoro UI: qui costruisci frame, componenti, layout, prototipi e design system.
FigJam serve invece alla fase più esplorativa e collaborativa: mappe, flussi, brainstorming, workshop e organizzazione delle idee.
Dev Mode cambia il punto di vista sullo stesso progetto e porta in primo piano informazioni utili all’implementazione.
Figma Make usa un workflow conversazionale e AI-driven per creare prototipi funzionali, web app e interfacce interattive partendo da prompt o design esistenti.
Figma Sites porta il lavoro più vicino alla pubblicazione: consente di progettare e pubblicare siti responsive, usare componenti, interazioni e un CMS integrato. Il prodotto è ancora indicato da Figma come beta.
Figma Motion, anch’esso ancora in beta, aggiunge una timeline dedicata alle animazioni con keyframe e un handoff verso Dev Mode.
Capire questa separazione evita di aspettarsi che una singola funzione faccia tutto.
A chi serve davvero Figma
Figma ha senso soprattutto quando il progetto contiene interfacce, stati, componenti o decisioni che devono essere condivise.
Per un web designer significa poter passare dal wireframe alla UI senza cambiare completamente ambiente. Per un UX designer significa collegare i flussi all’interfaccia che li concretizza. Per lo sviluppatore significa ricevere più informazioni rispetto a una semplice immagine statica. Per il cliente o lo stakeholder significa poter commentare un progetto navigabile prima che ogni decisione venga trasformata in codice.
Nei progetti molto semplici non è obbligatorio introdurre tutta questa struttura. Una landing elementare può essere progettata anche con un workflow più leggero. Più aumentano componenti, pagine, varianti, persone coinvolte e necessità di mantenere coerenza, più il modello di Figma diventa utile.
Come funziona Figma: il modello mentale da capire prima dei comandi
Imparare dove si trovano i pulsanti richiede poco tempo. Capire come organizzare correttamente un progetto richiede qualcosa in più.
La logica di Figma diventa molto più chiara se smetti di pensare a una pagina web come a una tavola grafica statica e inizi a vederla come una gerarchia di contenitori, componenti e regole.
Frame, layer e canvas: come viene costruita un’interfaccia
Il canvas è lo spazio di lavoro. Al suo interno trovi frame e layer organizzati gerarchicamente.
Un frame può rappresentare una pagina, una sezione, una card, un menu o un componente più piccolo. I layer contenuti al suo interno possono essere testi, immagini, vettori, altri frame o istanze di componenti.
La gerarchia conta perché un’interfaccia web reale non è una fotografia. Un titolo appartiene a una sezione; la sezione appartiene alla pagina; il pulsante fa parte di un componente; quel componente può comparire in decine di punti.
Un file costruito senza questa logica può sembrare perfetto a una determinata larghezza e diventare difficile da modificare appena cambia il testo, viene aggiunto un elemento o bisogna progettare la variante mobile.
Qui comincia la differenza fra disegnare una schermata e progettare un’interfaccia.
Auto Layout: perché cambia il modo di progettare layout responsive
Auto Layout permette a un frame di organizzare automaticamente i propri elementi secondo un flusso verticale, orizzontale o a griglia. Spaziature, padding, allineamenti e comportamento dimensionale diventano proprietà del contenitore anziché correzioni manuali effettuate elemento per elemento. La guida ufficiale ad Auto Layout documenta questi comportamenti e i diversi flow disponibili.
Immagina una card con titolo, descrizione e pulsante. Se il testo della descrizione passa da due a quattro righe, in un layout costruito rigidamente potresti dover spostare manualmente ciò che viene dopo. Con Auto Layout, invece, la card può espandersi mantenendo automaticamente la distanza prevista fra gli elementi.
È un meccanismo che avvicina il modo di ragionare del designer a quello del browser: il contenuto modifica il layout.
Questo non significa che Auto Layout generi automaticamente un CSS perfetto o sostituisca le media query. Significa che il progetto smette di dipendere esclusivamente da coordinate fisse e inizia a descrivere relazioni più realistiche fra gli elementi.
Per chi passa poi allo sviluppo front-end, il collegamento concettuale con Flexbox è particolarmente utile. Figma sta lavorando esplicitamente per rendere alcune logiche di Auto Layout più vicine al comportamento di CSS Flexbox.
Componenti, varianti e variabili: dal singolo elemento al design system
Un componente trasforma un elemento ripetibile in una sorgente riutilizzabile.
Un pulsante, per esempio, non dovrebbe essere ricreato manualmente venti volte. Puoi costruire un componente principale e utilizzare le sue istanze nelle varie schermate.
Le varianti permettono poi di modellare stati o configurazioni: primary e secondary, default e hover, small e large. Le component properties consentono di controllare attributi come stato, colore o dimensione.
Le variabili aggiungono un ulteriore livello. Figma può gestire valori come colori, numeri, stringhe e booleani e farli cambiare in base al contesto o alla modalità. Questo consente, per esempio, di rappresentare temi light/dark oppure valori differenti fra contesti di utilizzo. La documentazione sulle variabili ne descrive il funzionamento.
Il vantaggio non è semplicemente risparmiare qualche clic. È spostare le decisioni dal singolo mockup al sistema.
Librerie e collaborazione: come si mantiene coerente un progetto condiviso
Quando componenti, stili e variabili diventano condivisi, Figma può funzionare come base di un design system.
Supponiamo che un progetto utilizzi lo stesso pulsante in trenta schermate. Se il pulsante è stato copiato e modificato manualmente trenta volte, ogni revisione diventa fragile. Se deriva da un componente condiviso, la modifica può essere controllata a livello di sistema.
Lo stesso principio vale per colori, tipografia, spaziature e pattern ricorrenti.
La collaborazione in tempo reale aggiunge poi un altro vantaggio: designer, sviluppatori e stakeholder possono discutere sulla stessa sorgente invece di scambiarsi versioni isolate di PDF, JPG e file locali.
Come usare Figma per progettare un sito web
Per progettare bene un sito in Figma conviene evitare l’errore di partire immediatamente dalla homepage in alta fedeltà.
Il workflow più solido va nella direzione opposta: prima struttura, poi gerarchia, poi sistema visivo, poi interazione.
Dal brief al wireframe: decidere struttura e gerarchia prima della grafica
Il wireframe serve a togliere rumore.
In questa fase non hai bisogno di decidere se il bottone sarà blu o verde. Devi capire cosa contiene la pagina, quale informazione viene prima, quali azioni sono disponibili e come le sezioni si collegano.
Una homepage per un’azienda di servizi potrebbe avere, per esempio, una proposta di valore iniziale, prove o elementi di fiducia, servizi principali, contenuti di approfondimento e una conversione finale. Il wireframe permette di discutere questa struttura senza confondere il problema con font, fotografie e dettagli estetici.
È anche il punto in cui il lavoro di web design incontra la user experience: la qualità dell’interfaccia non dipende solo da come appare, ma da cosa permette di capire e fare.
Dal wireframe alla UI: tipografia, colori, componenti e contenuti
Una volta stabilita la struttura, puoi passare alla UI ad alta fedeltà.
Qui entrano in gioco tipografia, palette, immagini, icone, bordi, spaziature e gerarchie visive. Ma la differenza rispetto a un semplice software grafico sta nel modo in cui queste scelte vengono organizzate.
Se utilizzi un colore principale in venti punti, quel colore dovrebbe appartenere a una logica condivisa. Se hai quattro stili di pulsante, deve essere chiaro perché esistono. Se una stessa card cambia leggermente fra due pagine, bisogna capire se si tratta di una variante oppure di un’incoerenza.
La stessa attenzione vale per la tipografia. Se stai scegliendo caratteri destinati al web, puoi approfondire il tema nella guida ai Google Fonts, ma in Figma il punto centrale è definire una gerarchia riutilizzabile anziché formattare ogni testo in isolamento.
Progettare layout che possano realmente adattarsi agli schermi
Disegnare desktop e mobile non significa creare due fotografie separate dello stesso sito.
Tra 1440 e 390 pixel esistono molte larghezze intermedie. Contenuti e componenti devono quindi avere regole abbastanza chiare da poter reagire quando lo spazio cambia.
Auto Layout, constraints, componenti e variabili aiutano a modellare questa elasticità. Non sostituiscono però il ragionamento progettuale.
Una hero con testo molto lungo potrebbe funzionare su desktop e diventare ingestibile su mobile. Una tabella a cinque colonne potrebbe richiedere una trasformazione strutturale e non un semplice ridimensionamento. Un menu desktop potrebbe diventare un drawer.
Il responsive design nasce quindi da due livelli: regole elastiche per ciò che può adattarsi e decisioni esplicite per ciò che deve cambiare struttura.
Creare un prototipo per verificare navigazione e interazioni
Un prototipo collega le schermate e simula una parte del comportamento dell’interfaccia. Figma consente di creare flow interattivi che rappresentano come l’utente può muoversi nel progetto.
È utile perché alcune decisioni sembrano corrette guardando schermate isolate e diventano deboli quando inizi a usarle.
Dove torna l’utente dopo aver completato un passaggio? È chiaro che un elemento è cliccabile? Un modal interrompe correttamente il flusso? Il percorso per raggiungere una funzione richiede troppi passaggi?
Il prototipo non deve simulare ogni dettaglio del prodotto reale. Deve essere abbastanza fedele da testare le decisioni che contano in quella fase.
Design system in Figma: perché componenti e variabili contano più dei singoli mockup
Il vero salto di qualità avviene quando smetti di considerare le schermate come risultato finale del design e inizi a considerarle come istanze di un sistema.
Una homepage può essere perfetta e il progetto complessivo comunque essere fragile. Basta aggiungere dieci pagine, un’area riservata o una nuova feature perché emergano incoerenze.
Riutilizzare componenti senza duplicare il lavoro
Un componente è utile quando rappresenta qualcosa che possiede una logica ripetibile.
Navbar, pulsanti, input, badge, card, accordion e modal sono esempi immediati, ma il principio può estendersi a sezioni più complesse.
La domanda da farsi non è “posso trasformarlo in componente?”, perché quasi tutto potrebbe diventarlo. La domanda migliore è: questa struttura deve mantenere una relazione coerente in più punti del prodotto?
Se la risposta è sì, centralizzarla riduce il rischio di divergenza.
Varianti e stati: progettare elementi che cambiano comportamento
Un bottone non è soltanto il suo stato normale. Può essere hover, pressed, disabled o loading.
Un campo input può essere vuoto, compilato, attivo, valido o in errore.
Se disegni ciascuno di questi stati come elemento indipendente, è facile perdere coerenza. Varianti e proprietà permettono di rappresentarli come configurazioni dello stesso componente.
Questo cambia anche la qualità dell’handoff: lo sviluppatore non riceve soltanto l’aspetto “ideale” dell’elemento, ma una descrizione più completa dei suoi stati.
Dal design system alla coerenza fra design e sviluppo
Qui emerge però un limite importante.
Avere un design system perfettamente organizzato in Figma non garantisce che il front-end utilizzi gli stessi componenti, gli stessi token o le stesse convenzioni.
Se il pulsante in Figma e il componente Button della codebase evolvono separatamente, dopo qualche mese puoi avere due fonti di verità.
È proprio questo problema che strumenti come Code Connect cercano di ridurre: la documentazione ufficiale di Code Connect lo definisce come ponte tra i componenti della codebase e quelli presenti nei file Figma.
La tecnologia aiuta, ma la condizione resta organizzativa: team di design e sviluppo devono decidere chi possiede cosa, come vengono versionati i componenti e come vengono gestite le modifiche.
Dal design al codice con Dev Mode
Dev Mode non trasforma automaticamente un mockup in un’applicazione pronta per la produzione. Il suo valore è più concreto: ridurre l’ambiguità nel passaggio fra designer e sviluppatore.
Cosa vede realmente uno sviluppatore in Dev Mode
Il developer può ispezionare componenti, distanze, proprietà e informazioni utili all’implementazione senza lavorare con lo stesso set di controlli usato dal designer.
Questo rende più semplice rispondere a domande come: qual è lo spacing previsto? Quale componente è stato utilizzato? Quali proprietà cambiano fra due varianti? Quale risorsa devo esportare?
La pagina prezzi corrente include l’ispezione avanzata in Dev Mode e il server MCP fra le funzioni del piano Professional.
Il guadagno reale è nell’information transfer. Se il progetto è organizzato male, però, Dev Mode non può inventare la logica che manca.
Code Connect, MCP e il collegamento fra componenti Figma e codebase
Il server MCP di Figma può fornire agli strumenti agentici compatibili informazioni strutturate su design, componenti, variabili e layout. Con Code Connect, questo contesto può essere arricchito collegando componenti del design ai componenti effettivi della codebase.
Per esempio, un agente di coding non deve necessariamente dedurre che un rettangolo con testo rappresenta un bottone generico. Può ricevere più contesto sul componente e sulla sua implementazione reale.
È una differenza sostanziale: passare pixel è diverso dal passare intenzione e struttura.
Il vantaggio aumenta quando il progetto Figma è ordinato e la codebase utilizza un sistema di componenti altrettanto coerente. Se entrambi i lati sono disorganizzati, collegarli non elimina il problema.
Code layers: cosa cambia e perché non equivalgono ancora a “Figma genera il sito”
I code layers introducono un’idea ancora più radicale: trattare il codice come un tipo di layer presente direttamente sul canvas.
Nella versione destinata a Figma Design, la documentazione corrente li indica ancora come closed beta. Figma descrive la possibilità di creare code layers, convertirli in design layers e partire anche da una codebase esistente.
È una direzione interessante perché designer e developer possono lavorare con materiali più vicini fra loro. Ma sarebbe un errore tradurla in “adesso Figma genera automaticamente siti production-ready”.
Un prodotto reale comprende molto più della rappresentazione visiva: logica applicativa, accessibilità, sicurezza, performance, dati, analytics, SEO, gestione dei contenuti, integrazioni, test, deployment e manutenzione.
Portare codice nel canvas riduce una distanza. Non elimina l’intero ciclo di sviluppo.
Dove finisce l’handoff e inizia lo sviluppo vero
Il confine cambia da progetto a progetto.
Per un sito vetrina semplice, il passaggio tra design e implementazione può essere relativamente lineare. Per un ecommerce, un portale o una web application, il file Figma rappresenta solo una parte del sistema.
Quando si entra nello sviluppo reale, possono entrare in gioco HTML, CSS, JavaScript, framework, API, database, CMS e strumenti di deployment. Se vuoi approfondire una parte di questo passaggio, puoi confrontare anche i framework CSS più usati nello sviluppo front-end.
La regola pratica è questa: Figma può specificare molto bene l’esperienza che vuoi costruire; la produzione deve comunque risolvere i vincoli del sistema che la renderà reale.
Figma AI e Figma Make: cosa può automatizzare davvero
L’AI sta cambiando Figma soprattutto perché entra nel contesto del progetto, invece di vivere esclusivamente in una finestra separata.
È una distinzione significativa. Generare una schermata generica da prompt è relativamente facile; intervenire su un file esistente rispettando componenti, stili e struttura è un problema diverso.
Il Figma agent dentro i file Design
L’agent di Figma Design lavora direttamente all’interno del file e può generare o modificare design, automatizzare attività ripetitive e fornire feedback. La feature è attualmente disponibile in open beta e Figma mantiene l’utente in controllo delle modifiche, che possono essere annullate.
L’utilità più interessante non è chiedergli “fammi una homepage moderna”.
È usarlo dentro un contesto già strutturato.
Se esistono componenti, stili, variabili e pattern coerenti, l’agent dispone di materiale più significativo con cui lavorare. Figma documenta anche workflow nei quali l’agent usa componenti, stili e variabili esistenti per supportare attività relative al design system.
Questo rafforza un principio che vale anche fuori da Figma: l’AI rende meglio quando riceve un sistema, non soltanto un prompt.
Figma Make: dal prompt a prototipi funzionali e web app
Figma Make è un ambiente AI-driven prompt-to-app. Può partire da un’idea o da un design esistente per realizzare prototipi funzionali, web app e UI interattive; il risultato può essere iterato tramite conversazione e il codice può essere modificato direttamente. La guida ufficiale a Figma Make ne descrive questo ruolo.
Per il web designer cambia soprattutto la velocità con cui un’idea può diventare qualcosa di interattivo.
Prima potevi costruire un prototipo che simulava un comportamento. Ora puoi spingerti verso prototipi funzionali che eseguono realmente più logica.
La differenza, però, non va nascosta: funzionale non significa necessariamente production-ready.
Un prototipo può essere perfetto per verificare un’idea e ancora richiedere revisione tecnica, sicurezza, accessibilità, gestione degli errori e ottimizzazione prima di diventare un prodotto reale.
AI e design system: perché il contesto conta più del prompt isolato
Qui Figma ha un vantaggio concettuale interessante.
Un design system contiene già molte decisioni: colori, componenti, stati, spacing, tipografia, pattern e regole di utilizzo. Sono informazioni molto più utili di un prompt generico come “crea una dashboard professionale”.
Anche i Make kits seguono questa logica: possono includere pacchetti npm, variabili e stili provenienti dalle librerie Figma e linee guida che aiutano Make a comprendere il sistema esistente.
Il valore potenziale dell’AI nel design non sta quindi solo nel generare più rapidamente. Sta nel generare dentro vincoli migliori.
È lo stesso principio che vale quando integri l’intelligenza artificiale nel web design: automatizzare un processo debole permette soprattutto di produrre più velocemente un risultato debole.
I limiti da conoscere prima di delegare il design all’AI
L’AI può proporre layout, varianti e soluzioni, ma non possiede automaticamente il contesto di business, le priorità dell’utente o tutti i vincoli tecnici del progetto.
Una homepage esteticamente convincente può avere una gerarchia sbagliata. Un form plausibile può chiedere dati inutili. Una dashboard ben disegnata può non coprire casi limite fondamentali.
Per questo il giudizio del designer si sposta, ma non scompare.
In alcuni task devi produrre meno manualmente e valutare di più: scegliere una direzione, scartare una soluzione, controllare la coerenza, individuare ciò che il modello non ha considerato e verificare che la proposta sia implementabile.
Figma Sites: dal progetto al sito pubblicato
Figma Sites riduce ulteriormente la distanza fra design e pubblicazione.
Secondo la documentazione ufficiale, permette di progettare, prototipare e pubblicare siti responsive usando strumenti familiari come frame, Auto Layout, componenti e design library. Include inoltre interazioni e un CMS per contenuti strutturati. Il prodotto è attualmente ancora in beta.
Come passa un design da Figma Design a Sites
Il workflow è deliberatamente vicino a quello del designer.
Puoi trasferire elementi fra Figma Design e Sites e continuare a utilizzare concetti come componenti, stili, variabili e Auto Layout. La differenza è che il risultato non rimane necessariamente un prototipo: Sites introduce il livello di pubblicazione.
Questo rende particolarmente interessante il prodotto per landing page, portfolio, micrositi e progetti nei quali il controllo visuale pesa più della complessità applicativa.
Responsive, CMS, interazioni e codice
Figma Sites non è soltanto un export di immagini.
Il CMS può gestire contenuti strutturati come articoli, case study o prodotti e collegarli al design. Un CMS page può usare un unico layout dinamico e popolarlo con elementi provenienti da una collection.
Sono disponibili anche code layers dedicati a Sites, utili per aggiungere funzionalità personalizzata tramite codice o AI. Questi code layers non vanno confusi con i code layers di Figma Design ancora in closed beta: si tratta di contesti differenti.
Quando Figma Sites può bastare e quando serve un CMS o uno sviluppo dedicato
La scelta dipende dal tipo di sistema che stai costruendo.
Per una landing, un portfolio o un sito visualmente ricco ma relativamente semplice, Sites può ridurre molto il numero di passaggi fra design e pubblicazione.
Quando invece il progetto richiede un ecosistema editoriale complesso, ecommerce, integrazioni avanzate, gestione utenti, logiche business specifiche o un’infrastruttura consolidata, ha più senso valutare un CMS o uno sviluppo dedicato.
Qui il confine fra “design” e “sito” torna importante.
Figma può portarti molto più vicino al risultato pubblicato rispetto al passato. Ma progettare un’interfaccia e fare realizzazione professionale di un sito web restano due attività che si sovrappongono solo in parte.
Figma Motion: animazioni e microinterazioni dentro il design system
Figma Motion aggiunge al canvas un ambiente dedicato al motion design con timeline, keyframe, easing e percorsi di movimento. È attualmente in open beta.
Timeline, keyframe e componenti animati
Un keyframe registra il valore di una proprietà in un determinato momento. Con almeno due keyframe puoi definire uno stato iniziale e uno finale, lasciando al sistema l’interpolazione fra i due.
Per un’interfaccia significa poter progettare con maggiore precisione microinterazioni, transizioni e comportamenti che prima venivano spesso descritti con prototipi semplificati o note separate.
Il vantaggio è soprattutto comunicativo: il movimento diventa parte più esplicita della specifica.
Dal movimento progettato al codice tramite Dev Mode
L’handoff è uno degli aspetti più interessanti.
Dev Mode può mostrare le informazioni dell’animazione e fornire output in formati come CSS, React e JSON; il server MCP può inoltre trasferire a un coding agent informazioni come keyframe, timing ed easing.
Anche qui non c’è una garanzia automatica che l’implementazione finale sia perfetta. Un’animazione web deve comunque essere verificata nel contesto reale, soprattutto per performance, accessibilità e comportamento sui diversi dispositivi.
Ma il passaggio da “questa cosa dovrebbe muoversi più o meno così” a una specifica molto più concreta è evidente.
Figma è gratis? Piani, postazioni e crediti AI
Sì, Figma dispone di un piano Starter gratuito. Per il lavoro professionale entrano però in gioco sia il piano sia il tipo di postazione assegnata all’utente.
La pagina ufficiale dei prezzi di Figma mostra attualmente i prezzi in dollari statunitensi anche nella versione italiana. I valori sono dati volatili e vanno quindi ricontrollati prima di un acquisto.
| Piano / postazione | Prezzo mostrato | Crediti AI inclusi |
|---|---|---|
| Starter | Gratis | fino a 500/mese, con limite giornaliero |
| Professional — Full | 16 USD/mese | 3.000/mese |
| Professional — Dev | 12 USD/mese | 500/mese |
| Professional — Collab | 3 USD/mese | 500/mese |
| Organization — Full | 55 USD/mese, fatturazione annuale | 3.500/mese |
| Enterprise — Full | 90 USD/mese, fatturazione annuale | 4.250/mese |
Cosa permette il piano Starter
Starter è sufficiente per iniziare a conoscere Figma e lavorare su progetti personali o limitati.
La pagina pricing include bozze illimitate, UI kit e template e una quota di crediti AI. Le differenze diventano più significative quando servono file e progetti di team, design library condivise, Dev Mode avanzato e workflow professionali.
Per imparare Figma, quindi, non è necessario iniziare immediatamente con un abbonamento.
Full, Dev e Collab: perché oggi conta anche il tipo di postazione
Le postazioni rispondono a workflow differenti.
La Full seat è quella destinata a chi deve utilizzare l’insieme più ampio degli strumenti. La Dev seat è focalizzata soprattutto sul lavoro dello sviluppatore e su Dev Mode. La Collab seat copre invece scenari collaborativi più limitati.
Questo modello è importante per i team: non tutte le persone che partecipano a un progetto hanno necessariamente bisogno dello stesso accesso.
Crediti AI e feature beta: cosa controllare prima di scegliere un piano
Le funzioni AI utilizzano un sistema di crediti. I crediti inclusi dipendono da piano e postazione, si azzerano periodicamente e alcune azioni consumano quantità differenti in base al tipo di funzione, al modello e alla complessità. La documentazione sui crediti AI mantiene la tabella corrente.
Le feature in beta meritano un controllo separato perché disponibilità, consumo dei crediti e requisiti possono cambiare durante il rollout.
Quindi non sceglierei un piano soltanto perché include “AI”. Prima guarderei quale funzione utilizzerai realmente, chi deve usarla e con quale frequenza.
Figma è adatto a tutti i progetti web?
No. Ed è proprio questa risposta a rendere più utile capire dove Figma porta un vantaggio reale.
Quando lo sceglierei per un sito, una web app o un’interfaccia
Lo sceglierei quando il progetto richiede iterazione visuale, collaborazione e un sistema coerente di componenti.
Più precisamente, Figma diventa molto utile quando devi progettare più pagine o stati, lavorare con breakpoint differenti, condividere componenti, testare flussi, raccogliere feedback e trasferire il progetto a chi lo implementerà.
In una web app, dove gli stati dell’interfaccia possono moltiplicarsi rapidamente, il valore del design system aumenta ancora.
Quando Figma non sostituisce WordPress, lo sviluppo front-end o un CMS
Figma non è WordPress e un file Design non gestisce automaticamente contenuti, plugin, database, autenticazione, SEO tecnica o infrastruttura.
Anche quando Figma Sites o Make consentono di arrivare a un risultato funzionante, il confronto va fatto sul progetto reale, non sull’impressione prodotta dal prototipo.
Un’azienda che deve pubblicare centinaia di contenuti, integrare CRM ed ecommerce o mantenere workflow editoriali complessi ha esigenze diverse da chi deve pubblicare una landing per una campagna.
Il tool viene dopo l’architettura.
Il rischio di confondere un prototipo convincente con un prodotto production-ready
Questo è probabilmente il limite più importante da ricordare.
Un prototipo molto realistico può dare la sensazione che il lavoro sia quasi terminato. Ma una rappresentazione credibile non dimostra che siano stati risolti accessibilità, performance, compatibilità, dati, sicurezza, validazione degli input, SEO o gestione degli errori.
Con AI e code generation questa distanza può ridursi, ma non scompare.
La domanda corretta non è quindi: “Figma può generare qualcosa che funziona?”.
È: “Questo risultato soddisfa i requisiti che deve rispettare il prodotto quando verrà utilizzato davvero?”
Un workflow Figma efficace per passare dall’idea al sito
Il modo migliore di usare Figma per un progetto web è trattarlo come parte di un processo, non come il punto di partenza obbligatorio di ogni decisione.
| Fase | Cosa definire | Output utile |
|---|---|---|
| Brief e architettura | obiettivi, pubblico, contenuti, pagine, conversioni | struttura del progetto |
| Wireframe e flussi | gerarchia, navigazione, task principali | scheletro delle schermate |
| UI e design system | tipografia, colori, componenti, varianti, spacing | interfaccia coerente |
| Responsive | comportamento dei componenti e cambi strutturali | layout adattivi |
| Prototipo | navigazione, stati, interazioni | esperienza testabile |
| Handoff | componenti, specifiche, asset, logica | indicazioni per lo sviluppo |
| Implementazione | codice, CMS, dati, integrazioni | sito reale |
| Verifica | responsive, accessibilità, performance, SEO, QA | prodotto pronto alla pubblicazione |
Il passaggio più importante è quello fra le righe.
Brief e wireframe evitano di perfezionare una soluzione sbagliata. Il design system impedisce che ogni nuova pagina diventi un caso isolato. Il prototipo verifica ciò che una schermata statica non può mostrare. L’handoff riduce le ambiguità. Lo sviluppo traduce infine le decisioni nel sistema reale.
Figma funziona meglio quando mantiene continuità fra queste fasi, non quando viene usato semplicemente per produrre una bella homepage.
Conclusione
Figma resta uno strumento di progettazione, ma il suo perimetro è diventato molto più ampio.
Auto Layout, componenti e variabili permettono di costruire interfacce come sistemi anziché collezioni di schermate. Dev Mode, Code Connect e MCP riducono la distanza con lo sviluppo. Agent e Make introducono l’AI direttamente nel workflow. Sites porta una parte dei progetti fino alla pubblicazione e Motion rende più esplicito il passaggio fra movimento progettato e implementazione.
Il risultato non è però che “Figma fa tutto”.
Il vantaggio reale è mantenere più continuità fra idea, design, comportamento e implementazione. Più il progetto ha bisogno di questa continuità, più Figma diventa utile.
Per un portfolio o una landing potresti arrivare molto vicino alla pubblicazione restando nell’ecosistema Figma. Per un sito aziendale strutturato, un ecommerce o una web application, il lavoro di design rimane invece una parte di un sistema più grande.
La scelta giusta, quindi, non è partire dal software. È capire quanto è complesso il prodotto che devi progettare, quante persone devono collaborare e quanto è importante mantenere allineati design e sviluppo. Figma ha senso quando ti aiuta a governare meglio queste relazioni.