Da qualche tempo tra i professionisti di UI e UX design si è diffuso l’utilizzo di un nuovo software che semplifica diversi processi relativi alla progettazione di interfacce grafiche e prototipi. Si tratta di Figma, un software web-based che in breve tempo è diventato uno degli più popolari strumenti utilizzati da designer e creativi.
Cos’è figma e a cosa serve
Figma è un software online di design digitale che viene utilizzato per progettare interfacce utente (come per esempio mock-up e prototipi di siti web, app, interfacce software, ecc.) che possono anche diventare prototipi interattivi in grado di simulare l’utilizzo da parte degli utenti. Questi prototipi possono essere condivisi sia con la community che con i clienti, senza richiedere l’installazione offline del prodotto.
Perfetto per la progettazione di interfacce
Figma permette di lavorare sia con immagini raster che con immagini vettoriali. Con pochi click gli utenti possono comporre interfacce mettendo insieme forme, icone, testo, ecc. che possono essere modificati facilmente nelle loro proprietà (colore, dimensione, opacità, bordi e così via). Le toolbar, infatti, offrono strumenti per creare forme geometriche, pennelli che permettono di disegnare a mano libera, strumenti di testo per aggiungere testo formattato, strumenti di penna avanzati con curve di Bezier e operazioni booleane e molto altro.
Questi elementi possono essere raggruppati insieme formando componenti riutilizzabili come bottoni, barre di navigazione, ecc., che possono essere salvati in una libreria e utilizzati in tutto il progetto. I cambiamenti apportati a un componente si riflettono automaticamente in tutte le istanze di quel componente nel progetto, facilitando così la gestione della coerenza del design. Per esempio, se stiamo lavorando a delle interfacce web che condividono la stessa barra di navigazione, sarà possibile modificarla una solta volta e il programma automaticamente apporterà le modifiche a tutte le pagine che contengono la barra.
Prototipazione interattiva
Una volta create le interfacce, Figma permette di creare anche prototipi interattivi, che simulano l’utilizzo dell’interfaccia da parte dell’utente, e di collegare le schermate per creare un flusso di navigazione. I collegamenti iperterstuali tra i vari componenti sono facilissimi da creare: basta selezionare l’elemento e trascinare una freccia che parte da quest’ultimo e va a collegarsi ad un secondo componente.
Possono essere definite anche transizioni, animazioni e azioni come clic, swipe, hover, ecc. che aiutano a comprendere meglio il funzionamento che dovrebbe avere l’interfaccia al momento dell’effettiva implementazione.
I punti di forza
Una delle caratteristiche maggiormente apprezzate dagli utenti di Figma è quella di poter lavorare contemporeaneamente sullo stesso progetto, seguendo le modifiche in tempo reale, inserendo annotazioni, commenti, feedback e condividendo file e librerie con altri team.
Figma, inoltre, tiene traccia di tutte le modifiche che sono state apportate al progetto nel tempo, consentendo agli utenti di esplorare la cronologia delle modifiche e, se necessario, tornare a versioni precedenti.
Una funzione che ormai è diventata quasi indispensabile è poi quella che permette di allineare i vari elementi (così come accade con altri editor, come Canva): una volta cliccato su un componente, compaiono una serie di guide che permettono di ancorarlo con un allineamento preciso e definito all’interno del progetto.
Ma la caratteristica più importante di Figma è molto probabilmente la sua community, che mette a disposizione risorse e materiali che possono essere duplicati e modificati liberamente. Se, infatti, non si vuole perdere tempo, inziando un progetto da zero, si possono utilizzare le librerie di componenti già pronti.
Figma vs Adobe XD
Il principale concorrente di Figma è Adobe XD (non a caso, Adobe ha provato ad acquistare Figma, ma l’affare non è andato in porto). Rispetto ad Adobe XD, Figma è molto più intuitivo e facile da utilizzare, non richiede l’installazione di software sul proprio computer e ha un costo di abbonamento più contenuto (oltre ad essere gratuito nella versione base).
Adobe XD, invece, offre funzionalità più avanzate, come la creazione di animazioni e interazioni complesse, richiede un tempo maggiore di apprendimento, necessita dell’installazione del programma sul pc ed è più indicato per chi utilizza già altri prodotti Adobe.
