La prospettiva di un utente di Sketch sul passaggio a Figma

Tutto quello che devi sapere

Illustrazione creata per il blog Figma da Peter Barnaba

Nota dell'editor di Figma: di solito non inseriamo recensioni di Figma sul nostro blog, ma qui abbiamo fatto un'eccezione. Marco Pacifico ha spiegato i vantaggi del nostro strumento meglio di quanto avremmo potuto, quindi volevamo che il suo articolo (che appariva originariamente su Prototypr.io) fosse una risorsa per i nostri utenti. Grazie Marco per averci lasciato cross post it !

Ho usato Figma per un mese e sono rimasto sbalordito dalle sue caratteristiche e da come funziona. Mi è piaciuto così tanto che ho fatto una campagna per il mio team per passare da Sketch. Questo post è adattato dalle conversazioni che ho avuto al lavoro ed è una specie di presentazione per i team di prodotti, in particolare quelli distribuiti, che spiega perché Figma è migliore in molti modi che contano.

Prima di tutto, togliiamo le basi

Figma è uno strumento di progettazione basato sul web con collaborazione in tempo reale

È come Craft Freehand ma con tutte le funzionalità di Sketch (e altro). Funziona con i browser Web e ci sono anche app native che ti consentono di lavorare offline.

Perché il Web è una buona cosa?

  • Non è necessario scaricare, installare e aggiornare continuamente software.
  • Non è necessario salvare e organizzare i tuoi file. Il tuo lavoro viene automaticamente salvato in uno spazio condiviso nel cloud.
  • Un URL diventa la fonte della verità che tutti possono vedere. Che significa…
  • Non è necessario caricare, sincronizzare e organizzare continuamente i PNG in più punti.

Ma Figma è lento?

No. Le persone sperimentano che Figma è più performante di Sketch. Questa è stata anche la mia esperienza, anche quando si lavora con un file di grandi dimensioni.

Ma che dire dell'ecosistema Sketch? Sketch ha tanti plug-in su cui facciamo affidamento per il nostro flusso di lavoro

Bene, sono qui per dirti che non avremmo perso nulla di significativo usando Figma; guadagneremmo solo.

Figma ha tutte le caratteristiche e le capacità di Sketch + Abstract + InVision + Craft + Liveshare + Freehand + Zeplin + Dropbox tutto in uno, oltre a un mucchio di più. Ecco alcune delle caratteristiche di Figma:

  • Un'interfaccia simile e tutti gli stessi strumenti di disegno di Sketch.
  • Prototyping. Figma ha una funzione di prototipazione cliccabile simile a Craft + InVision.
  • Commenti integrati. Chiunque abbia il collegamento può aggiungere commenti in qualsiasi punto del progetto, in modo simile a come funzionano i commenti in InVision. Puoi taggare le persone nei commenti, contrassegnare i commenti come risolti e persino integrarli con Slack.
  • Handoff per gli sviluppatori. Gli sviluppatori possono ottenere dimensioni, stili e scaricare icone e immagini dall'URL del progetto. È come Zeplin, ma ancora una volta non devi sincronizzare le tue tavole da disegno ogni volta che aggiorni i tuoi progetti.
  • Controllo versione. Figma include la cronologia delle versioni per tutti i collaboratori. È possibile eseguire il rollback o il fork da uno stato precedente. Funziona come una macchina del tempo su un Mac.
  • Collaborazione multiplayer. Più persone possono collaborare in tempo reale. Simile a Freehand, tutti vediamo i cursori degli altri sullo schermo e possiamo disegnare cose e fare commenti.
  • LiveShare. Se fai clic sull'avatar di qualcuno, puoi vedere cosa stanno vedendo sul loro schermo e seguire il loro cursore. Funziona proprio come InVision Liveshare (RIP Liveshare).
  • Componenti. Simile ai simboli nello schizzo, ma più flessibile e più facile da progettare. (Maggiori informazioni qui sotto)
  • Vincoli. Simile al ridimensionamento in Sketch, ma più intuitivo.
  • Librerie di gruppo. È possibile condividere e aggiornare raccolte di componenti tra progetti.
  • Bonus: puoi persino incorporare progetti Figma in Dropbox Paper.

Ora passiamo alle cose davvero buone ...

Figma copre tutte le basi con le caratteristiche sopra menzionate. Ma diventa davvero interessante se consideri come migliora il nostro flusso di lavoro.

Di seguito sono riportati quattro modi in cui Figma può sostanzialmente migliorare il nostro modo di lavorare.

1. Possiamo iterare MODO più velocemente con la collaborazione in tempo reale

Puoi fare una revisione del design, effettuare aggiornamenti al volo e ottenere immediatamente feedback sulle modifiche. Il tempo che intercorre tra le iterazioni può variare da giorni a minuti, poiché non si perde tempo a caricare o sincronizzare schermate, creare collegamenti di condivisione, inviare messaggi alle persone per guardare i collegamenti e così via. Quando l'ho sperimentato in prima persona è stato così sorprendente che ho versato una sola lacrima di gioia.

Di seguito sono riportati alcuni scenari della vita reale che possono rendere il lavoro lento e noioso nel migliore dei casi e incredibilmente frustrante nei momenti peggiori. Tutti questi scenari scompaiono usando Figma:

  • Quando dopo aver sincronizzato tutte le schermate con InVision ti rendi conto che desideri aumentare leggermente la dimensione del carattere in un componente dell'intestazione, quindi apporta le modifiche al tuo file di progettazione e quindi devi risincronizzare tutte le schermate con InVision.
  • Quando si utilizza Craft per sincronizzare un prototipo complesso e multi-schermo su InVision e quindi è necessario trascorrere un'ora che sembra trascinare e rilasciare gli schermi nell'ordine corretto in InVision perché Craft li carica in una sequenza casuale.
  • Quando qualcuno in un altro fuso orario si dimentica di impegnarsi o caricare il proprio lavoro, è necessario attendere che tornino online per ottenere gli ultimi progetti.
  • Quando c'è un aggiornamento software e tutti i plugin di terze parti si rompono e perdi ore.

2. Il nostro processo di progettazione diventa più inclusivo e senza soluzione di continuità

All'improvviso il file di progettazione diventa un luogo in cui chiunque può incontrarsi e discutere dei progetti. Ciò significa che è più facile per i progettisti lavorare in parallelo, esplorare le opzioni e iterare con incrementi più brevi. Ciò significa che gli sviluppatori possono individuare e esprimere le preoccupazioni tecniche prima piuttosto che dopo. Ciò significa che le parti interessate, i project manager o chiunque abbia il link possono vedere come il design si sta svolgendo da un'idea a una visuale raffinata, piuttosto che aspettare una grande rivelazione.

Invece di frammentare il processo di progettazione su più file, ora c'è un posto che può raccontare l'intera storia ed evolversi man mano che il processo di progettazione si svolge.

Mi piace quello che Thomas Lowry, designer di OpenText, ha scritto su come il suo processo di progettazione è cambiato usando Figma:

Mentre iniziamo a immergerci in un enorme progetto di sito Web, Figma sta rapidamente diventando una parte essenziale del nostro processo. Produrremo i nostri prototipi di wireframing e di bassa fedeltà in Figma fino alla fase di progettazione visiva. Durante questo processo inizieremo a stabilire i componenti e li invieremo alla libreria del team per l'utilizzo su molti file. Man mano che esaminiamo i componenti in diversi scenari e la progettazione si evolve, essere in grado di apportare modifiche globali su tutti i file farà risparmiare molto tempo.

3. È probabile che la nostra transizione dalla progettazione al codice sia più rapida e coerente

Questo perché con Figma è più semplice strutturare i nostri progetti in modo tale da riflettere il modo in cui tali progetti verranno codificati.

Per capire perché, devi sapere come funzionano i frame. Figma utilizza cornici anziché tavole da disegno. I frame sono diversi perché è possibile nidificare i frame all'interno di un frame. Quando si posiziona un riquadro più piccolo su un riquadro più grande, i due riquadri vengono automaticamente raggruppati e il riquadro più piccolo diventa figlio del riquadro principale più grande. I frame dei bambini sono posizionati e vincolati rispetto al loro genitore. Questa è una di quelle cose che richiedono un po 'di tempo per abituarsi, ma poi, una volta fatto, ti chiedi come mai ne hai fatto a meno.

È possibile utilizzare i frame per dividere uno schermo in aree di contenuto e quindi nidificare i componenti (che sono essi stessi un gruppo di frame nidificati) all'interno di tali sezioni. Questo approccio combinato con auto-raggruppamento, posizionamento relativo e vincoli semplifica la creazione rapida di progetti coerenti e reattivi.

L'uso di frame come questo è utile per gli sviluppatori perché un frame in Figma è simile a un contenitore in HTML. Quando gli sviluppatori ispezionano i progetti, saranno in grado di vedere gli elementi dell'interfaccia utente nidificati nei rispettivi contenitori, il che significa che avranno un modello più accurato a cui fare riferimento mentre scrivono il loro codice.

4. I nostri sistemi di progettazione saranno più flessibili e più facili da progettare, il che significa che risparmieremo tempo e acquisiremo coerenza tra i progetti

Sketch ha simboli e Figma ha componenti. La differenza è che i componenti sono più flessibili dei simboli, il che significa che possiamo fare di più con meno di essi, il che significa che abbiamo maggiori probabilità di usarli effettivamente invece di romperli o ricominciare da zero.

In che modo i componenti sono più flessibili dei simboli?

In Sketch è possibile utilizzare Sostituzione simboli per modificare il testo o scambiare simboli nidificati. Ma se vuoi cambiare qualcos'altro, ad esempio dimensione del testo, spessore del bordo o colore di sfondo, dovrai staccare dal simbolo e creare una versione leggermente diversa dello stesso elemento dell'interfaccia utente. Per risolvere questo problema puoi annidare ogni variazione in un simbolo, ma poi finisci con un pannello di sostituzione dall'inferno. Con progetti di grandi dimensioni e UI complesse, l'organizzazione e il mantenimento di tutte le permutazioni diventano rapidamente insostenibili.

Con Figma, puoi accedere e modificare le proprietà di qualsiasi livello in un componente senza staccarlo dal master. Lo stesso vale per i componenti nidificati. Ora, ogni volta che modifichi una proprietà di un livello nel componente principale, tali modifiche verranno propagate solo alle istanze per le quali quella proprietà non è già stata sostituita.

Penso che queste tre gif facciano un buon lavoro nel descrivere visivamente come funziona.

1. Creare un componente e quindi copiarlo per creare due istanze del master.2. Le modifiche al componente principale vengono immediatamente propagate a tutte le sue istanze.3. Tranne che qualsiasi proprietà sostituita rimarrà ignorata, anche quando il master viene modificato.

In che modo i componenti sono più facili da progettare rispetto ai simboli?

Prima di tutto, non devi preoccuparti di una struttura di denominazione (ad es. Icone / ricerca) mentre crei componenti. È possibile rinominare un componente principale in un secondo momento e aggiornerà tutte le istanze, non il caso in Sketch. E per creare una categoria di componenti, basta raggrupparli in un frame e denominare quel frame qualunque sia la categoria. Ciò significa che è facile riorganizzare le cose in un secondo momento semplicemente trascinando i componenti. Per me, questo ha davvero ridotto il sovraccarico cognitivo sia della creazione di componenti che della loro tracciabilità.

In secondo luogo, accedere ai componenti in Figma è molto più semplice dell'accesso ai simboli in Sketch. Ancora una volta non devi pensare a una struttura di denominazione per navigare in un menu nidificato di nomi di simboli. Invece, puoi trovare (e vedere!) Componenti come un elenco di miniature. Per aggiungere un componente a una schermata o scambiare un'istanza, trascina e rilascia nell'area di disegno. Oppure puoi copiare e incollare il componente principale per creare una nuova istanza: non puoi nemmeno farlo in Sketch senza creare un nuovo simbolo.

Vedi e accedi ai componenti da una scheda nel pannello dei livelli

Un'altra cosa che semplifica la progettazione con i componenti è che in Figma è possibile modificare il componente principale nel contesto della vista più grande, anziché dover accedere a una pagina separata per apportare modifiche. Trovo super fastidioso rimbalzare su un'altra pagina in Sketch ogni volta che voglio modificare un simbolo, quindi dover tornare al design per vedere se le mie modifiche si allineano.

Da https://blog.figma.com/components-in-figma-e7e80fcf6fd2

Avvolgendo

Più uso Figma, più motivi trovo che mi piaccia. Ci sono un sacco di dettagli che scoprirai quando inizi a lavorarci. Nel complesso sembra uno strumento più evoluto e ben congegnato per la progettazione dell'interfaccia.

Altre risorse

Nota dell'editore: originariamente pubblicato su blog.prototypr.io il 6 aprile 2018. Figma non ha sponsorizzato la creazione di questo post.