Figma Make: dal design al prototipo, con i limiti da conoscere

Figma Make dà il meglio quando l'idea di prodotto parte già da un frame o da un design system in Figma. Può creare app web funzionanti e offre due opzioni di backend documentate, ma la scelta del backend determina anche la possibilità di proseguire il lavoro tramite GitHub. È adatto a validare un'esperienza già progettata; prima di affidargli dati dei clienti, però, occorre definire come proseguirà lo sviluppo.

Funzionalità pubbliche e dotazioni di crediti AI verificate il 15 ottobre 2026. Questa recensione esamina la documentazione del prodotto disponibile al pubblico, la continuità del flusso di lavoro e i vincoli del passaggio allo sviluppo. La guida propone un esempio da seguire: non descrive una prova svolta con accesso al prodotto né riporta misurazioni della qualità dei risultati.

Che cos'è Figma Make?

Figma Make trasforma prompt e riferimenti di design in un'interfaccia basata su codice modificabile. Permette quindi di provare una ricerca, compilare un modulo o percorrere un flusso di prodotto, andando oltre la semplice osservazione di un mockup statico. Può anche pubblicare app web e collegarle a dati salvati. Figma Design resta l'ambiente in cui progettare le interfacce; Figma Sites è uno strumento distinto per creare siti. Make serve invece a descrivere come deve comportarsi il design e a generare quel comportamento. Il punto di partenza è Figma Make; la guida alla creazione documenta il percorso dal prompt all'anteprima.

A chi serve Figma Make e quando conviene scegliere un'alternativa?

Figma Make è particolarmente adatto a designer e product manager che partono da un'interfaccia approvata, componenti condivisi e colleghi già abituati a rivedere il lavoro in Figma. Anche chi fonda una startup con un'idea ancora abbozzata può usarlo, ma partire da un prompt senza riferimenti significa rinunciare a buona parte di questo vantaggio.

Il confronto seguente si concentra su materiale di partenza, persona che proseguirà il lavoro e percorso di pubblicazione. Valuta il flusso di lavoro, senza stilare una classifica dell'estetica dei primi risultati generati.

Le differenze relative a backend e codice sono documentate nella guida ai backend di Figma, in Lovable Cloud, nella guida full-stack di v0 e in Claude Design.

Lovable: quando l'app viene prima del file di design

Lovable è uno strumento per creare app con hosting gestito, database, autenticazione e archiviazione. Merita di essere valutato da chi parte da un'esigenza come «i clienti devono inviare richieste e il personale deve gestirle». La sua integrazione con GitHub permette di ricevere le modifiche dal branch attivo del repository: un aspetto rilevante quando uno sviluppatore entra nel progetto.

Il compromesso riguarda la responsabilità della gestione operativa. Secondo la documentazione Cloud di Lovable, il passaggio a una propria istanza Supabase richiede l'esportazione dei dati e la ricostruzione dello schema in un nuovo progetto. Sceglierlo ha senso se questa configurazione gestita è adatta al lancio; va poi deciso chi si occuperà di un'eventuale migrazione.

v0 by Vercel: quando il lavoro prosegue nel codice

v0 by Vercel crea applicazioni full-stack e usa Next.js come impostazione predefinita: un framework web che combina il codice dell'interfaccia con le funzionalità lato server. La documentazione tratta endpoint di backend e connessioni ai database. Inoltre, importa il contesto da Figma: poter partire da un design Figma non è quindi un vantaggio esclusivo di Make.

v0 è da preferire quando uno sviluppatore si occuperà della manutenzione dell'applicazione e vuole partire da quel framework. Non è invece la scelta predefinita se l'obiettivo immediato è una revisione del design e nessuno è pronto a prendersi carico del codice. La differenza sta in ciò che accade dopo l'approvazione dell'anteprima.

Claude Design: quando l'esplorazione va oltre l'interfaccia di prodotto

Claude Design crea mockup e altri elaborati visivi, può ricavare il contesto del design system da codice e file di design e si collega a Claude Code. La pagina attuale del prodotto documenta anche l'esportazione in PDF, PowerPoint e HTML. Questa varietà è utile a chi ha bisogno sia di un prototipo sia dei materiali per presentarlo.

È una scelta indicata quando il brief creativo nasce da una conversazione e il lavoro successivo prosegue in Claude o su un contenuto esportato. Per un team che rivede abitualmente frame Figma già esistenti, Make offre un contesto di partenza più diretto. La sola esportazione HTML non risolve il problema di chi gestirà account, dati e pubblicazione.

Per ampliare il confronto, consulta la nostra selezione di strumenti AI per il design.

Come usare Figma Make

Figma Make è più utile quando il primo prompt descrive un'interazione ben delimitata. Con «crea la mia startup» si lascia al modello il compito di inventare sia il prodotto sia la sua interfaccia. Un flusso di prenotazione già progettato offre invece qualcosa di concreto da approvare o correggere.

Tutorial Figma Make: da un frame di prenotazione a un prototipo

Prendiamo un brief di esempio: un visitatore sceglie un servizio, seleziona un appuntamento disponibile e invia una richiesta. Si parte con contenuti dimostrativi e senza account cliente. Prima di decidere come salvare le prenotazioni, occorre capire se il flusso risulta comprensibile.

1. 1

   Prepara il frame

   Seleziona il frame di Figma Design con l'interfaccia di prenotazione. Inserisci etichette chiare sui pulsanti e gli stati selezionato, non disponibile e di errore che il prototipo dovrà mostrare. Copia il frame stesso. Quando il modello ha bisogno di un contesto di design preciso, Figma raccomanda frame strutturati anziché screenshot.

2. 2

   Crea il file Make e allega il riferimento

   Nel browser dei file, apri Drafts e fai clic su Make. Incolla il frame copiato nel prompt. In alternativa, usa Add context per allegare un link al design o al frame tramite la finestra degli allegati. Usa il frame effettivo come contesto, senza affidarti a un semplice URL nella conversazione.

3. 3

   Descrivi il comportamento e i suoi limiti

   Chiedi a Make di mantenere il design allegato, permettere al visitatore di scegliere un servizio e un appuntamento disponibile, validare i campi obbligatori e mostrare una conferma. Specifica che questa prima versione deve usare dati dimostrativi e nessun backend. Fai clic su Send per generare l'anteprima.

4. 4

   Prova i percorsi che possono fallire

   Prova a inviare il modulo senza compilare un campo obbligatorio, a selezionare un appuntamento non disponibile, a cambiare servizio dopo aver scelto un orario e a tornare indietro dalla conferma. Valuta se l'interfaccia spiega che cosa è successo. Un pulsante che risponde serve solo se risponde nel modo corretto.

5. 5

   Correggi solo la parte in cui emerge il problema

   In un nuovo file Make, usa Edit per selezionare un elemento, modificarne le proprietà e fare clic su Apply, oppure annota un difetto specifico. Separa la correzione di un comportamento da una riprogettazione visiva generale, così da poter verificare se il problema individuato è stato risolto.

Questi comandi seguono le istruzioni di creazione, la guida agli allegati e la guida alle modifiche di Figma. I file Make meno recenti possono conservare la precedente interfaccia di modifica.

Esempi di prompt per lo stesso progetto in Figma Make

Prompt iniziale: «Usa il frame di prenotazione allegato come riferimento visivo. Crea il flusso con cui il visitatore sceglie un servizio e un appuntamento disponibile, inserisce i recapiti obbligatori e visualizza la conferma. Usa contenuti dimostrativi fittizi. Mantieni la gerarchia del frame e lo stile dei componenti. Per ora non collegare un backend. Spiega che cosa è simulato».

Prompt di correzione: «Quando cambia il servizio selezionato, azzera la selezione dell'appuntamento precedente e richiedi una nuova scelta. Mantieni il layout e lo stile visivo. Mostra una spiegazione accanto al controllo per la scelta dell'appuntamento».

Questa è una specifica del comportamento prima e dopo la correzione, non il resoconto di un risultato generato. Se la prima versione mantiene un appuntamento incompatibile dopo il cambio di servizio, la correzione interviene su un errore nella gestione dello stato: l'applicazione deve aggiornare ciò che tiene in memoria quando cambia una scelta precedente.

Anche i criteri di qualità sono concreti. Controlla gli a capo del testo, il focus da tastiera, gli stati non disponibili, i nomi lunghi dei servizi e il layout su schermi stretti. Uno screenshot gradevole non dimostra nulla di tutto questo. Il prototipo è utile quando chi lo esamina riesce a completare l'attività e a capire perché un'azione è bloccata.

Figma Make e design system: non basta mantenere i colori

Figma Make diventa più utile quando lavora sui componenti e sulle regole del design system, anziché limitarsi a imitare una schermata finita. Un design token è un valore dotato di un nome, per esempio un colore o una spaziatura; un componente è un elemento riutilizzabile dell'interfaccia con un comportamento definito. Riprodurre un token non significa automaticamente usare il componente giusto.

I kit di Figma Make

I kit di Figma Make possono riunire pacchetti npm, stili e variabili di librerie pubblicate e linee guida scritte. Un pacchetto npm distribuisce codice riutilizzabile: un kit può quindi fornire sia riferimenti visivi sia indicazioni per l'implementazione. Il percorso documentato è Settings → Create a kit → Assemble your kit; si aggiungono poi le risorse, si scrivono le linee guida, si esegue una prova e si pubblica il kit per i colleghi. I kit richiedono una licenza Full su un piano a pagamento. Guida ai kit di Figma Make

Nell'area del prompt dell'app, fai clic su Select a Make kit e scegli il kit pubblicato prima di generare il flusso. Per l'esempio di prenotazione, includi i componenti approvati per pulsanti, campi di input e selezione degli appuntamenti, se disponibili. Spiega poi quando usarli: il pulsante principale invia una richiesta valida; gli appuntamenti non disponibili restano riconoscibili ma non selezionabili; i messaggi di validazione rimangono accanto al campo da correggere.

Queste regole contano più di un generico «rispetta il brand». Un rettangolo viola generato può somigliare al pulsante principale senza riprodurne lo stato disabilitato, l'indicatore di focus o l'etichetta accessibile. Verifica l'uso dei componenti e il significato delle interazioni, oltre alla somiglianza del colore di accento.

Serve un lavoro di preparazione. I requisiti dei pacchetti di Figma specificano che il pacchetto deve funzionare nell'ambiente di build senza dipendere dalla presenza del resto del workspace. Se i componenti dipendono da moduli privati distribuiti in un repository più ampio, affida la preparazione del pacchetto a uno sviluppatore.

Estrarre una libreria non significa conservarne integralmente i token. Secondo la guida ai kit di Make, viene estratto un sottoinsieme di variabili in CSS semplificato con valori diretti; la sintassi esatta delle variabili non viene mantenuta. Documenta nelle linee guida le regole degli stati e controlla gli stili generati prima di dare per scontato che il prototipo riproduca integralmente il design system.

I template di Figma Make

I template di Figma Make sono adatti a esperienze da usare più volte come punto di partenza, mentre un kit fornisce il contesto riutilizzabile del design system. Crea una base per le prenotazioni, sottoponila a revisione e consenti ai colleghi di ricavarne varianti. Figma documenta i template insieme alle altre opzioni di condivisione e riutilizzo.

Usa le linee guida per le regole permanenti del progetto e le skill personalizzate per una revisione ripetibile da avviare esplicitamente. Per i team con un design system consolidato, il nostro pacchetto di skill personalizzate per i design system in Figma Make offre una struttura di partenza. Adatta le istruzioni ai tuoi token e componenti: la revisione richiede comunque una decisione umana.

Creare un'app web che conservi i dati delle interazioni

Figma Make documenta ora il supporto a Payload, un backend applicativo con sistema di gestione dei contenuti, e a Supabase, un servizio di database e backend. Il backend conserva le informazioni ed esegue operazioni dietro l'interfaccia visibile. È ciò che distingue una semplice conferma di prenotazione mostrata a schermo da una richiesta che il personale può recuperare dopo che il visitatore ha chiuso il browser.

Con Payload si descrive l'app, si conferma la creazione del backend e si gestiscono i record dalla scheda CMS, la schermata dedicata ai contenuti. Figma ospita app e dati. Supabase va collegato separatamente da Make settings → Integrations → Supabase; la sua configurazione in Make usa archivi chiave-valore, ossia semplici voci salvate, invece di creare uno schema completo di database con tabelle collegate. Documentazione dei backend di Figma

Prosegui lo stesso progetto con questo prompt: «Aggiungi un backend Payload per i servizi e le richieste di appuntamento. I visitatori possono inviare richieste; il personale può gestirle. Separa le informazioni pubbliche sui servizi dai recapiti privati. Spiega le regole di accesso prima di implementarle».

Esamina quindi una richiesta salvata dalla vista di amministrazione. Ricarica l'interfaccia del visitatore e verifica che legga i dati salvati previsti. Controlla se un visitatore non autenticato può accedere a record riservati al personale. Si tratta di verifiche di accettazione per la tua implementazione, non di garanzie che il risultato generato le abbia già superate.

Richiedere un appuntamento e garantire una prenotazione sono due prodotti diversi. Una richiesta può restare in attesa dell'approvazione del personale. Una prenotazione richiede regole per invii in conflitto, cancellazioni e variazioni di disponibilità. Se l'attività deve garantire una fascia oraria, coinvolgi uno sviluppatore prima di considerare concluso il flusso.

Il vantaggio pratico è poter validare insieme l'interfaccia e la gestione dei record. Il limite riguarda le responsabilità: qualcuno deve decidere il modello dei dati, i permessi e la procedura di ripristino. Una schermata di amministrazione generata non prende queste decisioni aziendali al tuo posto.

Pubblicare l'app e decidere chi se ne occuperà

Figma Make può pubblicare direttamente: non è necessario passare da Figma Sites. In Make, fai clic su Publish, imposta il titolo e pubblica l'app. Viene fornito un URL dedicato ed è possibile configurare un dominio personalizzato. Le modifiche successive richiedono l'aggiornamento della versione pubblicata. Guida alla pubblicazione con Make

Per il prototipo di prenotazione, decidi se il pubblico sarà composto da persone incaricate della revisione o da potenziali clienti. Chi lo rivede ha bisogno di sapere con chiarezza quali comportamenti sono simulati. I clienti hanno bisogno di un servizio completo: una conferma chiara, un modo per correggere gli errori e qualcuno che risponda alle richieste inviate. Esegui la revisione finale sull'URL pubblicato, così da verificare ciò che vedranno i visitatori.

Quando conviene pubblicare con Figma Sites

Figma Sites è adatto a un sito di marketing gestito tramite un editor visuale. Il percorso documentato consiste nel copiare un frame di Figma Design in un breakpoint di Sites, adattare i layout responsive e pubblicare. Un breakpoint è un layout predisposto per uno specifico intervallo di larghezze della finestra di visualizzazione. Questo percorso è utile quando il lavoro principale consiste nell'organizzare e aggiornare le pagine. Trasferire i design in Figma Sites

Usa Make per l'interazione di prenotazione e valuta Sites per il sito di marketing che la accompagna, se questo modello di modifica è adatto a chi lo gestirà. Non dare per scontato che i prodotti consentano le stesse modalità di uscita dalla piattaforma: la documentazione sulla pubblicazione con Sites di Figma precisa che al momento il codice del sito non può essere esportato per pubblicarlo altrove.

Che cosa consegnare al team di sviluppo

L'editor di codice di Figma Make permette il download di un file ZIP. L'attuale documentazione del flusso Git descrive anche la clonazione di un repository GitHub autorizzato, il lavoro nei branch e la creazione di una pull request. Una pull request permette al team di sviluppo di rivedere le modifiche prima che entrino nell'applicazione condivisa. Sono percorsi di partenza distinti, con requisiti diversi.

Insieme al codice, consegna una descrizione del comportamento previsto, delle funzionalità simulate note, delle responsabilità sui dati, delle regole di accesso e dei difetti ancora aperti. Per il flusso di prenotazione, specifica se un appuntamento rappresenta una richiesta o una prenotazione confermata. Altrimenti il team di sviluppo rischia di ereditare un'implementazione ben rifinita della regola aziendale sbagliata.

I crediti AI di Figma Make

Per lavorare in team su un design system, scegli una licenza Full del piano Professional: include 3,000 crediti AI/mese, contro i 500/mese di Starter, con un limite di 150/giorno. Make attinge alla dotazione AI condivisa con consumi variabili in base a modello, attività e contesto; i crediti della licenza si rinnovano ogni mese e quelli inutilizzati non si accumulano. Prima di impegnarti, consulta come funzionano i crediti di Figma AI e i prezzi di Figma: una dotazione di crediti non garantisce un numero prestabilito di prototipi finiti.

I limiti che possono cambiare la scelta

I limiti di Figma Make dipendono dal flusso di lavoro scelto. Sia «non può creare un backend» sia «gestisce l'intero prodotto» sono presupposti poco affidabili su cui basare l'acquisto.

Un'app ospitata con Payload esclude, per ora, la prosecuzione tramite Git

La documentazione del backend Payload di Figma Make indica che l'integrazione con GitHub e i flussi su una codebase locale non sono ancora disponibili per le app basate su Payload. Precisa inoltre che l'hosting Payload si trova attualmente negli Stati Uniti orientali. Sono vincoli da considerare nella scelta, non dettagli da scoprire dopo aver costruito l'app. Limiti di Payload

Se il team di sviluppo deve proseguire subito lo stesso progetto nel proprio repository, verifica un percorso compatibile prima di scegliere Payload. La promessa di una funzionalità futura non risolve un passaggio di consegne previsto oggi.

Il passaggio da Figma Make a Figma Design non crea una sincronizzazione automatica

L'azione standard Copy design di Figma Make crea livelli modificabili a partire dall'anteprima corrente. Questi livelli sono statici, scollegati dal file Make e non vengono associati automaticamente al design system, anche se è possibile abbinarli alle variabili disponibili. Documentazione di Copy design

Usa la copia per la revisione critica e l'esplorazione visiva. Se modifichi il selettore degli appuntamenti sulla tela di progettazione, stabilisci esplicitamente come riportare quella modifica nell'app funzionante. Altrimenti la revisione del design e il prototipo possono finire per descrivere prodotti diversi senza che nessuno se ne accorga.

Le funzionalità Git non sono intercambiabili

La distinta funzione Push to GitHub di Figma Make crea un proprio repository e invia le modifiche in una sola direzione; gli invii successivi possono sovrascrivere gli interventi fatti fuori da Make. Questo limite non va attribuito al più recente flusso di clonazione dei repository descritto sopra.

Il flusso su una codebase locale è un'altra opzione distinta, documentata come beta chiusa a disponibilità limitata che usa l'app desktop Figma Beta per Mac e richiede un account ammesso al programma. Serve configurare il repository. Verifica quale percorso è accessibile al team prima di promettere che i designer potranno modificare direttamente l'app già in produzione.

La password dell'app pubblicata non protegge tutti i link di condivisione

La protezione con password di Figma Make si applica all'app pubblicata; l'anteprima segue invece i permessi di condivisione del file. Controlla entrambi prima di inviare un concept riservato fuori dal team. Pubblicazione e condivisione richiedono decisioni di accesso separate. Impostazioni di pubblicazione e accesso

Anche il comportamento generato richiede criteri di accettazione

Figma Make può far apparire completo un flusso prima che siano risolti i casi aziendali più complessi. Nell'esempio di prenotazione, valuta richieste concorrenti, appuntamenti cancellati, controlli non accessibili e conferme fuorvianti. Sono requisiti di revisione, non difetti osservati durante una prova per questa recensione.

Una definizione utile di «pronto per il rilascio» è: «l'utente previsto riesce a completare l'attività e chi ne è responsabile riesce a gestirne l'esito». Un mockup realistico, da solo, non soddisfa nessuna delle due condizioni.

Il verdetto: validare il design con Make e definire come gestire il prodotto

Figma Make è una scelta valida per fondatori, product manager e designer che dispongono già di risorse in Figma e vogliono valutare un'esperienza di prodotto funzionante. Kit, modifiche mirate e opzioni di backend permettono di spostare la discussione oltre l'aspetto delle schermate.

La scelta cambia quando chi prenderà in carico il progetto non può proseguire nel flusso di lavoro selezionato. Un'app ospitata con Payload può essere adatta alla gestione di contenuti o richieste, ma il suo attuale limite con Git pesa se il passaggio al team di sviluppo è immediato. Meglio Lovable per partire dall'app con un ambiente gestito e sincronizzazione Git, v0 per un percorso Next.js affidato agli sviluppatori, oppure Claude Design per un'esplorazione visiva più ampia che prosegue in Claude.

La prossima settimana, prendi un frame rappresentativo, costruisci la più piccola interazione completa e chiedi a chi gestirà il prodotto di esaminare il percorso per proseguire il lavoro. Approva insieme il prototipo e il passaggio di consegne. È un traguardo più utile che generare altre schermate.

Domande frequenti

Che cosa si può creare con Figma?

Nel flusso di lavoro descritto qui, usa Figma Design per progettare l'interfaccia, Make per generare interazioni funzionanti e app, e Sites quando serve uno strumento visuale per creare siti web. Decidi che cosa devi realizzare prima di scegliere l'ambiente.

Come si crea un nuovo file in Figma?

Per creare un file Make, apri Drafts nel browser dei file e fai clic su Make. Allega il frame e descrivi il comportamento desiderato. La guida qui sopra segue il percorso di creazione documentato da Figma.

Figma è uno strumento UI o UX?

Entrambi gli ambiti fanno parte del lavoro. La UI riguarda l'interfaccia che le persone vedono e usano; la UX riguarda la loro esperienza nel completare un'attività. Make può aiutare a esaminare un flusso funzionante, ma la ricerca e la valutazione del problema da risolvere restano responsabilità di chi progetta.

Qual è la differenza tra Figma Design e Figma Make?

Figma Design è l'ambiente di progettazione; Make genera un'interfaccia funzionante basata su codice. L'azione standard Copy design riporta una vista statica sotto forma di livelli modificabili, senza sincronizzare automaticamente le modifiche successive.

Esistono alternative migliori di Figma Make?

Per alcune attività, sì. Lovable è una valida alternativa per un'app con backend gestito, v0 per un flusso di sviluppo orientato a Next.js e Claude Design per l'esplorazione visiva in formati diversi. Il punto di forza di Make è poter partire dai design e dal design system che hai già in Figma.

Gli utenti stanno abbandonando Figma?

Questa recensione non misura la migrazione dei clienti. Singole lamentele o esempi di passaggio ad altri strumenti non bastano a dimostrare una tendenza generale. Per decidere, identifica la specifica attività di progettazione o di passaggio allo sviluppo che il tuo flusso attuale non permette di completare.

Perché Figma è in calo?

La domanda potrebbe riferirsi al prezzo delle azioni, all'adozione o all'opinione di qualcuno sul prodotto. Nessuno di questi aspetti stabilisce se Make sia adatto al tuo flusso di lavoro. Questa recensione non formula giudizi sull'andamento di mercato: valuta i percorsi documentati per progettazione, backend e passaggio allo sviluppo.

Chi è il principale concorrente di Figma?

Non esiste un unico concorrente che copra tutti i casi d'uso di Make. Per questa scelta, valuta Lovable se parti dall'app, v0 se il lavoro prosegue nel codice e Claude Design per la creazione visiva tramite conversazione. Il confronto deve basarsi sull'attività che devi effettivamente portare a termine.

È meglio Canva o Figma?

Per il flusso di progettazione di interfacce di prodotto trattato qui, scegli Figma. Se ti servono materiali di marketing, usa il confronto più ampio tra strumenti AI per il design già citato per scegliere in base a ciò che devi realizzare. Questa recensione non mette a confronto la qualità dei risultati di Canva e Figma.

Figma Make è gratis?

Puoi provare Make con Starter. Tra i limiti documentati ci sono l'assenza del contesto degli stili delle librerie del team e la pubblicazione sul web pubblico vincolata alla pubblicazione nella Figma Community. Per lavorare in team su prodotti riservati, valuta il percorso a pagamento con licenza Full. Consulta i requisiti di accesso a Figma Make e la dotazione di crediti indicata sopra.

Usa la checklist di verifica dei flussi aziendali con l'AI per definire chi sarà responsabile del prototipo, quali dati serviranno e come avverrà il passaggio di consegne, prima di impegnarti in quel flusso di lavoro.