Quale software per la prototipazione usare per migliorare la UX dei tuoi prodotti? – Prima di cominciare lo sviluppo vero e proprio di un prodotto è utile realizzare bozze e schizzi che devono riassumere il progetto finale.
Serve per creare la migliore esperienza utente possibile e risparmiare tempo e denaro su possibili problemi, che possono essere scovati proprio facendo dei prototipi.
Anche per la realizzazione della nostra piattaforma per la creazione di chatbot crafter.ai abbiamo prima creato un prototipo.
Noi ci siamo trovati bene con Figma e abbiamo realizzato questo recensione per capire i vantaggi di questo software.
Figma, la nostra esperienza con questo software per la prototipazione
Figma è lo strumento che usiamo per la progettazione e la prototipazione di interfacce. È disponibile fondamentalmente come applicazione web e ne esiste una versione desktop che non è altro che un clone (probabilmente Electron) della versione web. Si tratta di un prodotto relativamente recente (il primo rilascio è avvenuto nel 2016) che in un breve lasso di tempo è diventato un vero e proprio game changer. Vediamo perché.
1) Grafica vettoriale allo stato dell’arte
Figma offre un set di strumenti di disegno vettoriale che non ha nulla da invidiare ai tradizionali software desktop (es. Sketch, Adobe Illustrator, Affinity Designer, ecc.). Certo, la quantità di strumenti e opzioni offerte da questi ultimi non è paragonabile ma di contro, nella quotidianità del lavoro di progettazione grafica di interfacce ed esperienze utente è davvero poco realistico trovarsi ad aver bisogno di pennelli, mesh warping e simili. E avere a disposizione solo gli strumenti che effettivamente usi, alla lunga, diventa un vantaggio, non solo in termini di pulizia dell’interfaccia ma anche di produttività.
2) Componenti, istanze ed ereditarietà
Qui Figma comincia a staccare i competitor, strumenti basati su immagini raster come Invision compresi. In Figma, proprio come avviene con i moderni framework di sviluppo frontend, è possibile creare componenti riutilizzabili. Questi componenti possono essere istanziati tutte le volte che si renda necessario. Le singole istanze ereditano tutte le caratteristiche base del componente originale ma possono essere modificate a seconda delle esigenze. In pratica è sufficiente disegnare un componente “bottone” una volta sola ed adattare la singola istanza cambiandone il colore (es. stato success/warning/info/danger) o la forma. Le modifiche al componente originale si riflettono in tutte le sue istanze.Questa feature si rivela particolarmente potente anche e sopratutto in ottica di progettazione di design system completi.
3) Transizioni di pagina e microinterazioni animate
Le funzionalità di Figma relative alla prototipazione dell’interattività sono a nostro avviso un altro balzo in avanti rispetto ad altri prodotti simili. Attraverso un’interfaccia “a nodi” è possibile impostare transizioni di pagina, effetti di hover, scroll interni, elementi sticky, schermate in overlay, ecc. Ad ognuno di questi “cambi di stato” tra schermate o all’interno dei singoli elementi grafici può essere associata un’animazione, dalle semplici dissolvenze fino ad animazioni complesse come bounce o push in/out. A tutto questo va aggiunta una funzionalità di animazione automatica (Auto Layout) che consente a Figma di animare selettivamente componenti e grafiche a partire da uno stato iniziale e finale.
4) Questo software per la prototipazione permette simulazioni di device reali
I prototipi Figma possono essere visualizzati in maniera interattiva all’interno di un’interfaccia di presentazione dedicata, nella quale è possibile simulare il comportamento del progetto su device diversi. Figma offre una serie di preset che copre la maggior parte delle esigenze ma è comunque possibile configurare la propria presentazione a piacimento in caso di esigenze specifiche.
5) Export selettivi per i tuoi prototipi
Gli elementi grafici disegnati in Figma, siano essi componenti, istanze, semplici grafiche vettoriali, immagini raster o intere schermate, possono essere esportati nei più comuni formati (jpeg, png, svg, pdf) semplicemente selezionandoli e configurandoli per l’esportazione. I file in output risultano già ottimizzati per il web.
6) Generazione del codice CSS
Per ogni elemento delle varie schermate, come per le impostazioni di stile generale, Figma genera “al volo” il relativo codice CSS. Anche se in teoria è possibile esportare lo styling dell’intero prototipo ed utilizzarlo nel proprio progetto frontend, questa funzionalità si rivela particolarmente utile nei casi in cui serva recuperare del codice relativamente complesso come ombre, trasformazioni e simili.
7) Ecosistema di plugin
Trattandosi di un’applicazione web ed essendo quindi sviluppata tramite le tecnologie web di base (HTML, CSS e Javascript) Figma rende davvero semplice la realizzazione e la pubblicazione di plugin da parte di sviluppatori indipendenti. Tramite un’API dedicata è possibile avere accesso alle varie funzionalità core dell’applicazione come agli oggetti e alle interazioni presenti nei progetti. Quest’architettura ha portato in breve tempo alla nascita di un ecosistema di plugin che copre praticamente ogni caso d’uso immaginabile: qui qualche esempio (https://www.figma.com/community/explore).
8) Team e lavoro collaborativo
Da ultimo, ma non per ultimo, Figma offre una serie di strumenti collaborativi di prima classe. Tramite l’interfaccia è possibile creare team di lavoro, impostare Team Libraries di componenti e grafiche, condividere prototipi e presentazioni con clienti e collaboratori esterni, commentare direttamente sul prototipo e lavorare sullo stesso progetto a più mani ed in tempo reale.
