31 Lug 2023

Creare un componente in Figma

Creare un componente in Figma

Se ti occupi di UI/UX Design e usi Figma per il tuo lavoro dovrai sicuramente familiarizzare con i componenti, la logica che sta dietro al loro utilizzo e, chiaramente, il loro funzionamento.

Partiamo con ordine.

Che cosa è un componente in Figma?

Quando sviluppi un sito o un’app (parliamo in senso ampio di prodotti) puoi sbriciolare, in termini visivi e di funzionamento minimi, alcuni elementi; questi elementi possono essere poi distribuiti, riutilizzati e ricombinati in più aree del progetto. Questi elementi sono, appunto, i componenti.

La logica dei componenti è quella di essere dei piccoli atomi; possono vivere e funzionare da soli, oppure, in base al contesto, essere annidati tra loro per creare delle molecole (si parla spesso infatti di design atomico, o modulare, proprio per sottolineare questa logica di elementi ricombinabili e adattabili in base alle occasioni d’uso). Una voce di menu che reagisce al passaggio di un mouse è un componente (atomo); un intero menu a scomparsa che include queste voce di menu è un insieme di componenti (molecola).

Esempi di componenti in Figma

Un semplice pulsante (una call to action) che reagisce al passaggio del mouse (ed è quindi interattivo) è un componente per Figma. Un pulsante toggle (acceso/spento) è anche questo un componente in Figma.
Ma anche una voce di menu che reagisce al passaggio del mouse può essere un componente …più voci di menu a loro volta possono essere unite dentro ad una tendina a scomparsa che appare in sovraimpressione (overlay) e rappresentare quindi un nuovo ed ulteriore componente.

All’interno di Figma il componente (vedrai come se ne crea uno nel prossimo paragrafo) ha diverse caratteristiche, ovvero la presenza di potenziali:

  • VARIANTI
  • INTERATTIVITA’
  • PROPRIETA’

Come si crea un componente in Figma

In questo breve video tutorial ti guidiamo alla creazione di un componente in Figma, un semplice Toggle Switch, o pulsante interruttore, come quelli che si incontrano spesso nelle app mobile per attivare o disattivare una determinata opzione.
Nello specifico vedrai come:

  1. Disegnare un semplice toggle switch
  2. Trasformare un design in componente
  3. Aggiungere una variante
  4. Aggiungere interattività al componente
Articolo di Matteo Masciotti
Adobe Certified Instructor / Design Specialist
Dal 2014 ad oggi in veste di Adobe Certified Instructor ha collaborato con i centri Adobe Autorizzati a Milano e a Londra; ha inoltre lavorato in Canada come design specialist e attualmente fornisce consulenze e formazione sui software Adobe per migliorare i flussi di lavoro per i content creators. Tutti gli articoli di Matteo Masciotti »
Se ti è piaciuto questo articolo e vuoi rimanere aggiornato su novità e promo attive, iscriviti alla nostra newsletter (per te anche un codice sconto)!
Serve aiuto?
Chatta con noi
Valutazione di Google
4.9
Basato su 147 recensioni
js_loader