Mini Tutorial – Sfruttare le funzionalità di Figma per l'intero processo di progettazione

Il mondo degli strumenti di progettazione emergenti è incredibilmente eccitante. Nuovi programmi promettenti vengono lanciati in rapida successione, ma ce n'è uno in particolare che è lentamente diventato la scelta migliore per team di progettazione più grandi e per lo più distribuiti.

Figma ha il potenziale per supportare l'intero processo di progettazione end-to-end. I primi schizzi, la raccolta di feedback, la collaborazione, i prototipi pronti per il test e il trasferimento degli sviluppatori rientrano nelle sue capacità. Figma semplifica anche il lavoro dei product manager e dei design lead, nonché di tutte le altre parti interessate.

Quindi, cosa distingue Figma dalla concorrenza? Ci sono diversi aspetti chiave, ma tutti possono essere ricondotti al fatto che Figma è web-based. Ciò ha sollevato molte sopracciglia quando lo strumento è stato rilasciato per la prima volta, ma alla fine ha aperto la strada alla flessibilità e alle funzionalità uniche di Figma.

Che cosa è fondamentale per un processo di progettazione del prodotto senza intoppi?

Se è vero che ogni team e ogni progetto può avere un flusso di lavoro diverso, ci sono funzioni e fasi che sono componenti essenziali della progettazione e della gestione del prodotto. Figma copre ciascuno.

1. Accessibilità e collaborazione . Indipendentemente dagli strumenti utilizzati da un team, deve esserci un modo per lavorare insieme, presentare progetti, raccogliere feedback e tenere aggiornati gli stakeholder. Tutte queste funzionalità sono disponibili in Figma.
2. Flessibilità per iterare e produrre risultati finali . Figma è flessibile e può essere utilizzata come lavagna collaborativa per abbozzare idee iniziali e ripetere qualsiasi cosa, dai wireframe ai modelli ad alta fedeltà.
3. Capacità di costruire prototipi e test . Stai progettando un'app mobile? Costruisci e pubblica prototipi interattivi e testali direttamente su smartphone, tutto da Figma.
4. Stabilire un'unica fonte di verità . Figma è un ottimo modo per definire sistemi di progettazione del prodotto che risiedono completamente online. È un'unica fonte di verità per impostazione predefinita. Non dovrai più chiederti "È l'ultima versione?"
5. Passaggio regolare . Basta condividere un collegamento con gli sviluppatori e avranno accesso a tutte le informazioni necessarie per implementare il design: linee guida, misurazioni e risorse grafiche pronte per essere esportate.
6. Versatilità da personalizzare e migliorare . L'API dei plug-in di Figma consente ai team di scrivere i propri plug-in o attingere alla più ampia comunità di utenti ed estendere lo strumento con nuove funzionalità.

1. Accessibilità e Collaborazione

Porta la squadra a bordo

Diamo un'occhiata più da vicino a come Figma contribuisce alle sei aree chiave trattate sopra. I nuovi utenti potrebbero voler creare un account Figma gratuito, creare una squadra e guardare come iniziare con Figma. Una volta creato un team, invita i membri del team e le parti interessate a unirsi.

Sono disponibili tre livelli di accesso. È abbastanza autoesplicativo, ma di solito i diritti di modifica vengono concessi al team di progettazione e i diritti di visualizzazione a tutti gli altri. Ciò include sviluppatori e altre parti interessate che devono essere in grado di seguire il processo di progettazione e fornire feedback.

Opzioni di condivisione simili sono disponibili a livello di team (mostrato sopra), a livello di progetto e a livello di file. Se i livelli di accesso non sono specificati, si propagano dal team al progetto e dal progetto ai file.

Poiché Figma è disponibile nel browser, non importa come qualcuno sia invitato o su quale sistema si trovi. Finché il dispositivo e il browser che utilizzano soddisfano i requisiti minimi, possono accedere direttamente con un collegamento e l'interfaccia cambia a seconda che abbiano diritti di modifica o visualizzazione.

Incorporamento di un file di progetto

I file di progetto Figma possono essere incorporati in software di terze parti. Ad esempio, un documento Dropbox Paper condiviso può essere utilizzato per presentare lo stato attuale di un progetto.

Per incorporare i file di progetto, imposta la visibilità del file su Chiunque abbia il collegamento può visualizzare , copiare il codice di incorporamento e incorporare il file di progetto in qualsiasi software di terze parti che supporti embed.ly.

Feedback e revisioni

Un'altra funzionalità chiave per il processo di progettazione del prodotto è la capacità di distribuire progetti, raccogliere feedback e gestire le revisioni. Chiunque abbia un collegamento Figma può vedere l'ultima versione e commentare direttamente il punto su cui desidera fornire un feedback.

Per taggare i membri del team, usa il carattere @ e il sistema presenterà un elenco di nomi tra cui scegliere. In questo modo si avvisano i membri del team e, una volta elaborato il feedback, è possibile chiudere le discussioni facendo clic su Risolvi .

Per mantenere i team allineati, c'è una bella integrazione che può pubblicare discussioni dai file Figma in un canale Slack designato.

Collaborazione in tempo reale reale

Una delle funzionalità più intriganti di Figma è ciò che chiamano multiplayer . Consente a più membri del team di aprire e lavorare su un file di progettazione contemporaneamente. Tutti coloro che lavorano sul file sono visibili in alto a destra della pagina e i loro avatar sono nominati e cliccabili.

Può volerci del tempo per capire cosa questo significhi in termini pratici. Sebbene sia improbabile che i designer utilizzino il multiplayer per lavorare contemporaneamente sulla stessa parte di un file, è incredibilmente confortante non doversi preoccupare del conflitto tra versioni dei file, specialmente per i team distribuiti più grandi.

Il multiplayer è utile quando si presenta in remoto perché consente a tutti coloro che sono collegati al file di seguire il viewport del presentatore. Consente inoltre ai team di ignorare programmi aggiuntivi e utilizzare Figma come lavagna online (sebbene soluzioni specifiche, come Miro, alla fine potrebbero essere più adatte per il lavoro).

A tal fine, è consigliabile creare componenti personalizzati per replicare asset specifici come post-it virtuali o elementi di diagrammi.

2. La flessibilità di iterare e produrre risultati finali

Una volta che i membri del team sono stati invitati e sono in corso gli schizzi iniziali, Figma può essere utilizzato per iterare. Il motivo principale per cui Figma è stato creato è la progettazione dell'interfaccia: una volta completata la lavagna, i team possono passare a mappe di flusso e wireframe. Ancora una volta, è intelligente creare librerie di componenti che possono essere riutilizzate per queste attività. La collezione di modelli ufficiali fornisce ispirazione e arrangiamenti di design da cui partire.

3. La capacità di costruire prototipi e testare

È abbastanza facile creare prototipi interattivi con Figma. Quando un file Figma è aperto con diritti di modifica, è possibile passare dalla modalità di progettazione a quella di prototipazione. Una volta in modalità prototipo, è possibile cliccare su un elemento per renderlo interattivo, sia dallo stage che dalla barra laterale dei livelli.

Con un elemento selezionato in modalità Prototipo, sul lato appare un piccolo cerchio. Quando vengono trascinate, appaiono delle linee blu e possono essere rilasciate sullo schermo o sullo stato per mostrare il risultato dell'interazione.

In Figma sono disponibili transizioni comuni, rendendo molto più semplice creare prototipi ad alta fedeltà. In effetti, il team di Figma ha recentemente rilasciato una funzione intelligente di animazione e trascinamento. L'aspetto di animazione intelligente interpola il movimento di elementi simili, mentre il trigger di trascinamento è un nuovo tipo di interazione. Entrambi migliorano drasticamente la qualità dei prototipi interattivi.

Test utente

Ancora una volta, un collegamento è tutto ciò che serve per distribuire i prototipi Figma, anche per i test degli utenti. Facendo clic sulla piccola icona di riproduzione in alto a destra si avvia il prototipo e viene generato un nuovo URL. È possibile copiare l'URL o utilizzare il pulsante blu Condividi prototipo . Una volta che gli utenti aprono il collegamento, viene loro presentato un prototipo interattivo e possono lasciare commenti se lo desiderano.

Test su cellulare

I progetti per dispositivi mobili vengono presentati con un mockup di un dispositivo reale che circonda il prototipo. Se è necessario più realismo per testare l'interazione, è meglio scaricare l'app Figma Mirror per i test specifici del dispositivo.

4. Stabilire un'unica fonte di verità

Cronologia delle versioni

Non sarebbe fantastico se i file di progetto fossero sempre aggiornati e costantemente sottoposti a backup? Questa funzionalità è inclusa in Figma per impostazione predefinita. Ogni file viene salvato automaticamente mentre ci si lavora e Figma crea una nuova voce nella cronologia delle versioni dopo 30 minuti di inattività. Viene creato un registro di tutte le versioni salvate automaticamente e ogni versione può essere ripristinata se necessario.

Naturalmente, il controllo delle versioni automatico non è l'unica opzione per salvare il lavoro. È possibile salvare una versione manualmente o modificare una versione specifica nella cronologia delle versioni.

Sistemi di progettazione e librerie di componenti

Un altro aspetto in cui Figma brilla è il modo in cui consente ai designer di creare, organizzare e distribuire librerie di componenti. Qualsiasi file può essere pubblicato come libreria e ogni colore, stile del testo, effetto, griglia o componente è disponibile per essere utilizzato in altri file Figma.

Quando vengono apportate modifiche a qualsiasi elemento in una libreria, le modifiche possono essere pubblicate e propagate ai file che utilizzano tali elementi. I designer che lavorano su questi file possono quindi decidere di accettare o meno le modifiche.

La possibilità di decidere come distribuire le librerie, combinata con l'opzione di attivare o disattivare la visibilità o l'invisibilità degli elementi della libreria, rende l'intera esperienza fluida e potente.

I componenti e le librerie possono essere nidificati per creare sofisticati sistemi di progettazione in cui tutto è versionato e aggiornato per tutti i soggetti coinvolti. E tutti i componenti possono essere annotati con commenti.

5. Trasferimento fluido

Consegna dello sviluppatore

Con Figma, designer e sviluppatori non hanno bisogno di uno strumento separato, come Zeplin, per gestire il trasferimento. Possono semplicemente aprire i file e passare alla modalità Codice nella barra laterale destra, anche con accesso di sola visualizzazione.

Quando la modalità Codice è attiva, la selezione di un elemento sullo stage rivelerà tutte le informazioni rilevanti necessarie per l'implementazione e tutte le altre informazioni relative alla posizione dei componenti rispetto ad altri elementi saranno visibili. Come con soluzioni simili, il codice generato non è pensato per essere interamente copiato e incollato, ma è utile avere un accesso così facile.

6. La versatilità da personalizzare e migliorare

API Figma e plugin personalizzati

L'API e il sistema di plug-in di Figma consentono a un'ampia gamma di team di progettazione e discipline di personalizzare il programma in base alle proprie esigenze di processo specifiche. La flessibilità di Figma offre agli utenti la possibilità di interagire in modo programmatico con la piattaforma. Alcuni esempi:

Utilizzo di dati reali

È estremamente prezioso essere in grado di utilizzare dati reali in prototipi e prototipi e Figma lo rende possibile consentendo l'importazione di contenuti da fonti esterne. Sfruttando il contenuto reale, è possibile sottoporre a stress test i componenti di progettazione, mantenere aggiornati i modelli e coinvolgere team non correlati alla progettazione.

Un plug-in chiamato Google Sheets Sync è un perfetto esempio di cosa si può fare. Questo plugin semplifica l'integrazione di Fogli Google come fonte per popolare e sincronizzare il contenuto dei componenti nei file Figma.

Flussi di lavoro avanzati

La possibilità di ospitare un sistema di progettazione all'interno di un programma di progettazione dell'interfaccia utente è utile solo se il sistema è implementato in modo coerente negli schermi rivolti ai clienti. Per fortuna, ci sono API, plug-in e integrazioni Figma che possono aiutare.

Il componente aggiuntivo Storybook sincronizza i file Figma e mostra i componenti di design Figma in un pannello insieme ai componenti implementati. Un altro caso d'uso interessante è Figma to React Converter, un miglioramento del flusso di lavoro che converte i componenti Figma in codice.

Le caratteristiche di Figma sono ideali per l'intero processo di progettazione

Non esiste un unico programma di progettazione in grado di gestire le esigenze di ogni designer o problema di progettazione, e questa è una buona cosa. La concorrenza tra gli strumenti di progettazione è vantaggiosa per i designer. Garantisce che le aziende che producono i nostri strumenti ascoltino ciò di cui abbiamo bisogno e ci forniscano funzionalità aggiornate adatte ai lavori che svolgiamo.

Detto questo, Figma è uno strumento avanzato ma intuitivo che si è dimostrato più che in grado di affrontare l'intero processo di progettazione digitale. Sia i singoli designer che i team possono trarre vantaggio dalle sue esclusive funzionalità di collaborazione e iterazione e, laddove il programma non è all'altezza, un'ampia selezione di plug-in riempie il vuoto.

• • •

Ulteriori letture sul blog di Toptal Design:

• Il potere di Figma come strumento di progettazione
• Figma vs. Sketch vs. Axure: una revisione basata sulle attività
• Mini Tutorial – Lavorare con i componenti dei pulsanti Figma
• Padroneggia il tuo mestiere con questi migliori strumenti UX
• Progetta con precisione: una recensione di Adobe XD