Area di Lavoro

Creare un progetto

All’apertura di Figma, la schermata iniziale permette di creare nuovi progetti o di aprire progetti esistenti.

Nella colonna di sinistra, oltre alle informazioni di login, troviamo:

• Drafts (bozze);
• Teams (spazi collaborativi per i team).

In alto a destra, nelle impostazioni, è possibile cambiare il tema: è consigliato utilizzare il tema scuro per ridurre l’affaticamento visivo.

È importante ricordare che Figma è un software basato sul web, il che significa che è necessaria una connessione a Internet per scaricare, lavorare e salvare i file.

Per iniziare, accediamo alla sezione Drafts e creiamo il nostro primo progetto cliccando su “New design file”. Dopo aver cliccato, si aprirà la pagina di lavoro del file.

Area di lavoro

Una volta creato un progetto, ci troviamo nella schermata di lavoro di Figma, che è composta da:

1. Pannello Strumenti Inferiore: contiene gli strumenti principali.
2. Barra di sinistra: mostra il nome del file (di default “Untitled”), che può essere modificato con un semplice clic, i Layers (Livelli) e gli Assets (Risorse).
3. Barra di destra: è un menu dinamico che mostra le proprietà degli elementi selezionati.
4. Area centrale: è la finestra di lavoro principale dove si svolge il design.

Frames

I Frames sono i contenitori in cui possiamo inserire forme, testi e immagini. Puoi immaginare i Frames come singole schermate del tuo progetto.

Come creare un Frame

1. Clicca sull’icona Frame nel pannello degli strumenti in alto.
2. Nella barra di destra, seleziona un dispositivo (es. Phone) e scegli la dimensione, ad esempio iPhone 16.
3. Il Frame apparirà al centro dell’area di lavoro.

Nella barra dei Layers, il Frame appena creato verrà visualizzato come un nuovo elemento. Per rinominarlo, fai doppio clic sul nome e scrivi, ad esempio, “Home”.

Per rimuovere una tavola selezionarla e premi Cancella sulla tastiera.

Zoom e Panning

Ecco le scorciatoie per ingrandire e spostare l’inquadratura:

• Zoom:
• Ctrl / Cmd + scroll del mouse (per ingrandire o ridurre);
• Ctrl / Cmd + “+” (per aumentare lo zoom);
• Ctrl / Cmd + “-” (per ridurre lo zoom).
• Panning (spostare l’inquadratura):
• Space + Click e trascina con il mouse.

Annullare comando

Qualsiasi operazione può essere annullata o ripristinata:

• Annullare: vai su Modifica > Annulla (o usa la scorciatoia Ctrl / Cmd + Z).
• Ripristinare: vai su Modifica > Ripristina (scorciatoia Ctrl / Cmd + Shift + Z).

⚠️ Nota: se esegui una nuova operazione dopo aver annullato un comando, l’opzione Ripristina verrà disattivata.

Salvare lavoro

Figma salva automaticamente il tuo lavoro, quindi non è necessario eseguire salvataggi manuali.

Distanze e righelli

Visualizzare i righelli

• Vai su Figma Logo > View > Rulers oppure premi Shift + R.

Aggiungere e rimuovere guide

• Per posizionare una guida, trascinala dai righelli fino all’area di lavoro.
• Per cancellare una guida, trascinala nuovamente sul righello o selezionala e premi Cancella sulla tastiera.

Misurare le distanze

Durante il posizionamento delle guide, premi Alt / Option per vedere le distanze tra la guida e altri elementi.

Per misurare la distanza tra due elementi:

1. Seleziona il primo elemento.
2. Posiziona il mouse sul secondo elemento e premi Alt / Option.

⚠️ Attenzione: il tasto Alt / Option viene utilizzato anche per duplicare un elemento durante lo spostamento.

Esercitazione

Crea un file Figma e rinominalo “Lezione 01”.

All’interno del file, aggiungi due Frames:

• Uno con dimensione iPhone.
• Uno con dimensione MacBook Pro 16”.

Posiziona i Frames affiancati e inserisci due guide per ciascun Frame:

• 32px di distanza dai bordi per l’iPhone.
• 160px di distanza dai bordi per il MacBook Pro.

Rinominare le tavole nel seguente modo:

• ”Home – Smartphone” per l’iPhone.
• ”Home – Desktop” per il MacBook Pro.