Come utilizzare le librerie in Figma? | Figma per principianti #6

Come creare librerie di stili e componenti in Figma? Come utilizzarli nei tuoi file e condividerli con altri membri del team? Troverai la risposta nel seguente articolo. Utilizzando gli stili, è più facile mantenere le cose coerenti nei progetti di team. Continua a leggere.

Librerie in Figma – indice:

1. Stili
2. Componenti
3. Pubblicare stili e componenti in una libreria

Stili

Questi sono insiemi di proprietà che possono essere applicate ai livelli nei progetti. Per creare uno stile, devi prima selezionare l’oggetto le cui proprietà desideri salvare. Poi fai clic sull’icona Stili nel pannello Proprietà accanto alla proprietà selezionata, quindi fai clic sull’icona +.

Si aprirà una finestra in cui dovrai inserire il nome dello stile che stai creando. Fai clic su Crea stile.

Vedrai gli stili creati nel pannello Proprietà quando non ci sono oggetti selezionati.

Nel pannello Modifica stili, puoi aggiungere una descrizione e modificare le proprietà di ciascuno stile. Ogni volta che apporti modifiche alle proprietà dello stile selezionato, quelle modifiche verranno applicate a tutti gli oggetti che lo utilizzano.

Puoi creare i seguenti stili:

Stili di colore (pitture) – per riempimenti e tratti, testo e sfondi, e persino per immagini e gradienti.

Stili di testo – grazie agli stili di testo puoi definire stili per intestazioni e testo principale. Puoi applicare stili di testo a un intero blocco di testo o solo a parte del testo nel blocco. Puoi definire: famiglia di font, dimensione, altezza della linea, spaziatura.

Nota: con gli stili di testo non puoi impostare l’allineamento del testo.

Effetti – qui puoi definire attributi di ombra e sfocatura.

Griglie di layout – creare stili di griglie di layout è utile se desideri duplicare una certa struttura in più progetti.

Per applicare uno stile al livello attivo, fai clic sull’icona Stili nel pannello Proprietà accanto alla proprietà selezionata e seleziona lo stile dall’elenco.

Per rimuovere uno stile dal livello attivo, fai clic su Staccare stili. Questo è utile quando desideri apportare modifiche a un oggetto senza interferire con lo stile.

Compito 6.1. Esercitati a creare stili in Figma. Crea stili per le intestazioni delle sezioni nella home page, nomi dei prodotti e prezzi.

Componenti

Questi sono i mattoni dei tuoi design che puoi riutilizzare. Possono essere icone, pulsanti o elementi più complessi. I componenti aiutano a mantenere i tuoi design coerenti e ti permettono di apportare rapidamente modifiche a più file e progetti.

Per creare un componente, devi prima selezionare i livelli che comporranno il componente e poi fare clic su Crea componente nella Toolbar.

I livelli del componente saranno incorporati in un frame speciale e evidenziati in viola, così potrai facilmente distinguerli dagli altri livelli nel pannello Livelli.

I componenti assumono nomi automatici. Puoi rinominare i componenti nella scheda Livelli. Proprio come nel caso di altri livelli, fai doppio clic sul nome. Dopo aver selezionato un componente nel pannello Proprietà, puoi aggiungere una descrizione del componente e un link alla documentazione per i membri del team.

Puoi visualizzare i componenti nella scheda Risorse nel pannello Livelli.

Compito 6.2. Esercitati a creare componenti in Figma. Crea i seguenti componenti:

• una barra di ricerca – composta da un segnaposto, un’icona di lente d’ingrandimento e il testo “Cerca”,
• una barra inferiore – composta da un rettangolo e icone,
• pulsanti CTA – composti da un rettangolo e testo.

Pubblicare stili e componenti in una libreria

Quando crei stili e componenti, hai accesso a essi solo nel file corrente. Per utilizzare stili e componenti in altri file, puoi pubblicarli nella libreria. L’opzione per condividere stili è disponibile nella Toolbar – espandi il menu accanto al nome del file e fai clic su Pubblica stili e componenti.

Hai appena imparato come utilizzare le librerie in Figma. Leggi anche: Cosa fa un designer UX?

Se ti piace il nostro contenuto, unisciti alla nostra comunità di api laboriose su Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.