Come creare forme in Figma? Figma per principianti #4

In questo articolo troverai una descrizione degli strumenti per creare e modificare le forme che comporranno ciascuno dei tuoi progetti. Imparerai le opzioni di base per l’editing delle forme e funzionalità più avanzate come i gruppi booleani e la creazione di maschere. Come creare forme in Figma? Leggi e scopri.

Come creare forme in Figma – indice:

1. Aggiungere forme
2. Pannello delle proprietà – Design
3. Modifica oggetto
4. Gruppi booleani
5. Maschere

Aggiungere forme

Puoi aggiungere una forma utilizzando la funzione Strumenti forma che troverai nella Toolbar. Questa funzione ti consente di creare forme vettoriali di base: rettangolo, linea, freccia, ellisse, poligono, stella.

Puoi anche creare forme personalizzate utilizzando gli Strumenti di disegno. Puoi scegliere tra una Pennino o una Matita.

Proprio come nel caso dei frame, ci sono molti modi per creare forme:

• Dopo aver selezionato una forma dall’elenco degli strumenti forma, fai clic sul Frame o sull’area Canvas. Questo creerà una forma con una dimensione predefinita di 100×100 px.
• Se desideri avere il controllo sulla dimensione dell’elemento creato, fai clic sull’area Frame o Canvas e tieni premuto il pulsante sinistro del mouse, quindi spostandoti puoi manipolare la dimensione della forma.
• Se desideri creare un quadrato, un cerchio o un poligono perfetto, tieni premuto il tasto Shift mentre trascini.

Ogni forma, oggetto di testo o immagine che aggiungi al Canvas sarà un livello separato. Questo ti consente di modificare le proprietà individuali di ciascun elemento.

Pannello delle proprietà – Design

Puoi visualizzare e modificare le proprietà degli oggetti nella scheda Design del pannello delle proprietà. Il tipo di livello determina quali parametri verranno visualizzati qui. La maggior parte dei parametri è la stessa in tutti i tipi di livello. Se non scegli alcun livello, il pannello delle proprietà mostrerà tutti gli stili locali per il file e il colore del Canvas.

Nella scheda Design, puoi aggiungere i seguenti parametri:

1. Allineamento – gli strumenti di allineamento ti consentono di allineare correttamente i livelli nel Canvas rispetto agli altri. Queste funzioni sono disponibili solo quando sono selezionati due o più livelli.

2. Distribuzione e sistemazione – questa funzione ti consente di organizzare i livelli creando spaziature uguali tra di essi. Queste funzioni sono disponibili solo quando sono selezionati due o più livelli.

3. Posizione del Canvas (X e Y) – qui puoi regolare la posizione dei livelli nel Canvas lungo gli assi orizzontale (X) e verticale (Y).

4. Dimensioni dell’oggetto (Larghezza e Altezza) – qui puoi cambiare la dimensione di un livello.

5. Mantieni le proporzioni – consente di mantenere le proporzioni della forma durante il ridimensionamento. Puoi cambiare l’altezza o la larghezza della forma, e il secondo parametro si regolerà automaticamente.

6. Rotazione – qui puoi impostare l’angolo di un frame.

7. Raggio degli angoli – con questa funzione puoi arrotondare gli angoli del frame.

8. Angoli indipendenti – l’impostazione degli angoli indipendenti ti consente di regolare il raggio degli angoli per ciascun angolo.

9. Livello (Modalità di fusione) – qui puoi specificare come due livelli dovrebbero fondersi insieme. Puoi applicare solo una modalità di fusione a ciascun livello.

10. Riempimento e Traccia – puoi applicare riempimenti e tracciati a forme e livelli di testo. Per aggiungere un riempimento o una traccia, seleziona il livello desiderato e fai clic sull’icona +. Puoi aggiungere diversi riempimenti e contorni a ciascun livello.

Per riempimenti e tracciati, il colore solido è impostato per impostazione predefinita. Per regolare le proprietà, fai clic sul campione di colore. Questo aprirà il settore dei colori, dove sono disponibili le opzioni: colore solido, gradiente (lineare, radiale, angolare, a diamante) e immagine.

Se hai bisogno di modificare ulteriormente lo stile della traccia, puoi utilizzare le impostazioni avanzate della traccia, disponibili sotto l’icona dei puntini di sospensione.

Consiglio utile: Puoi attivare e disattivare la visibilità di ciascuna proprietà nel livello attivo utilizzando l’icona dell’occhio. Le proprietà attive verranno visualizzate in nero, così puoi facilmente distinguerle da quelle inattive.

11.Effetti – qui puoi aggiungere un’ombra o un effetto sfocato al livello. Per regolare i valori dell’effetto, fai clic su Impostazioni effetto, che si trovano sotto il pulsante con l’icona del sole.

12.Impostazioni di esportazione – qui puoi esportare il livello selezionato nel formato di tua scelta: PNG, JPG, SVG e PDF.

Compito 4.1. Pianifica il layout degli elementi dell’interfaccia della tua applicazione. Prima, crea wireframe utilizzando forme semplici.

Consiglio utile: Ricorda di dare nomi appropriati a ciascun livello con regolarità. Se non presti attenzione a questo, sicuramente farai confusione nei tuoi livelli.

Iniziamo dalla schermata di accesso:

• In cima alla schermata posizioneremo il logo dell’applicazione in fase di progettazione.
• Ci saranno segnaposto con etichette sotto: login e password. A questo punto puoi segnare il posto per il testo con un rettangolo.
• In fondo alla schermata posizioneremo il pulsante di accesso.

Consiglio utile: Se stai cercando un logo per il tuo progetto, visita questo sito: https://www.freepik.com/free-photos-vectors/logo e scaricalo gratuitamente.

Ogni file su Freepik.com ha un avviso di licenza. Prima di scaricare, assicurati che la sua licenza ti consenta di utilizzarlo come desideri.

Puoi anche utilizzare un logo disponibile nel plugin “Creatore di logo”.

Ora occupiamoci del frame Home:

• Posizioneremo una barra di ricerca in cima alla schermata.
• Sotto ci sarà l’intestazione “Bestsellers”.
• Sotto l’intestazione, posizioneremo le immagini dei prodotti in due colonne. Crea un rettangolo che si adatti a una colonna e duplicalo più volte.
• Sotto ogni prodotto ci dovrebbe essere dello spazio per il suo nome e prezzo.
• Un altro elemento della nostra interfaccia sarà la barra inferiore, dove posizioneremo le icone: home, preferito, profilo, carrello.

Consiglio utile: Puoi facilmente aggiungere icone al tuo progetto, copiandole dalla libreria di Figma.

Community. Troverai un file di esempio qui: https://www.figma.com/community/file/1118814949321037573. 

Basta fare clic sul pulsante Ottieni una copia e si aprirà il file Iconia – un pacchetto di icone completamente modificabile di oltre 1.300 icone vettoriali pronte all’uso e scalabili in 6 stili unici. Per copiare le icone selezionate, vai alla pagina della libreria Iconia nel pannello Livelli.

Trova l’icona che desideri utilizzare nel tuo file, fai clic destro su di essa e seleziona Copia. Poi torna al tuo file, fai clic destro di nuovo e scegli Incolla qui. Un altro modo per aggiungere icone è utilizzare i plugin.

Ricorda che la coerenza dell’interfaccia è molto importante. Decidi uno stile di icone e mantienilo ovunque nella tua applicazione. Applica lo stesso principio in seguito agli stili di testo, alle dimensioni delle immagini e ad altri elementi.

Una volta pianificato il layout degli elementi nella home page, puoi passare al frame Prodotto:

• In cima alla schermata, posizioneremo il pulsante “Indietro” sul lato sinistro.
• Sotto ci sarà una grande foto del prodotto.
• Nell’angolo destro della foto, posizioneremo un pulsante con l’icona “preferito”.
• Sotto la foto, posizioneremo il nome e il prezzo del prodotto e spazio per una descrizione.
• In fondo alla schermata aggiungeremo un pulsante CTA “Aggiungi al carrello”.

Modifica oggetto

Puoi facilmente modificare tutte le forme utilizzando lo strumento Modifica oggetto che si trova al centro della Toolbar. Per utilizzare questa funzione, prima devi selezionare la forma che desideri modificare.

Attivare la modalità di modifica farà apparire nuove funzionalità nella Toolbar, e vedrai i punti angolari sulla forma modificata. Puoi fare clic sul punto angolare desiderato e trascinarlo per cambiare la forma di una forma.

Puoi anche aggiungere altri Punti angolari alla forma utilizzando lo Strumento Pennino. Questo ti permetterà di fare ulteriori modifiche.

Puoi piegare liberamente le forme utilizzando lo Strumento Piegatura. Seleziona lo Strumento Piegatura nella Toolbar, e poi fai clic sul punto angolare scelto.

Lo strumento Cubo di vernice ti consente di rimuovere e ripristinare il riempimento di una forma. Per fare ciò, seleziona Cubo di vernice e poi fai clic sulla forma che stai modificando.

Per uscire dalla modalità di modifica, fai clic su Fatto.

Gruppi booleani

Se selezioni due o più forme, lo Strumento gruppi booleani appare nella Toolbar. Ti consente di creare forme personalizzate combinandole, utilizzando una delle quattro formule disponibili: unione, sottrazione, intersezione, esclusione.

• selezione unione – combina le forme selezionate in una nuova forma.

• selezione sottrazione – sottrae tutte le forme superiori e le loro aree sovrapposte dalla forma più bassa

• selezione intersezione – la nuova forma consiste solo di frammenti sovrapposti delle forme selezionate

• selezione esclusione – la forma creata consiste solo di frammenti delle forme selezionate che non si sovrappongono.

Dopo aver applicato lo Strumento gruppo booleano, tutte le forme selezionate si fondono in un unico livello, il che significa che condividono le proprietà di riempimento e tracciato. Puoi combinarle con altre forme e eseguire ulteriori operazioni logiche.

Compito 4.2. Esercitati a modificare le forme con gli Strumenti Modifica oggetto e Gruppi booleani. Anche se non hai bisogno di queste funzioni in questa fase del tuo progetto, vale la pena consolidare le tue conoscenze attraverso la pratica. Sii creativo e divertiti. Puoi anche provare a ricreare le forme di esempio che vedi nello screenshot seguente. Per fare ciò, crea una nuova pagina nel file o aggiungi oggetti accanto ai frame con il progetto, e poi semplicemente cancellali.

Maschere

Le maschere ti consentono di mostrare solo aree selezionate di un’immagine e nascondere il resto senza ritagliare. Questo significa che nessuna parte dei livelli nel processo di mascheramento viene rimossa o modificata, quindi puoi modificare la maschera in qualsiasi momento se desideri mostrare un’altra parte dell’immagine.

Per capire meglio, puoi immaginare una cornice con un piccolo apertura. Vedrai solo una parte della foto in essa, mentre il resto è nascosto, ma se apri la cornice, puoi comunque vedere l’intera foto.

Puoi utilizzare qualsiasi livello come maschera, come forme vettoriali, livelli di testo e immagini. L’ordine dei livelli è molto importante. Il livello più basso è considerato il contenitore della maschera, cioè l’apertura attraverso la quale vedrai l’immagine.

Per creare una maschera, assicurati che i livelli siano allineati correttamente. Quindi seleziona entrambi i livelli e scegli Usa come maschera nella Toolbar.

Tutte le aree esterne del livello che sono sopra il contenitore saranno nascoste. Solo quelle aree che saranno all’interno dell’area della maschera rimarranno visibili.

Compito 4.3. Usa le maschere per aggiungere immagini di prodotto al tuo design. Ricorda l’ordine corretto dei livelli. Il livello che sarà il contenitore deve essere sotto il livello dell’immagine.

Consiglio utile: Puoi scaricare immagini gratuite per i tuoi progetti dal sito https://unsplash.com.  

Puoi anche utilizzare il plugin “Unsplash”.

Hai appena imparato come creare forme in Figma. Leggi anche: 10 euristiche di usabilità per il design UX.

Se ti piace il nostro contenuto, unisciti alla nostra comunità di api laboriose su Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.