Negli ultimi anni, Figma è cresciuta rapidamente in popolarità e non c'è da stupirsi. Il software gratuito basato su cloud è facilmente accessibile su tutti i dispositivi e non richiede rate o download. Dalla progettazione di interfacce per app mobili alla produzione di post sui social media, con Figma puoi sperimentare tutti i tipi di funzionalità di progettazione grafica ed espandere le tue abilità.
Per una coerenza ancora maggiore nei tuoi progetti, potresti prendere in considerazione l'utilizzo di componenti nel tuo lavoro. I componenti sono elementi dell'interfaccia utente (UI) che possono essere utilizzati su più file su Figma. Questi possono spesso essere una forte aggiunta ai tuoi progetti e migliorarne la qualità complessiva.
Che tu sia nuovo in Figma o che lo usi da un po' e non sei sicuro di come utilizzare i componenti con successo, siamo qui per aiutarti.
In questo articolo, esploreremo come utilizzare i componenti Figma e come questo può aiutarti a migliorare il tuo lavoro.
Se sei interessato a saperne di più, continua a leggere.
Come utilizzare i componenti in Figma
Padroneggiare l'uso dei componenti può aiutarti con l'organizzazione e la coerenza durante il funzionamento di Figma. Questi elementi dell'interfaccia utente possono essere utilizzati più e più volte su vari progetti di design su cui potresti lavorare. Un componente può essere creato in un'icona, un pulsante e altro, a seconda del progetto.
Il bello dell'introduzione di componenti nella tua esperienza con Figma è che ti fa risparmiare un sacco di tempo. Qualsiasi modifica che potresti apportare a un componente viene automaticamente aggiornata sugli altri. Questo può essere particolarmente utile se hai poco tempo o se collabori con altri designer e vuoi velocizzare il tuo flusso di lavoro.
Per iniziare, noterai che ci sono due barre laterali su ciascun lato della tela principale che stai utilizzando. Puoi utilizzare gli strumenti di una di queste barre laterali per apportare modifiche al tuo progetto.
La barra laterale sul lato destro ti dà accesso a qualsiasi impostazione del prototipo e ti consente di regolare o modificare qualsiasi proprietà dei tuoi componenti. Tuttavia, la barra laterale a sinistra ti presenta i livelli, le risorse e le pagine utilizzate nel tuo progetto. Questo è indicato come il pannello dei livelli.
I componenti dovrebbero essere introdotti nel tuo lavoro abbastanza presto. Ti aiutano a mantenere la coerenza nei tuoi progetti e ti consentono di accelerare la velocità con cui stai apportando modifiche ai tuoi progetti. Ci sono due elementi chiave di un componente:
- Il componente principale (o principale) (icona a quadruplo diamante)
- Un componente di istanza (icona a diamante singolo)
Componenti principali
Prima di ogni altra cosa, devi prima creare il Componente Master. Per fare ciò, segui i passaggi seguenti:
- Fare clic con il pulsante destro del mouse sul livello, gruppo o cornice.
- Seleziona Crea componente.
- Sul lato sinistro dello schermo, vedrai un menu a discesa che dice Componente. Fare clic su questo.
- Da qui, noterai un menu in cui puoi apportare modifiche al tuo componente e riprogettare gli stili tra i progetti.
Un altro modo per creare un componente principale è utilizzare le scorciatoie:
- Opzioni + Comando + K per Mac
- Ctrl + Alt + K per Windows
Ovviamente, questo metodo funziona solo se stai usando Figma su un PC.
Componenti istantanei
Un componente istantaneo è una copia del tuo componente principale. Quando il Componente principale viene modificato in qualsiasi modo, l'istanza viene automaticamente aggiornata per corrispondere a qualsiasi modifica apportata. Se stai creando un sito web, questo strumento può essere particolarmente utile e farti risparmiare un sacco di tempo. Ad esempio, sarebbero finiti i giorni in cui si accedevano manualmente a tutti i componenti per ripetere le stesse modifiche. Invece, Figma li cambia tutti per te.
Potrebbe arrivare il punto in cui hai creato più istanze e vorresti tornare al tuo componente principale in modo da poter apportare una rapida modifica a tutti i tuoi componenti. Per accedere al tuo Componente principale, procedi come segue:
- Fare clic con il pulsante destro del mouse su qualsiasi istanza.
- Fare clic su Vai al componente principale.
- Il componente principale apparirà nella barra laterale sul lato sinistro.
Mentre realizzare i componenti uno alla volta è relativamente semplice; puoi velocizzare le cose facendole alla rinfusa. Per fare ciò, attenersi alla seguente procedura:
come esportare tutti i ricordi di Snapchat
- Dal pannello Livelli, scegli i livelli in cui desideri creare i componenti.
- Fare clic sull'icona della freccia rivolta verso il basso situata accanto all'icona del componente principale all'interno del pannello dei livelli.
- Seleziona Crea più componenti dalle opzioni disponibili.
- Da lì, Figma creerà un componente per ogni livello di frame.
Domande frequenti aggiuntive
Come posso sovrascrivere o scollegare un'istanza?
Potrebbero esserci momenti in cui desideri apportare modifiche alle proprietà di una particolare istanza senza modificare tutte le altre. È possibile apportare variazioni di diversi componenti. In Figma, questo è indicato come override.
Dopo aver sovrascritto un'istanza, tutte le modifiche apportate al componente principale non influiranno su di essa. Per fare ciò, controlla i passaggi seguenti:
1. Fare clic sul componente dell'istanza.
2. Dal pannello Proprietà sul lato destro dello schermo, selezionare Componente.
3. Dal menu a discesa visualizzato, scegli Disconnetti istanza.
Se desideri annullare una sostituzione, seleziona il componente, quindi scegli Ripristina istanza dalla barra centrale in alto sullo schermo.
Cosa devo fare se elimino accidentalmente il mio componente principale?
Quando trascorri tutto il giorno a modificare i contenuti, a volte potresti sbagliare accidentalmente ed eliminare qualcosa di importante, come il tuo Componente principale. Non temere, per il ripristino è facile come 1-2-3. Segui questi passaggi di base per recuperare quel componente principale mancante:
1. Vai a una delle Istanze del componente.
2. Nel pannello Proprietà sul lato destro dello schermo, selezionare Ripristina componente principale.
3. Il componente principale apparirà immediatamente.
Come faccio ad aggiungere una descrizione per i miei componenti?
Quando crei i tuoi componenti, l'aggiunta di una descrizione e di un collegamento alla documentazione a ciascuno di essi può aiutarti a navigare meglio nel tuo progetto. È anche utile per tutti i collaboratori con cui potresti lavorare per avere accesso a note aggiuntive. Per aggiungere una descrizione, vai al pannello Proprietà sul lato destro della pagina e seleziona Aggiungi una descrizione.
Dopo averlo fatto, tutti gli spettatori esterni possono accedere a queste informazioni andando al pannello Ispeziona nella barra laterale di destra.
Come faccio a importare componenti in Figma?
Puoi importare tutti i tipi di file in un componente Figma. Il modo più semplice per farlo è dal desktop. Segui semplicemente questi passaggi:
1. In Figma, apri la pagina in cui desideri importare un file.
2. Dai tuoi file, seleziona il file specifico che desideri utilizzare.
3. Trascina e rilascia il file selezionato nella tua pagina Figma.
4. Al termine, fare clic su Fine.
La strada per il successo
Figma è un ottimo strumento da utilizzare sia che tu sia nuovo nel design o che giochi da anni. Il software offre un sistema di editing adatto ai principianti in cui i designer possono creare contenuti da zero o utilizzare l'aiuto di un modello, se necessario.
Capire come utilizzare con successo i componenti su Figma può farti risparmiare molto tempo quando conduci un progetto di design. Imparando a creare un sistema di componenti di alta qualità, sarai in grado di crescere come designer. Non solo, può anche aiutarti a mantenere un flusso di lavoro coerente durante il tuo percorso creativo e consentire a qualsiasi futuro collaboratore di trovare facilmente il tuo lavoro.
Hai provato ad utilizzare Figma per i tuoi progetti creativi? Come hai trovato utilizzando i componenti? Facci sapere di più sulla tua esperienza nella sezione commenti qui sotto.
