Il potere di Figma come strumento di progettazione

Figma è uno strumento di progettazione basato su cloud simile a Sketch per funzionalità e caratteristiche, ma con grandi differenze che rendono Figma migliore per la collaborazione in team. Per gli scettici su tali affermazioni, spiegheremo come Figma semplifica il processo di progettazione ed è più efficace di altri programmi nell'aiutare designer e team a lavorare insieme in modo efficiente.

Diamo un'occhiata più da vicino.

Figma funziona su qualsiasi piattaforma

Figma funziona su qualsiasi sistema operativo che esegue un browser web. Con Figma è possibile utilizzare Mac, PC Windows, macchine Linux e persino Chromebook. È l'unico strumento di progettazione del suo tipo che esegue questa operazione e, nei negozi che utilizzano hardware con sistemi operativi diversi, tutti possono comunque condividere, aprire e modificare file Figma.

In molte organizzazioni, i progettisti utilizzano i Mac e gli sviluppatori utilizzano i PC Windows. Figma aiuta a riunire questi gruppi. La natura universale di Figma previene anche il fastidio di PNG-pong (dove le immagini aggiornate vengono rimbalzate avanti e indietro tra le discipline del team di progettazione). In Figma non c'è bisogno di un meccanismo di mediazione per mettere a disposizione di tutti il ​​lavoro di progettazione.

La collaborazione in Figma è semplice e familiare

Poiché Figma è basato su browser, i team possono collaborare come farebbero in Google Docs. Le persone che visualizzano e modificano un file vengono visualizzate nella parte superiore dell'app come avatar circolari. Ogni persona ha anche un cursore con nome, quindi tenere traccia di chi sta facendo ciò che è facile. Facendo clic sull'avatar di qualcun altro si ingrandisce ciò che stanno visualizzando in quel momento.

La collaborazione sui file in tempo reale aiuta a mitigare la "deriva del design", definita come interpretazione errata o allontanamento da un progetto concordato. Il design drifting di solito si verifica quando un'idea viene concepita e implementata rapidamente mentre un progetto è in corso. Sfortunatamente, questo spesso porta a deviare dal design stabilito, causando attriti e rilavorazioni.

Utilizzando Figma, un responsabile della progettazione può effettuare il check-in per vedere cosa sta progettando il team in tempo reale semplicemente aprendo un file condiviso. Se un designer in qualche modo interpreta erroneamente il brief o la storia dell'utente, questa funzionalità consente al responsabile del design di intervenire, correggere la rotta e risparmiare innumerevoli ore che altrimenti sarebbero state sprecate. (In confronto, i team che utilizzano Sketch non hanno un modo immediato per sapere se i designer si stanno perdendo.)

Nota a margine: ad alcuni designer non piace essere "spiati" quando lavorano, quindi spetta al responsabile del design spiegare i vantaggi. In generale, la maggior parte dei designer vede rapidamente il valore di tale funzionalità e si adatta facilmente a lavorare in un ambiente condiviso.

Figma utilizza Slack per la comunicazione di squadra

Figma utilizza Slack come canale di comunicazione. Quando un canale Figma viene creato in Slack, tutti i commenti o le modifiche al design apportate in Figma vengono "allentati" per il team. Questa funzionalità è fondamentale durante la progettazione dal vivo perché le modifiche a un file Figma aggiorneranno ogni altra istanza in cui il file è incorporato (un potenziale mal di testa per gli sviluppatori). Le modifiche a un mockup, garantite o meno, vengono immediatamente controllate e il canale di feedback è attivo.

La condivisione di Figma è semplice e flessibile

Figma consente anche la condivisione basata sulle autorizzazioni di qualsiasi file, pagina o cornice (chiamata tavola da disegno in altri strumenti di progettazione). Quando viene creato un collegamento di condivisione a un frame su una pagina, la persona che fa clic su quel collegamento aprirà una versione browser di Figma e verrà caricata una vista ingrandita del frame.

Questa forma di condivisione selettiva, dal file al frame, consente a designer, proprietari di prodotti e sviluppatori di condividere esattamente ciò che è necessario negli strumenti di rilevamento dei bug e nei software della community come Confluence o SharePoint.

I file Figma incorporati forniscono l'aggiornamento in tempo reale

Figma condivide anche frammenti di codice di incorporamento live per incollare un iFrame in strumenti di terze parti. Ad esempio, se Confluence viene utilizzato per visualizzare file mockup incorporati, tali file non vengono "aggiornati" salvando un file Figma: quei file incorporati SONO il file Figma.

Se viene apportata una modifica al mockup da qualcuno in Figma, tale modifica può essere vista dal vivo nel mockup di Confluence incorporato. (Puoi leggere di più sull'integrazione di Figma e Confluence qui.)

L'effetto di questa funzionalità sul processo UX è illustrato nel diagramma seguente:

Prima di Figma, venivano utilizzati diversi altri strumenti per facilitare lo scambio di modelli e aggiornamenti di progettazione. Il ciclo di iterazione consisteva in una serie di aggiornamenti di file avanti e indietro, in modo che i team potessero rivedere e implementare il progetto attuale.

Dopo Figma, gli strumenti di terze parti non sono più necessari (ma potrebbero essere utilizzati se lo si desidera). Poiché Figma gestisce la funzionalità degli strumenti di terze parti descritti in precedenza, c'è solo un passaggio nel processo: passa dagli schizzi a Figma e tutti i gruppi hanno gli ultimi modelli. Non c'è alcun "handoff" nel senso più stretto della parola.

Figma è ottimo per il feedback sulla revisione del design

Figma supporta i commenti in-app sia in modalità di progettazione che di prototipazione e il thread dei commenti viene tracciato in Slack e/o e-mail. Non è necessario pubblicare file PNG o eseguire aggiornamenti costanti per ottenere feedback da un team utilizzando uno strumento di terze parti come InVision o Marvel.

Durante le revisioni del design, i designer del team possono discutere il loro lavoro su un grande schermo, registrare commenti e risolvere problemi, tutto in Figma. Questa forma di feedback in tempo reale non è possibile con Sketch, che richiede il caricamento su un servizio cloud per ottenere l'input del team.

L'handoff dello sviluppatore è facilitato utilizzando Figma

Figma visualizza frammenti di codice su qualsiasi frame o oggetto selezionato nei formati CSS, iOS o Android che gli sviluppatori possono utilizzare durante la revisione di un file di progettazione. I componenti di progettazione possono essere ispezionati da qualsiasi sviluppatore in qualsiasi file che può visualizzare. Non è necessario utilizzare uno strumento di terze parti per ottenere le informazioni. Anche così, Figma ha la piena integrazione con Zeplin se i team vogliono fare qualcosa di più della semplice misurazione e visualizzazione CSS.

I file di progetto Figma risiedono in un unico posto: online

Poiché Figma è un'app online, gestisce l'organizzazione dei file visualizzando i progetti e i relativi file in una vista dedicata. Figma supporta anche più pagine per file, come Sketch, in modo che i team Agile possano organizzare i loro progetti in modo logico:

• Creare un progetto per il tema della funzione.
• Crea un file per una funzione epica o di grandi dimensioni.
• Crea pagine in quel file per ogni user story .

Questo è solo un metodo per organizzare i file che possono essere resi più o meno granulari a seconda di ciò che il processo richiede.

Le API Figma forniscono l'integrazione di strumenti di terze parti

Figma ora dispone di API per sviluppatori per consentire una vera integrazione con qualsiasi app basata su browser. Le aziende lo stanno utilizzando per integrare la visualizzazione in tempo reale dei file di progettazione nelle loro app. Ad esempio, Uber ha schermi di grandi dimensioni che mostrano file di progettazione "in diretta" in giro per la loro azienda. I progetti sono condivisi e il feedback è il benvenuto da parte di chiunque nell'azienda.

Il software JIRA di Atlassian ha implementato un componente aggiuntivo Figma in modo che i proprietari di prodotti, gli sviluppatori e gli ingegneri della qualità visualizzino sempre l'ultima versione di qualsiasi mockup dei designer.

Inoltre, l'API di Figma promette di soddisfare le richieste dei clienti per plug-in di terze parti e miglioramenti delle funzionalità già forniti da Sketch.

Il controllo delle versioni dei file è automatico o su richiesta

Qualsiasi incertezza sull'aggiornamento dei file live è ulteriormente mitigata dal sistema di controllo delle versioni integrato di Figma. In qualsiasi momento, un designer può creare una versione con nome e una descrizione di un file Figma; questo può essere fatto immediatamente dopo che le modifiche concordate sono state apportate a un progetto.

Il file live nell'ambiente condiviso non sarà interessato fino a quando le modifiche non verranno deliberatamente salvate nella versione originale. È anche possibile ripristinare le versioni salvate automaticamente per creare un duplicato o sovrascrivere l'originale.

La prototipazione in Figma è semplice e intuitiva

Mentre Sketch ha recentemente aggiunto la tavola da disegno alla prototipazione della tavola da disegno, Figma è andata oltre fornendo transizioni tra i fotogrammi. La semplice funzione di prototipazione di Figma elimina la necessità di un altro strumento che esegua la prototipazione in stile slideshow, come InVision o Marvel. Quando tutto ciò che serve è una semplice presentazione con transizioni, non è necessario esportare per rivedere gli strumenti.

I prototipi Figma possono essere distribuiti proprio come i file di progettazione Figma; chiunque abbia l'autorizzazione al collegamento può visualizzare e commentare un prototipo e, ancora una volta, quel feedback viene acquisito nel pannello dei commenti dello strumento e registrato in Slack. Gli sviluppatori possono vedere il flusso di lavoro di progettazione, lasciare @messages diretti ai progettisti e ottenere misurazioni e attributi CSS dall'interno del prototipo.

Le biblioteche del team di Figma sono ideali per i sistemi di progettazione

I sistemi di progettazione sono diventati una necessità per molte aziende e c'è bisogno di componenti (simboli in Sketch e Illustrator) che siano riutilizzabili, scalabili e "tokenizzati" per l'uso nelle librerie di modelli disponibili per UX designer e sviluppatori front-end.

La frase spesso usata "unica fonte di verità" si adatta qui: una volta creata una libreria del team Figma, chiunque abbia accesso a un progetto può utilizzare le istanze dei componenti nei propri progetti ed essere certo che stiano lavorando con le ultime versioni.

L'approccio di Figma alle librerie di componenti è semplice e facile da gestire. I progettisti possono creare file pieni di componenti o utilizzare componenti sulla pagina per organizzare una libreria di modelli. Ogni frame in una pagina Figma diventa la sezione organizzativa nella libreria del team (non è necessario creare gerarchie\come\questo).

Un modo per organizzare le biblioteche è avere un progetto dedicato esclusivamente ai componenti. I file all'interno di quel progetto possono essere organizzati secondo necessità e le pagine all'interno di quei file possono essere disposte di conseguenza.

Figma è costruito per migliorare il lavoro di squadra di progettazione

L'uso di Figma per un certo periodo di tempo dimostrerà i vantaggi di questo strumento di collaborazione dal vivo. Mantiene i team impegnati e incoraggia la piena divulgazione, essenziale quando si costruisce un sistema di progettazione per una varietà di discipline. Figma è facile da usare per chiunque su qualsiasi piattaforma e consente ai team di condividere rapidamente il proprio lavoro e le proprie librerie.

Gli esperti di design che utilizzano Figma dopo aver effettuato il passaggio da Sketch (i file di schizzo possono essere importati con parità in Figma) non sono delusi:

…trasforma completamente il modo in cui puoi lavorare con i tuoi colleghi e clienti – Semplifica la progettazione collaborativa con Figma

Figma ha unito il meglio di tutto nel mondo degli strumenti di progettazione dell'interfaccia utente negli ultimi anni: perché il tuo team di progettazione dovrebbe considerare di passare a Figma

Nell'ultimo anno, ho utilizzato Figma per il mio processo di progettazione UI/UX e mi ha fatto risparmiare ore di lavoro. Ha davvero trasformato il mio flusso di lavoro di progettazione: come ottimizzare il flusso di lavoro UI/UX con Figma

Il mio tempo trascorso a Figma è di solito la parte più divertente e produttiva della mia giornata: Figma sta trasformando il mio intero flusso di lavoro ed è fantastico!

• • •

Ulteriori letture:

• Padroneggia il tuo mestiere con questi migliori strumenti UX
• Semplifica la progettazione collaborativa con Figma
• Usa Craft by InVision per ottimizzare la collaborazione del team
• Morte al Wireframe. Direttamente all'alta fedeltà!
• Diventa un designer di livello mondiale trasformando il globo nel tuo ufficio