Come usare Figma: una guida per principianti

Il mondo del software di progettazione grafica è enorme e ha molta concorrenza. Figma è uno strumento di progettazione che sta correndo al primo posto per i progettisti di UX/UI in tutto il mondo. Ma cosa sai di questo strumento intuitivo?

Sebbene sia semplice, c’è anche una curva di apprendimento se sei abituato ad altri strumenti di progettazione. Diamo un’occhiata a Figma e come usarlo. Benvenuti in Figma 101.

Cos’è Figma?

Se hai lavorato come grafico o web designer negli ultimi anni, probabilmente hai sentito parlare di Figma. Potresti anche averlo usato.

Figma è uno strumento di progettazione ed è diventato costantemente uno dei preferiti dai designer digitali, superando opzioni come Adobe XD, Adobe Photoshop e Sketch, per il web design e altro ancora. Tuttavia, da quando Adobe ha acquisito Figma nel 2022, potrebbero esserci alcuni cambiamenti che rimescoleranno la classifica.

Ci sono molti usi per Figma. Viene utilizzato principalmente per la progettazione digitale e non è possibile progettare in CMYK per la stampa. Alcuni degli usi principali di Figma includono:

• Prototipazione
• Progettazione UX/UI
• Progettazione dell’app
• web design
• Progettazione della presentazione

Puoi utilizzare i plug-in Figma mockup per mostrare i tuoi progetti, convertire pagine Web reali in progetti Figma utilizzando plug-in e persino creare modelli principali per i progetti Figma per risparmiare tempo in tipi di design ripetitivi.

Quanto costa Figma?

Puoi creare un account Figma gratuitamente sul sito Figma o scaricando l’ app Figma . Un account gratuito fornisce funzionalità per tutti gli aspetti di progettazione dell’app. Puoi progettare con Figma e FigJam, lo strumento di collaborazione di Figma.

Se stai usando Figma come hobbista o come unico libero professionista, la versione Free Forever è quasi perfetta. Hai ancora accesso a tutti i plug-in, puoi invitare collaboratori illimitati, utilizzare file personali illimitati e utilizzare Figma da tutte le piattaforme.

Mentre la versione gratuita di Figma offre più che sufficiente per qualsiasi designer standard, un abbonamento Figma Professional ti consente di invitare compagni di squadra, lavorare dalle librerie del team, avere accesso a file Figma illimitati e cronologia delle versioni e altro ancora, per $ 12 al mese per editor. Se sei uno studente o un educatore, puoi ottenere Figma Professional gratuitamente.

Come usare Figma: le basi

Sia che utilizzi l’app Figma o la versione del browser, puoi seguire facilmente.

Quando apri Figma, ti verranno presentate le opzioni per avviare un nuovo file Figma, un nuovo file FigJam o importare un file creato in un altro programma, come Sketch o Adobe XD. Se hai già utilizzato Figma, vedrai anche i tuoi precedenti progetti Figma che puoi aprire e su cui lavorare.

Navigazione nell’area di lavoro di Figma

L’apertura di un nuovo file inizialmente sembra poco interessante. A differenza di molti altri programmi di progettazione, non si inizia con la tavola da disegno o la tela, ma con una pagina di progettazione completamente vuota. Ma con una mente piena di ispirazione, non rimarrà a lungo uno spazio vuoto.

Il menu orizzontale in alto a sinistra inizia con l’ icona del menu principale , il logo Figma. Selezionando il menu principale, puoi navigare verso gli altri file, le azioni rapide di Figma, le opzioni tipiche dei file e l’accesso a plug-in, widget e librerie.

Successivamente, troverai lo strumento Sposta ( V ), con lo strumento Scala ( K ) annidato sotto di esso. Questi strumenti servono per spostare elementi o ridimensionare parti del tuo progetto verso l’alto o verso il basso. E a destra di questi strumenti, vedrai gli strumenti Region, Frame ( F ), Section e Slice , annidati insieme.

In Figma, una cornice è ciò che altri programmi possono chiamare una tavola da disegno o una tela. Seleziona Cornice per disegnare la tua tela di dimensioni personalizzate. Se selezionato, il menu a destra presenterà opzioni di frame predefinite per le dimensioni dei dispositivi comuni: smartphone, tablet, desktop, smartwatch, presentazioni e opzioni di social media. Puoi anche fare clic e trascinare direttamente la cornice per renderla di qualsiasi dimensione personalizzata.

Tornando al menu in alto a sinistra, a destra degli strumenti Area ci sono gli strumenti Forma , gli strumenti Penna e lo strumento Testo . Seguito, quindi, da Risorse – Componenti , Plugin e Widget – e dallo strumento Mano per spostarsi all’interno del file. E infine, lo strumento Commenti , ottimo per prendere appunti e collaborare con i compagni di squadra.

Il menu Design Figma

Con una cornice disegnata, selezionandone il titolo si attiva la cornice, pronta per il disegno. Il menu a destra mostra i titoli per Design , Prototype e Inspect . Come suggerisce il nome, l’opzione Design è il menu che utilizzerai per progettare gli elementi sulla tua cornice.

Sebbene il menu Design iniziale sia alquanto semplicistico, man mano che aggiungi più elementi al tuo design, le opzioni del menu si evolvono. Inizialmente, il menu viene eseguito dall’alto verso il basso con strumenti di allineamento, strumenti di ridimensionamento, layout automatico , griglia di layout , livello , riempimento , traccia , effetti ed esportazione . Alcuni di questi sono ridotti a icona per impostazione predefinita, ma facendo clic sul segno + , puoi aprire qualsiasi menu o premere – per ridurlo a icona.

Dopo aver disegnato la cornice principale per il progetto, puoi utilizzare gli strumenti Forma o Penna per disegnare forme o aggiungere segnaposti immagine e puoi aggiungere testo utilizzando lo strumento Testo come probabilmente hai fatto in altri software.

Una volta che hai forme o testo sulla cornice, usa le varie opzioni del menu a destra per modificare e progettare quegli elementi. Il menu Livello offre modalità di opacità e fusione; con Fill puoi aggiungere colore o inserire immagini con alcune funzioni di modifica come Esposizione , Contrasto , Temperatura e altro.

Man mano che crei più elementi nel tuo progetto, i livelli si formeranno nel menu Livelli a sinistra accanto alla scheda Risorse . Puoi fare doppio clic sul titolo di un livello per trovare l’elemento e viceversa; puoi fare doppio clic su un elemento di progettazione per trovare il livello evidenziato. Facendo doppio clic sui titoli è possibile rinominarli per un’organizzazione ottimale.

Il menu del prototipo Figma

A destra dell’opzione di menu Design c’è il menu Prototipo . Dopo aver finalizzato gli aspetti visivi del tuo progetto e aver impostato le caselle di immagini e il testo dove dovrebbero andare, puoi utilizzare gli strumenti del prototipo per aggiungere animazioni e transizioni ai tuoi progetti.

Il menu Prototipo consente di collegare tra loro strutture o componenti come transizioni. Puoi scegliere quale ordine e come ogni fotogramma passa a un altro.

Funziona alla grande se stai realizzando una presentazione Figma che si anima da una diapositiva all’altra, ma lo strumento ti consente anche di visualizzare sapientemente animazioni per pulsanti o menu per app e web design. Puoi aggiungere più transizioni per pagina per tutte le cose diverse, così puoi vedere come gli utenti interagirebbero con il tuo sito web quando è attivo.

Sebbene utilizzare Figma per progettare un sito Web non sia la stessa cosa che creare un sito Web live, puoi consegnare il tuo design Figma al tuo team di sviluppo che può ricreare le interazioni del tuo prototipo come progetti di animazione della vita reale per il tuo sito Web. Ciò significa che puoi passare da una pagina all’altra in base a clic, tempo o altre interazioni.

Iniziare con Figma è facile

Ora sai come navigare nel layout di Figma e come funzionano gli strumenti di progettazione e prototipo di base. Dato che Figma è così facilmente accessibile, è ora di andare ad armeggiare con questo strumento di progettazione e vedere cosa puoi creare.