È ormai evidente che lo sviluppo frontend contemporaneo non può prescindere da una progettazione dell’esperienza utente. Come abbiamo spiegato in altri post, lo User Experience Design (spesso abbreviato come UX) consiste nello studio dell’interazione tra l’utente finale e un prodotto. Lo scopo dell’analisi è di facilitare l’utilizzo di quest’ultimo e di offrire un’esperienza quanto più corrispondente alle reali necessità degli utilizzatori.

A questo si affianca lo User Interface Design, ovvero l’elaborazione di prototipi che simulino le interfacce e il flusso di utilizzo dei prodotti digitali.

Questi processi richiedono però degli strumenti adeguati. Negli ultimi anni, il panorama dei software per la creazione di UI e Design System è letteralmente esploso, offrendo molte soluzioni: dal precursore Sketch ai più giovani Origami, Adobe XD e Figma. In Zelando abbiamo da anni scelto di utilizzare quest’ultimo, per una lunga serie di vantaggi a cui ormai non potremmo rinunciare. 

Figma è infatti un software estremamente flessibile. Ha un’ampia varietà di funzioni ed è facile da usare, il che lo rende perfetto sia per principianti sia per utenti esperti. Tra i suoi utilizzi troviamo:

• il disegno di interfacce grafiche;
• la creazione, il mantenimento e l’utilizzo trasversale su più progetti di un Design System;
• la progettazione di flussi e interazioni tra le pagine di un software;
• la realizzazione di contenuti interattivi e animazioni;
• l’editing vettoriale di illustrazioni, loghi, icone e altri elementi grafici.

Queste capacità hanno fatto sì che Figma si affermasse negli anni come il software de facto per la gestione dei Design System lato designer, con feature che ricalcano il comportamento del css (come l’auto layout), con la possibilità di gestire componenti con proprietà condivise tra più file e infine la creazione di flow che simulano task di utilizzo tipici di un’interfaccia.

Dal concept al prodotto

Oltre alla sua versatilità, ciò che ha reso Figma così prezioso per Zelando è la grande spinta verso la capacità di editing collaborativo. Funzione che lo rende perfetto per il lavoro di squadra. Più utenti possono infatti lavorare sullo stesso documento contemporaneamente: i nostri designer possono creare congiuntamente file e asset con interazioni, mentre un sistema di commenti e voice-chat integrati consente ai membri del team di scambiarsi velocemente feedback sui progetti.

Inoltre, Figma semplifica enormemente la comunicazione tra designer e developer. I link dei file vengono infatti condivisi con gli sviluppatori, che hanno accesso completo ai dati di stile come formattazione, colori, allineamenti, padding e molto altro, in modo da creare interfacce il più fedeli possibile ai prototipi.

Inoltre, i file Figma possono essere esportati in un’ampia varietà di formati, inclusi SVG, PNG e JPG per semplificare la condivisione delle proprie creazioni.

Progettare per più schermi ed utilizzi

Con Figma, progettare responsive design e layout adattivi è facile, grazie ad un sistema di layout griglia integrato che semplifica la creazione di componenti adattabili a diversi schermi e dispositivi. 

Inoltre, la vastissima community ha prodotto negli anni una grande varietà di plugin e file di componenti. Questi moduli semplificano la vita di ogni professionista e ne velocizzano il workflow. Per citarne giusto alcuni, Figma Tokens permette ad esempio di generare in automatico file .json di design token come colori e tipografia. Grazie a questi gli sviluppatori e possono generare velocemente variazioni di temi degli stessi componenti. La suite di Stark consente invece una serie di funzionalità per il controllo dell’accessibilità dei design creati, ad esempio con verifiche sui contrasti cromatici. 

Il punto spinoso: Figma e Adobe

L’acquisizione di Figma da parte di Adobe delle scorse settimane è stata certamente accolta con scetticismo da una larga fetta della community del design. Adobe, a seguito del mancato successo di XD, con l’acquisizione di Figma si propone come gigante anche nel settore dei software per lo UI design, andando quindi a rivaleggiare con i sopracitati Sketch, Origami e simili.

Dal canto suo, Figma non potrà che guadagnare dalla partnership con il gigante del CAD – sperando che non vada ad intaccare eccessivamente le sue policy su collaborazione, pricing e sviluppo trasparente che tanto l’hanno reso famoso e apprezzato negli anni. 

In Zelando siamo assolutamente favorevoli a qualsiasi partnership che possa portare esiti favorevoli per tutti gli attori in gioco: restiamo quindi in attesa di sviluppi nella questione dell’acquisizione di Figma. 

Un investimento per risparmiare

In Zelando crediamo che sia necessario dare valore agli strumenti e alle piattaforme che utilizziamo quotidianamente, soprattutto quelli che semplificano il lavoro e dimezzano il time to market dei nostri prodotti.

Così come abbiamo fatto per Vue, Flutter e altri prodotti, continueremo a parlarvi di tutti gli strumenti che potenziano il nostro lavoro ogni giorno, sperando di darvi qualche spunto e, perché no, magari ricevere nuovi suggerimenti. 

P.S. Tutte le grafiche dei post LinkedIn e dello ZBlog vengono create con Figma!