Figma vs. Sketch vs. Axure: una revisione basata sulle attività

In una recente infografica di Toptal: "I migliori strumenti UX", abbiamo esaminato l'ampia gamma di strumenti di progettazione digitale sul mercato, la maggior parte dei quali è in grado di assistere nelle attività quotidiane del singolo designer UX.

Tre degli strumenti presenti, Sketch, Figma e Axure, hanno generato seguaci fedeli perché eccellono in lavori specifici all'interno del flusso di lavoro di progettazione UX.

Tuttavia, le prestazioni di questi strumenti variano a seconda dell'attività di progettazione in corso . Invece di elencare tutte le loro caratteristiche in una tabella di confronto, ne determineremo l'efficacia con una revisione basata sulle attività.

Ecco una rapida panoramica dei concorrenti:

• Schizzo di Bohemian Coding con sede a L'Aia, NL. Sketch è un'applicazione solo per Mac.
• Figma di Figma con sede a San Francisco, California. Figma funziona su qualsiasi sistema operativo tramite un browser.
• Axure di Axure Software Solutions con sede a San Diego, California. Axure ha una versione per Windows e Mac.

Assegneremo un punteggio a ogni strumento in base a quanto bene esegue le attività di progettazione quotidiane immediatamente, senza plug-in, componenti aggiuntivi o app di terze parti. I compiti includono:

1. Fare l'ideazione di concetto
2. Creazione di risultati a bassa fedeltà
3. Creazione di risultati ad alta fedeltà
4. Creazione di prototipi interattivi
5. Creazione di un sistema di progettazione
6. Consegnare allo sviluppo

Nota: quando gli strumenti hanno caratteristiche quasi identiche necessarie per completare un'attività, la vittoria andrà allo strumento che è più facile da usare e fornisce una consegna più rapida. Se quella determinazione sembra troppo vicina per essere chiamata, il supporto di terze parti è il pareggio.

Compito: fare l'ideazione concettuale

L'ideazione è un processo creativo per generare nuove idee e di solito è svolto da gruppi interdisciplinari composti da designer, sviluppatori, proprietari di prodotti e project manager.

L'obiettivo è creare nuove idee da utilizzare in un prodotto dopo aver considerato i requisiti di base e qualsiasi lavoro già in costruzione. Ad esempio, un team può sottoporsi a una sessione di ideazione concettuale per creare una serie di funzionalità MVP per una nuova app o funzionalità di nuova generazione in un'app esistente.

Molti designer realizzano l'ideazione concettuale su una lavagna o su un foglio. Tuttavia, l'ideazione avviene anche digitalmente, soprattutto negli uffici distribuiti. La generazione di concetti è uno sport di squadra e include non designer come proprietari/gestori di prodotti e sviluppatori front-end. Gli strumenti che promuovono la collaborazione e sono facili da usare sono i migliori per questo compito.

Vincitore: Figma

Sketch e Axure offrono entrambi servizi di condivisione cloud, ma non c'è modo di condividere gli schermi in tempo reale con i collaboratori.

I file condivisi in Figma possono essere uniti in tempo reale e viene visualizzato il cursore etichettato di ogni partecipante. Un clic sugli avatar rappresentativi nella barra degli strumenti consente di passare dalla vista alla prospettiva di quella persona, semplificando la condivisione rapida di un'idea. Inoltre, Figma non richiede ai non designer di possedere una copia; aprono il collegamento al file e iniziano a lavorare.

Altri strumenti di collaborazione con la lavagna potrebbero essere più adatti per l'ideazione concettuale rispetto a Figma, come Mural e Realtimeboard, ma per uno strumento di progettazione, Figma è meglio di Sketch e Axure di un miglio.

Compito: creazione di risultati finali a bassa fedeltà

I risultati finali a bassa fedeltà sono generalmente prodotti come wireframe o schizzi digitali che possono essere distribuiti e rivisti da altri designer e proprietari di prodotti. A seconda del processo di UX, possono essere visualizzati anche da sviluppatori e altre parti interessate.

I wireframe hanno lo scopo di mostrare la struttura di base di un'app in modo che il modello di interazione possa essere definito prima di dedicare tempo alla creazione di modelli ad alta fedeltà.

La creazione di wireframe a bassa fedeltà può essere eseguita da strumenti specificamente dedicati all'attività, inclusi Balsamiq Mockups, Moqups e FluidUI. Tuttavia, Sketch, Axure e Figma possono svolgere tutti la stessa attività, specialmente quando gli utenti creano librerie di componenti wireframe.

Poiché i wireframe di solito fungono da layout dell'interfaccia utente iniziale per un'app o una pagina, sono tagli approssimativi monocromatici che cambiano spesso. Questo aiuta a tenere sotto controllo le aspettative degli stakeholder.

Per i wireframe, la facilità d'uso, la velocità di consegna e la modifica sono essenziali perché consentono ai progettisti di produrre modelli di varianti in modo efficiente.

Vincitore: Axure

Axure vince qui perché ha componenti preconfezionati per il wireframing subito dopo l'installazione del software. Sketch e Figma hanno gli strumenti che ti consentono di creare wireframe, ma devi disegnare un componente wireframe o scaricare un file che li contenga. In entrambi i casi, devono essere integrati in una libreria di simboli (Sketch) o componenti (Figma) per essere trascinati come i componenti Axure.

Axure ha molte librerie di terze parti per la creazione di risultati finali a bassa fedeltà e Sketch ha una moltitudine di file gratuiti ea pagamento che possono essere scaricati, mentre le risorse pubbliche di Figma sono ancora alle prime armi.

Una volta che un progettista ha creato le librerie di componenti wireframe, i tre strumenti vengono abbinati in modo uniforme. Si noti che i componenti di Axure possiedono proprietà parametriche e regolabili, ma per i wireframe statici, tutti e tre gli strumenti funzionano bene quando le librerie sono disponibili.

Compito: creazione di risultati finali ad alta fedeltà

I risultati finali ad alta fedeltà nascono dal feedback e dagli apprendimenti raccolti dai wireframe a bassa fedeltà. Sono modelli che mostrano colore, dettagli visivi e progetti finali proposti per un'app.

Alta fedeltà significa anche prototipi dello schermo pronti per la presentazione e mostrati a clienti, dirigenti interni e altre parti interessate non di design. Gli strumenti di progettazione che eccellono in questo compito hanno tutte le caratteristiche necessarie per aggiungere la raffinatezza necessaria per creare una rappresentazione dei risultati finali rivolti al cliente finale.

Ciò include il controllo su riempimenti e tratti degli oggetti, l'aggiunta di effetti come ombre e riempimenti sfumati e l'esportazione di disegni in un formato facilmente digeribile (png, pdf, jpg).

Vincitore: Figma

Sketch e Figma hanno set di strumenti quasi identici che possono creare modelli ad alta fedeltà, ma il modello di interazione di Figma è più raffinato e lo strumento è più facile da usare fin dall'inizio. Entrambi gli strumenti hanno un facile accesso alla modifica avanzata e ai comandi booleani come Unisci, Interseca, Unione e Sottrai. Sebbene il supporto del plug-in di Sketch consenta a terze parti di creare funzionalità aggiuntive, questi strumenti non sono disponibili immediatamente dopo l'installazione.

Tutti e tre gli strumenti hanno funzionalità che consentono la creazione di oggetti personalizzati, ma Axure rende alquanto difficile l'accesso ai comandi. Le modifiche sopra menzionate non sono disponibili sulla barra degli strumenti. L'accesso si ottiene solo tramite il menu contestuale quando sono selezionati più oggetti.

Inoltre, le reti vettoriali di Figma rendono il lavoro con gli strumenti di linea un gioco da ragazzi.

Compito: creazione di prototipi interattivi

I prototipi interattivi possono essere grezzi come un prototipo di carta o dettagliati come una versione ramificata di un'app esistente che è stata modificata per esplorare nuove funzionalità. In genere, i prototipi interattivi consentono agli utenti di navigare da uno schermo all'altro e di utilizzare funzionalità come menu ed elenchi.

Per molti designer, una presentazione interattiva di base sarà sufficiente per presentare il proprio lavoro. Ciò è particolarmente vero per le app mobili poiché le semplici transizioni forniscono un'interazione del dispositivo sufficiente per spiegare il design.

Il modello di prototipazione di Figma è ben integrato e semplice da usare e, poiché è un'app basata su cloud in tempo reale, non è necessario aggiornare le pagine HTML quando un file viene aggiornato.

Occasionalmente, le parti interessate desiderano connessioni dati in tempo reale per caricare un prototipo con dati del mondo reale al fine di testare la scalabilità di un progetto, ma la stragrande maggioranza dei progettisti ora ha poco bisogno di prototipi complessi.

Vincitore: Figma

Sketch e Figma supportano entrambi la prototipazione semplice con il collegamento "da oggetto a tavola da disegno" e un insieme limitato di transizioni. I plug-in aiutano a rafforzare le semplici capacità di prototipazione di Sketch, ma Axure è il più potente quando si tratta di fornire un solido modello di interazione per i prototipi.

Compito: creazione di un sistema di progettazione

I sistemi di progettazione, sebbene relativamente nuovi nel dominio della progettazione UX, esistono da decenni. Includono un linguaggio di progettazione condiviso, componenti, risorse e linee guida che consentono ai team di collaborare e prendere decisioni migliori. Una libreria del sistema di progettazione viene solitamente implementata come un sito Web e funge da unica fonte di verità per un prodotto in un'intera azienda.

Vincitore: Figma

Sebbene le librerie di componenti possano essere create in uno qualsiasi dei programmi, nessuno di essi consente ai progettisti di attivare un interruttore e produrre una libreria di componenti praticabile all'inizio. Axure può generare una pagina HTML con componenti personalizzati, ma non c'è modo di interrogare il singolo componente per scoprire il valore del colore, la dimensione e altre proprietà.

Costruire un sistema di progettazione utilizzando uno di questi strumenti è ancora un processo manuale. Tuttavia, ci sono plug-in per Sketch (come il plug-in Material Design recentemente rilasciato da Google) e almeno uno strumento di terze parti in lavorazione per Figma.

Figma vince perché la collaborazione è al centro di un buon sistema di progettazione. I dipendenti dell'azienda di diverse discipline (design, sviluppo, qualità, contenuto) devono accedere a una libreria del sistema di progettazione e molti verranno aggiunti al file del componente di progettazione che si sincronizza con la libreria condivisa. Figma può essere utilizzato da chiunque, non solo da un titolare di licenza, rendendo indolore l'accesso e l'aggiunta a un file condiviso.

Compito: consegnare allo sviluppo

Quando i progettisti dell'interfaccia utente hanno terminato la creazione di un'interfaccia, è loro responsabilità trasferire i file di progettazione agli sviluppatori in modo che il progetto possa essere completato. Ma un trasferimento è più di un semplice scambio di dati, è un'opportunità per i designer di comunicare la logica del loro lavoro e quindi aiutare gli sviluppatori a coniugare forma e funzione.

Esistono dozzine di metodi di trasferimento e ancora più strumenti di terze parti per facilitare il redlining e le query di informazioni sugli oggetti da file Sketch e Figma (vedi Avocode e Zeplin). Tuttavia, in questo confronto, esaminiamo lo strumento di progettazione originale prima che venga integrato con plug-in o altre app.

È interessante notare che l'ascesa dei sistemi di progettazione UX mitiga la necessità di questa forma di trasferimento, poiché le librerie di componenti pubblicate sono l'unica fonte di verità per lo sviluppatore. Possono estrarre il layout esatto dei componenti e le informazioni di progettazione senza attendere un deliverable o una consulenza UX.

Inoltre, ottenere informazioni dagli oggetti in un file di progettazione può essere utile durante la costruzione di un sistema di progettazione, quindi una visione del CSS è una buona cosa.

Sketch ti consente di selezionare oggetti e utilizzare un menu contestuale per "Copia attributi CSS", ma non è l'ideale. Figma fa un buon lavoro fornendo una scheda "Codice" nel pannello delle proprietà che produce valori CSS, iOS o Android per oggetti selezionati (gli sviluppatori possono utilizzare questa funzione in modalità di sola visualizzazione o prototipo).

Vincitore: Axure

Al momento, solo Axure dispone di potenti "generatori" che producono file HTML completamente pubblicabili, specifiche di Word e persino report in formato CSV da importare in un foglio di calcolo. Sebbene i risultati non siano una libreria di design, l'app fornisce utili materiali per il trasferimento degli sviluppatori.

Il vincitore assoluto dello strumento di progettazione: Figma

In base ai numeri, Figma è il vincitore di questo confronto, principalmente per la sua natura collaborativa e la disponibilità multipiattaforma. Poiché sempre più team utilizzano sistemi di progettazione che richiedono una più stretta integrazione tra lo sviluppo e la progettazione front-end, la collaborazione in tempo reale e la funzionalità di incorporamento live di Figma offrono un grande vantaggio. Sul lato negativo, Figma è un'applicazione online di cui potrebbe essere vietato l'uso in un'azienda per motivi di sicurezza.

Axure occupa il secondo posto grazie alla sua forza pronta all'uso con componenti predefiniti, potenti funzionalità di prototipazione interattiva e generazione di documenti. Nel caso più raro in cui un'azienda deve accedere ai datastore del mondo reale per vedere come si comporta una particolare funzionalità, Axure è l'opzione migliore o l'unica.

Sketch potrebbe essere arrivato per ultimo, ma una volta che gli utenti sfruttano i numerosi plug-in e le risorse disponibili per lo strumento, è estremamente potente e può essere personalizzato per soddisfare le esigenze di un gruppo di progettazione. L'avvertenza qui è che i plug-in devono essere aggiornati dopo ogni aggiornamento di Sketch e, poiché è un'applicazione solo per Mac, le aziende che utilizzano PC Windows non possono utilizzarla.

Tutti e tre gli strumenti esaminati in questo articolo sono potenti di per sé. Tuttavia, ognuno ha dei limiti. Spetta ai singoli designer e team identificare le proprie esigenze di flusso di lavoro, valutare i pro ei contro di ciascun programma e fare la scelta appropriata.

Ulteriori letture sul blog di Toptal Design:

• Abbandona gli MVP, adotta prototipi minimi vitali (MVPr)
• Il potere di Figma come strumento di progettazione
• Come creare una guida allo stile di schizzo, una libreria e un kit dell'interfaccia utente
• Comprendere i sistemi e i modelli di progettazione
• Morte al Wireframe. Direttamente all'alta fedeltà!