Come creare una griglia in Figma – il layout reso semplice

Scopri come creare griglie in Figma usando le griglie di layout per colonne, righe o quadrati. Ideale per il design dell'interfaccia utente, la spaziatura e un allineamento perfetto al pixel.

Crea video e documentazione di prodotto straordinari con l’IA

Questo tutorial è stato creato con Trupeer in meno di 5 minuti

Crea gratuitamente

Questa guida ti accompagna attraverso il processo di aggiunta e personalizzazione delle linee della griglia in Figma, garantendo un layout di progettazione ben organizzato.
Segui i passaggi qui sotto per aggiungere in modo efficiente le linee della griglia ai tuoi progetti Figma.

Figma ti consente di applicare griglie di layout ai frame, rendendo più facile allineare e organizzare gli elementi di design.

1. Seleziona un frame

Fai clic sul frame a cui vuoi applicare la griglia. Le griglie di layout sono disponibili solo per i frame, non per i singoli elementi.

2. Aggiungi una griglia di layout

Vai alla barra laterale destra (pannello Design), scorri fino alla sezione Griglia di layout e fai clic sull'icona "+".

3. Scegli un tipo di griglia

Figma offre tre tipi di griglia:

Griglia (quadrati uniformi)
Colonne (utile per layout responsive)
Righe (adatto per l'allineamento orizzontale)

Usa il menu a discesa per selezionare il tipo di griglia che preferisci.

4. Personalizza le impostazioni della griglia

Numero di colonne/righe: imposta il numero di colonne o righe.
Gutter: regola lo spazio tra colonne/righe.
Margine: imposta il padding tra il frame e la griglia.
Allineamento: scegli come si allineano colonne o righe:
- Colonne: Sinistra, Centro, Destra o Estendi
- Righe: Alto, Centro, Basso o Estendi
Colore e opacità: cambia il colore e la trasparenza delle linee della griglia per adattarle al tuo design.

5. Attiva/disattiva la visibilità della griglia

Usa la scorciatoia Maiusc + G per mostrare o nascondere in qualsiasi momento la griglia di layout.

Guida passo passo: come creare una griglia in Figma

Passo 1

Iniziamo a imparare - 'Come aggiungere le linee della griglia in Figma'. Apri il tuo file Figma. Seleziona l'opzione frame per creare un nuovo frame.

Lets begin learning - 'How to add gridlines in Figma'. Open your Figma file. Select the frame option to create a new frame.

Passo 2

Se non hai ancora creato un frame, assicurati di crearne uno e impostarne le dimensioni di conseguenza. Vai alle impostazioni della griglia del livello.

If you haven't created a frame yet, ensure you create one and set its dimensions accordingly. Navigate to the layer grid settings.

Passo 3

Nelle impostazioni della griglia del livello. Nelle impostazioni della griglia, scegli il tipo di griglia che preferisci, ad esempio una griglia quadrata, e personalizzala in base alle tue esigenze.

In the Navigate to the layer grid settings. In the grid settings, choose the grid type you prefer, such as a square grid, and customize it to your needs.

Passo 4

Regola le colonne e le righe all'interno delle impostazioni della griglia in base alle esigenze del tuo design.

Adjust the columns and rows within the grid settings to suit your design requirements.

Passo 5

Dopo aver impostato il numero di righe e colonne, procedi a finalizzare la personalizzazione della tua griglia.

After setting the number of rows and columns, proceed to finalize your grid customization.

Passo 6

Fai clic su 'Crea stile' per salvare la tua griglia come file, mantenendo intatte le impostazioni della griglia. Salvalo con il nome di uno stile specifico, in modo che abbia senso per il progetto e che tu possa usarlo in futuro.

Click 'Create Style' to save your grid as a file with grid settings remaining intact. Save it with the name of a particular style - so that it makes sense for the project and you can use it in future.

Consigli professionali per creare una griglia in Figma

Usa le griglie di layout per la coerenza:
Seleziona il frame o la tavola da disegno a cui vuoi aggiungere le linee della griglia. Nel pannello di destra, nella sezione Layout Grid, fai clic sull'icona + per aggiungere una griglia. Questo garantisce coerenza in tutto il design e aiuta ad allineare gli elementi con precisione.
Personalizza il tipo di griglia:
Figma ti consente di scegliere tra Grid, Columns e Rows per il tuo layout. Seleziona Grid per una griglia uniforme, Columns per un layout basato su colonne oppure Rows per una struttura orizzontale. Personalizza spaziatura, numero e margini in base alle tue esigenze.
Imposta più griglie:
Puoi aggiungere più griglie a un singolo frame. Usa diversi tipi di griglia per lavorare su aspetti differenti del tuo design, ad esempio una griglia a colonne per il testo e una griglia standard per l'allineamento generale.
Usa la griglia per il design responsive:
Per il design web o mobile responsive, usa una griglia a colonne e regola la larghezza della griglia e il gutter per adattarla a diverse dimensioni dello schermo. Questo aiuta a mantenere le proporzioni e la leggibilità su più dispositivi.
Attiva o disattiva la visibilità della griglia:
Attiva o disattiva la visibilità delle griglie premendo Shift + G. Questo ti permette di mostrare e nascondere rapidamente le griglie senza modificare il design.

Errori comuni e come evitarli quando si aggiungono le linee della griglia in Figma

Spaziatura della griglia errata:
Correzione: ricontrolla le impostazioni della griglia e assicurati che la spaziatura e le colonne/righe siano adatte al tuo design. Usa misurazioni coerenti per mantenere l'allineamento.
Riempire troppo il frame con le griglie:
Correzione: evita di aggiungere troppe griglie o di usare griglie che non si adattano al contenuto. Attieniti a uno stile di griglia (ad es. colonne) a meno che tu non abbia una necessità specifica di usare griglie diverse.
Elementi di design disallineati:
Correzione: usa la griglia per allineare gli elementi, ma assicurati che gli elementi del tuo design siano perfettamente allineati alla griglia. Ingrandisci per verificare che tutto si agganci correttamente alle linee della griglia.
Layout poco chiaro per chi guarda:
Correzione: se stai progettando per la visione di altri, assicurati che le griglie non appesantiscano il design. Usa le griglie solo come guida e disattivale per l'esportazione finale.
Confusione sulla visibilità della griglia:
Correzione: se le griglie distraggono troppo, usa il cursore dell'opacità nel pannello Layout Grids per ridurre la visibilità della griglia mantenendola comunque utile per l'allineamento.

Domande frequenti comuni per aggiungere linee della griglia in Figma

Posso aggiungere linee della griglia a una parte specifica del mio design, come un'immagine?
Le griglie vengono applicate a frame e tavole da disegno in Figma. Per concentrare la griglia su una parte specifica, crea un frame attorno all'area desiderata e applica la griglia a quel frame.
Come posso personalizzare la dimensione della griglia?
Puoi personalizzare la dimensione della griglia, la spaziatura e il gutter regolando i valori nella sezione Griglie di layout nel pannello di destra quando hai selezionato un frame.
Come posso nascondere le linee della griglia durante la presentazione o l'esportazione?
È sufficiente disattivare le linee della griglia premendo Shift + G oppure deselezionando l'opzione Griglie di layout nel pannello di destra per rimuoverle dalla vista e dall'esportazione.
Le linee della griglia sono stampabili in Figma?
No, le linee della griglia non vengono stampate o esportate per impostazione predefinita. Puoi disattivarne la visibilità prima di esportare il tuo design per assicurarti che non compaiano nel risultato finale.
Posso usare le linee della griglia per il design mobile o web?
Sì, le linee della griglia sono estremamente utili per il design web e mobile. Puoi usare griglie a colonne per allineare gli elementi, assicurando che il tuo design si adatti bene a diverse dimensioni dello schermo.
Questa è la guida passo passo per aggiungere linee della griglia in Figma.
Come registrare lo schermo su Mac?
Per registrare lo schermo su un Mac, puoi usare Trupeer AI. Ti consente di catturare l'intero schermo e offre funzionalità AI come l'aggiunta di avatar AI, aggiungere la voce fuori campo, aggiungere zoom avanti e indietro nel video. Con la funzione di traduzione video AI di trupeer, puoi tradurre il video in oltre 30 lingue.
Come aggiungere un avatar AI a una registrazione dello schermo?
Per aggiungere un avatar AI a una registrazione dello schermo, dovrai utilizzare uno strumento di registrazione dello schermo AI. Trupeer AI è uno strumento di registrazione dello schermo AI, che ti aiuta a creare video con più avatar e ti aiuta anche a creare il tuo avatar per il video.
Come registrare lo schermo su Windows?
Per registrare lo schermo su Windows, puoi usare la Game Bar integrata (Windows + G) oppure uno strumento AI avanzato come Trupeer AI per funzionalità più avanzate come avatar AI, voiceover, traduzione ecc.
Come aggiungere il voiceover a un video?
Per aggiungere un voiceover ai video, scarica l'estensione Chrome di trupeer ai. Una volta registrato, carica il tuo video con voce, scegli il voiceover desiderato da trupeer ed esporta il video modificato.
Come posso ingrandire in una registrazione dello schermo?
Per ingrandire durante una registrazione dello schermo, usa gli effetti zoom in Trupeer AI che ti consentono di ingrandire e rimpicciolire in momenti specifici, migliorando l'impatto visivo dei contenuti del tuo video.