Figma AI funziona bene solo quanto le istruzioni che gli fornisci. Prompt vaghi producono layout generici che devi ricostruire da zero. Prompt specifici — con tipo di schermo, sezioni, componenti, dimensioni del frame e spaziatura — producono regolarmente output pronto per la produzione al 70–85% in una sola passata. Questi 15 template sono strutturati per lo stack AI 2026 di Figma: il Design Agent, Figma Make, Skills, e le funzionalità gratuite (auto layout, rinomina livelli, sostituisci contenuto) che non costano crediti.
Copia qualsiasi template, sostituisci i segnaposto tra parentesi quadre con il tuo prodotto, e passalo attraverso l'Ottimizzatore di Prompt gratuito se vuoi vincoli più rigidi. Per l'ottimizzazione con un clic all'interno di ChatGPT, Claude e Gemini mentre drafti le istruzioni dell'agente, TresPrompt aggiunge struttura in stile ICCSSE alla tua barra laterale.
Punto Chiave
Ogni prompt Figma AI efficace nomina quattro cose: quale schermo stai costruendo, quali componenti pubblicati usare, la dimensione del frame e le regole di spaziatura. Aggiungi vincoli negativi ("non usare frame senza nome," "niente lorem ipsum") e l'agente smette di indovinare. Le Skills codificano questi pattern così non devi riscriverli ogni sessione.
Template Design Agent (Schermate su Canvas)
1
Pagina impostazioni mobile
Crea una pagina impostazioni mobile (390×844) con:
1. Account — avatar, nome, email, pulsanti modifica
2. Notifiche — toggle per email, push, SMS
3. Aspetto — toggle modalità scura, selettore dimensione carattere
4. Sicurezza — cambia password, toggle 2FA
5. Footer — pulsante distruttivo logout, testo versione app
Usa solo componenti pubblicati. Auto layout: spaziatura elementi 16px, 32px tra sezioni. Componente Section Header per etichette gruppi.
2
Panoramica dashboard (desktop)
Crea una dashboard analitica desktop (1440×900) con:
- Nav superiore: logo, ricerca, menu utente
- Sidebar sinistra: 5 elementi nav, stato attivo su "Overview"
- Principale: 4 card KPI in fila, grafico lineare sotto, tabella attività recenti (5 righe)
Usa variabili design system per colore e spaziatura. Componente Card per KPI. Componente Table per attività. Non usare etichette dati grafico placeholder come "Series 1."
3
Flusso onboarding (3 frame)
Crea 3 schermate onboarding mobile (390×844), da sinistra a destra:
1. Benvenuto — titolo, sottotesto, CTA primaria "Inizia"
2. Permessi — lista notifiche + posizione con toggle
3. Successo — area illustrazione spunta, CTA "Sei pronto"
Usa componenti Primary Button e Secondary Button. Indicatore progresso che mostra step 1/3, 2/3, 3/3. Padding orizzontale consistente 24px su tutti i frame.
4
Stato vuoto + stato errore
Crea due frame mobile (390×844):
Frame A — Risultati ricerca vuoti: area icona, titolo "Nessun risultato", testo corpo, pulsante secondario "Cancella filtri"
Frame B — Errore: icona avviso, "Qualcosa è andato storto", primario "Riprova", terziario "Contatta supporto"
Usa componenti Empty State e Alert pubblicati se disponibili. Contenuto centrato, larghezza massima 280px per blocco testo.
5
Impostazioni accessibili (agent + a11y)
Crea una pagina impostazioni mobile (390×844) con requisiti accessibilità:
- Elementi interattivi target tocco minimo 44×44px
- Contrasto testo minimo 4.5:1 (usa colori testo design system)
- Gerarchia intestazioni H1 → H2, nessun livello saltato
- Toggle includono etichette testo visibili (non solo icone)
- Stati errore usano colore E testo (non solo colore)
Usa componenti pubblicati. Auto layout spaziatura 16px / 32px.
📬 Stai trovando valore in questo?
Un insight AI pratico a settimana. Più un pacchetto prompt gratuito quando ti iscrivi.
Iscriviti gratis →
Template Figma Make (Prototipo / Codice)
6
Landing marketing (Make)
Costruisci un sito marketing a pagina singola da questo frame Figma:
- Hero: titolo, sottotitolo, cattura email + CTA
- 3 colonne caratteristiche con icone
- Riga loghi social proof
- Footer con link
Rispetta spaziatura e colori dal frame selezionato. Responsive mobile. Nessuna libreria esterna salvo specificato nelle note frame.
7
Prototipo interattivo (Make)
Crea un prototipo cliccabile dai frame [elenca nomi frame]:
- Cliccare "Registrati" naviga al frame form registrazione
- Submit mostra stato toast successo
- "Indietro" ritorna allo schermo precedente
Usa componenti dal file. Preserva stati hover sui pulsanti primari. Non aggiungere nuovi schermi non nel file design.
Template Skills (Istruzioni Agente Riutilizzabili)
Salva questi come file markdown Skills così l'agente segue le convenzioni del team ogni volta.
8
Skill: /settings-page
Quando crei schermate impostazioni:
- Usa sempre pattern Section Header + lista raggruppata
- Includi footer con versione app (stile caption) e logout distruttivo
- Mobile default 390×844 salvo l'utente specifichi desktop
- Usa componente Toggle per impostazioni booleane, mai checkbox personalizzate
- Spaziatura: 16px dentro gruppi, 32px tra gruppi, 24px padding schermo
9
Skill: /data-table
Quando crei tabelle:
- Usa componenti Table/Header e Table/Row
- Includi colonna icona ordinamento solo se l'utente chiede
- Altezza riga 48px minimo per tocco
- Tronca testo lungo con ellipsis, mai andare a capo più di 2 righe nelle celle
- Stato vuoto sotto tabella se zero righe
Funzionalità Gratuite (Zero Crediti)
10
Sostituisci Contenuto (batch)
Sostituisci tutto il lorem ipsum nel frame selezionato con copy realistico [B2B SaaS / e-commerce / healthcare]. Nomi: diversi, plausibili. Indirizzi: formato US. Nomi prodotti: fittizi ma professionali. Mantieni conteggi caratteri simili ai placeholder così il layout non si rompe.
11
Rinomina livelli (prep handoff)
Rinomina tutti i livelli in questa pagina usando pattern: [Sezione]/[Componente]/[Stato]
Esempio: Settings/NotificationRow/Default
Non rinominare frame sfondo bloccati. Salta livelli nascosti.
Prompt MCP + Handoff Codice (Claude Code / Cursor)
12
React da frame Figma
Leggi il frame Figma selezionato via MCP. Genera un componente React usando [Tailwind / la nostra libreria Shadcn]:
- Rispetta spaziatura e colori dai token design nel file
- Usa HTML semantico (nav, main, section)
- Includi breakpoint responsive a 768px e 1024px
- Esporta come SettingsPage.tsx con props tipizzate per dati utente
Non hardcodare valori hex — usa nomi token dalle variabili Figma.
Template Esplorazione & Confronto
13
Tre direzioni layout
Genera 3 approcci layout diversi per [tipo schermo] su desktop 1440×900:
A — navigazione sidebar
B — navigazione tab superiore
C — hub basato su card
Stesso contenuto in tutti e tre. Usa componenti pubblicati. Posiziona frame affiancati con gap 80px. Etichetta ogni frame "Direzione A/B/C" in piccolo testo caption.
14
Prompt audit design system
Rivedi la pagina selezionata e elenca:
- Componenti non dalla libreria pubblicata (contrassegna come "detached")
- Colori che non usano variabili
- Testo che non usa stili testo
- Gap auto layout che non sono 4/8/16/24/32
Output come checklist nelle note frame. Non auto-correggere — solo reportare.
15
Passaggio rifinitura (secondo prompt)
Sul frame generato, applica solo queste correzioni:
1. Aumenta spaziatura verticale tra sezioni a 32px
2. Cambia pulsante primario in variante Button/Primary/Large
3. Aggiungi testo helper sotto campo email: "Non condivideremo mai la tua email"
4. Allinea tutte le icone a 24×24 nelle righe lista
Non ristrutturare il layout. Non aggiungere nuove sezioni.
Come Concatenare i Template
Workflow produzione: Template 13 (esplora) → scegli direzione → Template 1 o 2 (schermo completo) → Template 15 (rifina) → Template 11 (rinomina) → Template 12 (MCP a codice). Ogni step usa un prompt focalizzato invece di una gigante istruzione che confonde l'agente.
Per l'ecosistema Figma AI completo (Agent, Make, MCP, Skills, Sites), vedi la nostra guida completa 2026. Per setup agente step-by-step, vedi come usare il Design Agent. Per budgeting crediti, vedi crediti Figma AI spiegati.
Domande Frequenti
Funzionano sul piano Figma gratuito?
I template 10–11 (Sostituisci Contenuto, rinomina) funzionano sui piani gratuiti. Design Agent e Make richiedono piani a pagamento e accesso beta. MCP funziona con qualsiasi piano che può abilitare Dev Mode / MCP per il tuo posto.
Dovrei incollare tutto il template o accorciarlo?
Inizia con il template completo. Una volta che vedi quali righe l'agente ignora, accorcia. Prompt più corti funzionano solo dopo che sai quali vincoli il tuo design system effettivamente necessita.
Posso usare lo stesso prompt per Make e il Design Agent?
No — Make si aspetta linguaggio build/prototipo e consuma crediti diversamente. Usa template Design Agent per livelli canvas e template Make per output interattivo. Mescolarli produce risultati confusi.
Come salvo i prompt come Skills?
Copia i template 8–9 in file markdown Skills nella libreria Skills del tuo team. Invoca con /nome-skill nel pannello agente. Aggiorna Skills quando cambiano i nomi dei tuoi componenti — vedi la nostra guida Skills.
Dichiarazione: Alcuni link in questo articolo sono link di affiliazione. Raccomandiamo solo strumenti che abbiamo testato personalmente e usiamo regolarmente. Vedi la nostra politica di divulgazione completa.