HomeCasa Prompts

Specifica di un componente Figma con auto layout, varianti e variabili

Ottieni la specifica completa di un componente Figma: albero dei livelli, impostazioni di auto layout, proprietà e varianti, variabili e modalità, stati, stress test e note di handoff. Pensato per ChatGPT, Claude, Gemini e Microsoft Copilot. Include 5 variabili personalizzabili e puoi copiarlo gratuitamente con un clic.

Avanzato · Testo · In attesa di revisione editoriale

Pensato per:

Prompt

Agisci come designer di design system esperto di Figma (auto layout, proprietà dei componenti, variabili e modalità).

Contesto:
- Componente: {{componente}}
- Casi d'uso: {{casi_uso}}
- Varianti necessarie: {{varianti}}
- Token o variabili esistenti: {{token}}
- Piattaforma di destinazione: {{piattaforma}}

Consegne:
1. Anatomia: albero dei livelli con nomi chiari (in un blocco di codice), indicando quali livelli sono istanze annidate.
2. Impostazioni di auto layout per livello: direzione, spaziatura, padding, allineamento, ridimensionamento (hug, fill, fixed), larghezza minima e massima e uso del wrap.
3. Proprietà del componente: varianti, booleane, scambio di istanza e testo. Progetta la matrice delle varianti evitando l'esplosione combinatoria e spiega cosa risolvi con le proprietà invece che con le varianti.
4. Collegamento alle variabili: spaziature, colori, raggi e tipografia; modalità chiara/scura e di densità se pertinenti.
5. Stati: predefinito, hover, focus, premuto, disattivato, caricamento ed errore se serve, con la modifica esatta per ciascuno.
6. Stress test: testo lungo, traduzioni fino al 30-40% più lunghe (per esempio in tedesco), icone assenti, contenitore stretto e, se serve, direzione da destra a sinistra.
7. Note di handoff: corrispondenza tra proprietà Figma e props nel codice, e misure che lo sviluppo deve rispettare.
8. Checklist di QA prima di pubblicare il componente nella libreria.

Vincoli:
- Usa solo funzionalità reali di Figma; se una dipende dal piano o da una versione recente, segnalalo e proponi un'alternativa.
- Non inventare token; se mancano, proponi nomi provvisori segnati come [DA COMPLETARE].
- Se i casi d'uso non sono chiari, chiedimeli prima di definire le varianti.

Formato: blocco di codice con l'albero dei livelli, tabelle per auto layout, proprietà e stati, e checklist finale.

Come usarlo

  1. Descrivi il componente e le schermate in cui verrà usato. 2. Incolla i nomi delle tue variabili o token attuali. 3. Costruisci il componente in Figma seguendo l’albero dei livelli e completa la checklist prima di pubblicarlo.

Esempio d'uso

Componente: card prodotto · Varianti: con e senza sconto, orizzontale e verticale · Token: space/100-800, color/surface · Piattaforma: web responsive.

Esempio di risultato

1. Anatomia

ProductCard (componente · auto layout)
├── Media (frame)
│   ├── Image
│   └── DiscountBadge (istanza · booleano)
└── Content (frame)
    ├── Title (testo)
    ├── Rating (istanza · booleano)
    └── PriceRow (frame)
        ├── Price (testo)
        └── OldPrice (testo · booleano)

2. Auto layout

LivelloDirezioneGapPaddingRidimensionamento
ProductCardVerticale / orizzontale per variantespace/3000Fill · min 160 px
ContentVerticalespace/200space/400Fill
PriceRowOrizzontalespace/2000Hug

3. Proprietà

  • Variante: orientation = vertical | horizontal (solo 2 varianti).
  • Booleani: hasDiscount, showRating, per non moltiplicare le varianti.
  • Testo: title, price.

Così 2 varianti coprono 8 combinazioni invece di 8 varianti.

6. Stress test

  • Titolo su 3 righe: troncare a 2 con ellissi.
  • Traduzione in tedesco (+35%): il prezzo non deve andare a capo…

Dati chiave

Categoria
Design UI/UX · Figma
Tipo di output
Testo
Livello
Avanzato
Pensato per
ChatGPT, Claude, Gemini e Microsoft Copilot
Verificato in
In attesa di verifica editoriale
Variabili
Componente, Casi d’uso, Varianti necessarie, Token o variabili e Piattaforma di destinazione
Lingua
Italiano
Prezzo
Gratuito, senza registrazione
Aggiornato
07/11/2026

Domande frequenti

Quando usare una proprietà booleana invece di una variante?

Quando devi solo mostrare o nascondere un livello, come un’icona o un badge. Le varianti vanno riservate ai cambi di struttura o stile, perché ogni combinazione ne moltiplica il numero.

Perché testare il componente con testi tradotti?

Perché lingue come il tedesco o il francese occupano spesso molto più spazio dell’inglese. Se l’auto layout non lo regge, il componente si rompe in produzione.

A cosa serve questo prompt?

Ottieni la specifica completa di un componente Figma: albero dei livelli, impostazioni di auto layout, proprietà e varianti, variabili e modalità, stati, stress test e note di handoff.

Con quali strumenti di IA funziona?

È pensato per ChatGPT, Claude, Gemini e Microsoft Copilot. Non lo abbiamo ancora verificato in questi strumenti, quindi i risultati possono variare da uno all'altro.

Come personalizzo il prompt?

Clicca su «Personalizza» e compila le variabili (Componente, Casi d’uso, Varianti necessarie, Token o variabili e Piattaforma di destinazione). Il testo si aggiorna all'istante e poi puoi copiarlo con un clic. I valori vengono salvati solo nel tuo browser.

Serve esperienza per usarlo?

È di livello avanzato: è pensato per persone con esperienza nell'argomento, in grado di valutare e regolare il risultato.

Questo prompt è gratuito?

Sì. Tutti i prompt di HomeCasa Prompts sono gratuiti, senza registrazione né abbonamento. Puoi usarli anche in progetti professionali.

Posso fidarmi dell'output dell'IA?

Consideralo una bozza di alta qualità: verifica sempre dati, cifre e affermazioni importanti prima di pubblicare o prendere decisioni.

Prompt correlati