La coerenza è la chiave: come costruire un sistema di design Figma

È risaputo tra i designer che un buon sistema di progettazione può avere un enorme impatto sulla qualità dei prodotti che spediamo e sul ritmo con cui possiamo svilupparli. Poiché il caso della creazione di un sistema di progettazione completo è stato chiarito molte volte, con aziende come Google, GitHub, IBM e altri che li utilizzano per creare prodotti migliori a un ritmo maggiore, la domanda è cambiata da "Perché dovremmo avere un design sistema?" a "Come possiamo creare un ottimo sistema di progettazione?"

Allora, cos'è esattamente un sistema di progettazione? Will Fanguy la definisce come "una raccolta di componenti riutilizzabili, guidati da standard chiari, che possono essere assemblati per costruire un numero qualsiasi di applicazioni". Un sistema di progettazione può includere non solo una libreria di componenti dell'interfaccia utente e una libreria di modelli, ma anche una guida di stile, procedure consigliate, codice e altro ancora. Proprio come il progetto di un architetto per un edificio, un sistema di progettazione funge anche da "unica fonte di verità" per il team di prodotto durante la creazione dei prodotti, oltre a contribuire a mantenere la coerenza.

GitHub è arrivato persino a condividere la propria libreria di componenti Figma, un ottimo esempio di sistema di progettazione basato su Figma. Anche strumenti più estesi come Storybook e Component-Driven Development sono risorse estremamente utili per l'implementazione e la documentazione di un sistema di progettazione.

Un sistema di progettazione mantiene la coerenza del design e dovrebbe essere utile a tutti coloro che sono coinvolti nella creazione di un prodotto. È un toolkit che aiuta i progettisti a creare nuovi schermi, flussi e prototipi più velocemente. Un buon sistema di progettazione aiuta gli sviluppatori a comprendere la logica alla base delle decisioni di progettazione e aiuta a creare un prodotto più coerente. Accelera il processo di progettazione e offre ai progettisti più tempo per la sperimentazione.

Per quei designer che lavorano con Figma, diamo un'occhiata a come la creazione di una libreria di componenti in Figma può essere una parte fondamentale di un sistema di progettazione completo.

Il potere di una libreria di componenti

A volte, può essere controproducente investire nella creazione di un sistema di progettazione troppo presto. Nelle prime fasi della progettazione di un prodotto, il processo è ancora fluido. Ad esempio, se si stanno sperimentando due barre di navigazione primarie, l'aggiunta di entrambe a una libreria di componenti non avrebbe senso, poiché confonderebbe tutti i membri del team. È meglio aspettare che il design del prodotto si sia stabilizzato, preferibilmente testato e in qualche modo finalizzato.

Se un prodotto è maturo e non dispone di una libreria di componenti esistente, il sistema di progettazione dovrebbe già essere determinato dall'implementazione corrente. Ma non è ancora codificato. A questo punto, sarebbe vantaggioso definire i modelli UX comuni e distillare il prodotto in un insieme di componenti che vengono regolarmente utilizzati in tutto il prodotto. Inoltre, è l'ideale se la libreria dei componenti è conservata in una posizione centrale facilmente accessibile a tutti.

Un sistema di progettazione è principalmente un toolkit

Cercare di utilizzare un sistema di progettazione come un toolkit è una grande cartina di tornasole per la sua efficacia. Se più designer lo usano regolarmente per accelerare il loro processo, sta facendo un buon lavoro. Se gli sviluppatori possono fare riferimento ad esso per colori, stili di testo o per lavorare con meno input da parte dei designer, anche questo è un buon segno.

In genere non è utile includere componenti molto complessi o che possono essere utilizzati solo una o due volte nel prodotto. Più qualcosa è riutilizzabile, più appartiene a un sistema di progettazione.

Figma ha recentemente rilasciato l'analisi del sistema di progettazione per le organizzazioni, in cui i team possono vedere quanto sono efficaci le diverse parti di un sistema di progettazione e aiutarlo a ottimizzarlo.

Perché Figma è ottimo per la creazione di una libreria di componenti

Figma è un potente strumento di progettazione con molte fantastiche funzionalità, ma esiste un sottoinsieme di elementi che diventano particolarmente utili durante la progettazione di prodotti complessi: stili , componenti e file di libreria . Queste funzionalità aiutano a mantenere aggiornati i sistemi di progettazione, aiutano a mantenere la coerenza tra i progetti e forniscono una scorciatoia per aggiornare più progetti da una posizione centrale.

• Gli stili sono colori e stili di testo (carattere, dimensione, peso, ecc.) che sono definiti in un unico punto e possono essere applicati a molti oggetti.
• I componenti sono cose come pulsanti o bolle di chat e possono essere creati da stili, oggetti come forme e testo e altri componenti.
• I file di libreria consentono di condividere stili e componenti tra più file e con un team o un'organizzazione.

Figma ha al centro la collaborazione e la condivisione. I file di progettazione possono essere modificati da chiunque nel browser, condivisi liberamente e si aggiornano in tempo reale poiché più utenti possono modificarli contemporaneamente. Ciò apre il sistema di progettazione a una collaborazione più efficiente non solo tra i progettisti ma anche con gli sviluppatori e le altre parti interessate.

Creazione di un file di libreria

In Figma, è possibile creare un file di libreria che servirà più o meno come inizio di un sistema di progettazione. Qui possiamo definire stili e componenti che vengono poi condivisi nel team o nell'organizzazione e utilizzati in più progetti. Stili e componenti possono essere aggiornati in un'unica posizione e queste modifiche possono quindi essere apportate automaticamente a tutti i singoli file di progettazione.

Questo ha un paio di vantaggi chiave:

1. Velocità . Consente di risparmiare tempo eliminando la necessità per un designer di aggiornare manualmente potenzialmente centinaia di progetti. Avendo i componenti gestiti in un unico file di libreria, l'aggiornamento di un colore in un'unica posizione può propagarsi in ogni progetto creato utilizzando la libreria dei componenti con pochi clic.
2. Coerenza . Riduce la probabilità di errore automatizzando l'attività.

Organizzazione

Quando si costruisce un sistema di progettazione in Figma, è utile tracciare parallelismi tra gli strumenti e la teoria. Ad esempio, Styles in Figma potrebbe essere considerato il livello più elementare, anche più basilare di Atoms nel modello Atomic Design di Brad Frost. Queste sono cose come il colore e il carattere che aiutano a creare l'estetica del prodotto.

Un semplice componente Figma sarebbe considerato un atomo nel modello Atomic Design, ad esempio un pulsante. Un componente Figma più complesso sarebbe considerato una molecola o un organismo , che viene poi utilizzato per costruire modelli e pagine .

Alcune delle cose più utili da avere in una libreria di componenti sono:

• Colori
• Caratteri
• Risorse del marchio, logo, ecc.
• Navigazione
• Bottoni
• Notifiche
• Modali
• Elementi del modulo e convalida

Costruire un sistema di progettazione in Figma – Per iniziare

In questo esempio creeremo un semplice modulo di accesso e spiegheremo i componenti e gli stili che possono essere dedotti e utilizzati.

Innanzitutto, pensiamo ai componenti e agli stili che potrebbero essere riutilizzabili da questo modulo. C'è una scheda contenente un logo, campi modulo e un pulsante. Ci sono anche tre stili di carattere e alcuni colori ed effetti diversi che potrebbero essere utili.

Una volta identificati gli stili e i componenti da includere nella Libreria come sopra, è il momento di creare un file di Libreria e iniziare a popolarlo.

Crea un file della libreria Figma

Crea un nuovo file e pubblicalo come Libreria. Una volta creato un nuovo file, fai clic sulla scheda Risorse , fai clic sull'icona Libreria , quindi fai clic su Pubblica . Questo pubblica gli stili e i componenti nel file di libreria in modo che possano essere utilizzati in altri file.

Stili e componenti possono ora essere creati nel file della libreria e possono essere utilizzati in altri file e aggiornati dal file della libreria centrale.

Come creare uno stile Figma

La creazione di stili è la stessa nei file Libreria come in qualsiasi altro file, come descritto nei passaggi seguenti.

• Seleziona l'oggetto da cui vuoi creare uno stile. Gli stili possono essere colori, proprietà del testo, effetti e griglie di layout.
• Fare clic sul pulsante Stili (quattro punti in un quadrato) accanto alla proprietà da utilizzare nel nuovo stile, quindi fare clic sul pulsante più nel popover per creare un nuovo stile.

• Questo mostrerà una modale per nominare lo stile. Spesso è utile utilizzare un nome semantico piuttosto che un nome di presentazione, ad es. "Colore primario" invece di "Verde", quindi è più chiaro per cosa deve essere utilizzato lo stile.
• Pubblica lo stile nella Libreria del tuo team utilizzando il pop-up che appare in basso a destra dello schermo, oppure ripeti i passaggi per pubblicare la Libreria in prima istanza.

Ecco il tutorial di Figma su come creare uno stile .

Come creare un componente Figma

Anche la creazione di un componente è molto semplice. Seleziona semplicemente l'oggetto da cui desideri creare un componente, quindi fai clic con il pulsante destro del mouse e seleziona "Crea componente".

I componenti vengono pubblicati nella Libreria del team allo stesso modo degli stili.

Ecco il tutorial di Figma su come creare un componente .

Una volta creati alcuni stili e componenti, il file della libreria può essere condiviso con il team e gli stili e i componenti possono essere utilizzati in un numero qualsiasi di file.

Utilizzando la Libreria Figma

Per utilizzare questi stili e componenti in un altro file, il file Libreria deve collegarsi a un file di progettazione esistente in cui desideriamo utilizzare i nuovi stili e componenti. Basta aprire nuovamente la modale Librerie (Risorse, icona Libreria) e attivare l'interruttore a levetta per utilizzare il file Libreria.

La Libreria dei componenti è ora pronta per essere utilizzata. I componenti possono essere posizionati trascinandoli nel file di disegno dalla scheda Risorse a sinistra dello schermo. Gli stili della libreria possono essere utilizzati allo stesso modo degli stili locali quando si cambiano gli stili di testo, i colori di riempimento, i tratti, gli effetti e le griglie di layout.

Quando i componenti e gli stili vengono aggiornati nella Libreria, i file che li utilizzano devono accettare le modifiche. Figma mostrerà una notifica quando vengono effettuati aggiornamenti nel file Libreria, dando la possibilità di pubblicarli. Una volta pubblicati, tutti i file che utilizzano Componenti e stili dovranno accettare la modifica tramite una notifica simile o la scheda risorse per aggiornare i propri componenti e stili. Ciò impedisce la pubblicazione e l'aggiornamento imprevisto delle modifiche.

Oltre a costruire una libreria di componenti in Figma

Figma copre solo la parte della libreria dei componenti di un sistema di progettazione completo. Per un sistema di progettazione completo, vale la pena considerare altri elementi che potrebbero essere incorporati, come le linee guida del marchio, le guide allo stile dei contenuti e la documentazione per gli sviluppatori.

La guida allo stile dei contenuti di Mailchimp è un eccellente esempio, in quanto descrive in dettaglio il tono della voce e il branding attraverso i contenuti. GitHub ha un'ottima documentazione su come funziona la loro libreria di componenti nel codice e il Material Design System di Google ha anche alcuni eccellenti esempi di documentazione della logica dietro il sistema di progettazione.

Come strumento di progettazione, Figma è maturato molto e vengono costantemente aggiunte nuove funzionalità. L'aggiunta di un sistema di progettazione Figma con analisi integrate accessibile all'intera organizzazione è un enorme passo avanti. L'aggiunta di queste funzionalità indica che Figma mira a essere uno strumento di progettazione completo e completo, ed è sulla buona strada per raggiungerlo.

• • •

Ulteriori letture sul blog di Toptal Design:

• Il potere di Figma come strumento di progettazione
• Semplifica la progettazione collaborativa con Figma
• Mini Tutorial – Sfruttare le funzionalità di Figma per l'intero processo di progettazione
• Mini Tutorial – Lavorare con i componenti dei pulsanti Figma
• Padroneggia il tuo mestiere con questi migliori strumenti UX