Introduzione ai componenti Figma

# Cos’è un componente?

Un componente può assumere diversi significati in base al contesto in cui questo termine è utilizzato. Chi è coinvolto nella realizzazione di siti web e app, è interessato in particolar modo al senso che questa parola assume quando si parla di programmazione orientata agli oggetti. In questo ambito, i componenti sono blocchi modulari di un programma che possiamo riutilizzare e combinare con altri elementi.

Si tratta quindi di un concetto molto popolare in ambito informatico, tant’è che a farne largo uso sono i software e i sistemi operativi più evoluti come Android, iOS, Windows, ecc.

Allora perché è così importante per un designer conoscere questo argomento? Semplice, perché coloro che progettano l’aspetto di app o siti web hanno bisogno di entrare nell’ottica di chi li programma se non vogliono sprecare tempo! Il rischio è quello di buttare intere giornate lavorative nel tentativo di trovare soluzioni poco pratiche per lo sviluppo e che difficilmente funzionerebbero sul web.

Un buon modo per tenerti alla larga dai guai è progettare la tua applicazione su Figma, il tool che ti ho presentato in questo articolo. Figma mette infatti a tua disposizione la funzione per la creazione di componenti, dandoti la possibilità di creare i design secondo la logica di uno sviluppatore.

È possibile realizzare intere app grazie alla component composition, un metodo di sviluppo che permette di implementare sistemi complessi attraverso la combinazione di piccoli blocchi di codice o funzioni. Qual è la cosa sorprendente? Che la composition è un concetto fondamentale del design.

Come puoi notare quindi, abbiamo a che fare con due concetti fondamentali: composizione e componente, che derivano da due mondi apparentemente diversi e allo stesso tempo funzionali l’uno con l’altro.

Per questo motivo, la maggior parte dei web designer ha un approccio alla progettazione molto più simile a chi costruisce software rispetto a chi realizza brochure.

# I vantaggi nel comporre componenti in Figma

Progettare un’app attraverso la composizione di componenti vuol dire lavorare gradualmente sulle singole parti dell’applicazione per poi “montare” il tutto, creando un sistema molto più complesso.

Questo approccio impone al designer di ragionare sui singoli elementi progettando ciascun componente in modo “sostenibile“. Così facendo, è possibile risparmiare molto tempo e conservare un alto grado di coerenza fra i diversi lavori.

Lavorare sulle istanze di un componente Figma

Quando creiamo un elemento importando dalla libreria il design di un bottone, ad esempio, dobbiamo considerare che quell’elemento non è banalmente una copia del design del componente, ma una sua istanza. Questo vuol dire che potremo applicare delle modifiche all’istanza (colore di background, font, dimensione del carattere, allineamento, ecc.) senza andare ad incidere sull’aspetto originale del componente. Al contrario, se vado ad apportare delle modifiche al componente tutte le istanze ad esso associate andranno ad ereditare tali cambiamenti.

Creare una libreria di componenti vuol dire quindi realizzare tanti piccoli modelli che potremo andare a modificare in base alle nostre necessità. Allo stesso tempo vuol dire anche riuscire ad aggiornare in un solo colpo tutte le istanze figlie del componente primario (master component).

# L’approccio al design dei componenti Figma

Progettare in modo sistematico ti permette di velocizzare i processi limitando lo stress. Questo approccio consente di costruire design complessi molto più velocemente senza porre freni alla creatività.

I componenti Figma sono un modo eccezionale per iniziare a prendere confidenza con questi concetti perché:

• sono veramente facili da imparare;
• sono uno strumento potente per chi è già pratico nello sviluppo di componenti lato coding;
• la loro flessibilità permette davvero di poter utilizzare un componente in decine di progetti diversi.

Esempi di componenti possono essere form, campi di testo, bottoni, una card, una scheda riepilogativa con i dati anagrafici, ecc.

Design di componenti in Figma

Realizzare un componente in Figma può essere semplice o complicato in base alle caratteristiche che deve avere. Quando inizi la progettazione di un componente devi porti prima di tutto porti una domanda: “si tratta di un componente singolo o di una composizione di più componenti…?”

Ok, ti spiego praticamente cosa intendo:

Se volessi progettare un semplice bottone per una call to action, mi preoccuperei di creare un rettangolo dando una dimensione ben precisa, inserendo poi un testo boldato al suo interno, allineandolo al centro sia orizzontalmente che verticalmente. Perfetto, a questo punto ho predisposto tutti gli elementi che mi servono per creare un componente Button.

Molto semplice, vero?

Prendiamo ora in esame il caso di un componente più complesso, come ad esempio un form contatti. Per realizzarne uno possiamo seguire la filosofia della component composition, creando quindi diversi componenti e mettendo insieme una serie di istanze ad essi associate. Un classico form contatti può contenere i seguenti elementi:

• Quattro istanze di un componente Input che useremo per i campi: Nome, Cognome, Email e Telefono;
• Icone associate a ciascun campo;
• Label descrittive che comunicano all’utente le informazioni da inserire;

Creata questa composizione di componenti, sarà possibile mettere tutto insieme e dare vita ad un nuovo componente Form che potremo riproporre in tantissimi altri progetti e in più punti di una pagina web.

Se non sai quale elemento trasformare in un componente figma e quale no, considera tutto ciò che pensi di poter riutilizzare in tante altre occasioni, sia nell’ambito del lavoro che stai svolgendo che in altri, un buon candidato ad entrare nella tua libreria dei componenti.

# Creare un Componente Figma

Creare un componente in Figma non è per niente complicato, ti basta selezionare l’elemento o il gruppo di elementi che intendi convertire in componente e fare click sul bottone “Create Component” presente nella toolbar.

Dovresti notare a questo punto il cambio di colore dell’outline di selezione che è passato da azzurro a viola. Il colore viola della selezione indica che stai lavorando su un componente o sulla sua istanza. Potrai riconoscerli inoltre dall’icona presente nella sidebar di sinistra.

Creare nuove istanze di un componente è altrettanto semplice: basta tenere selezionato il componente, fare alt + click e trascinare.

# L’importanza di capire i componenti Figma nell’epoca delle web app

Oggi si parla tanto di framework per lo sviluppo di app e web app come React.js, Angular, Vue.js, ecc.

In ognuno di questi Framework il concetto di componente è alla base di ogni altra cosa e se vuoi aspirare ad una carriera in questo settore, ti consiglio di approfondirli più che puoi.

Saper progettare in Figma il design di applicazione attraverso la component composition ti renderà un miglior designer e soprattutto di darà modo di lavorare con gli sviluppatori parlando la loro stessa lingua.

Non esitare un attimo di più, apri Figma e inizia a sviluppare i tuoi design attraverso i componenti sponsors.

Installa Figma

Cerchi una guida in italiano su Figma? Segui la nuova guida “Progettare siti web con Figma“.