Come aggiungere icone in Figma

Scopri come aggiungere icone in Figma usando plugin, caricamenti SVG e librerie di design. Una guida passo passo per migliorare i tuoi design UI con icone personalizzate e predefinite.

Crea video e documentazione di prodotto straordinari con l’IA

Questo tutorial è stato creato con Trupeer in meno di 5 minuti

Crea gratuitamente

Utilizzo dei plugin per icone:

Installa un plugin: Vai su "Plugin" nel menu di Figma,
seleziona "Browse all plugins...", e cerca il plugin di icone desiderato (ad es., Iconify, Material Design Icons, Font Awesome).
Installa il plugin: Fai clic su "Install" per aggiungerlo al tuo file di Figma.
Sfoglia e aggiungi: Avvia il plugin (clic destro -> Plugins -> [Nome del plugin]), sfoglia la libreria di icone e fai clic per importare oppure trascina e rilascia l'icona sulla tua area di lavoro.
Personalizza: Proprio come gli SVG importati, puoi personalizzare le icone del plugin secondo le tue esigenze.
Esempio: Utilizzo di Material Design Icons: Apri il plugin Material Design Icons, cerca un'icona (ad es., "home"), e fai clic per aggiungerla al tuo progetto.

Guida passo passo: come aggiungere icone in Figma

Passo 1

Seleziona l'opzione "Actions".

Passo 2

Nella console di ricerca, inserisci "Iconify" per trovare il plugin necessario.

In the search console, enter "Iconify" to find the necessary plugin.

Passo 3

Dopo la comparsa dei risultati della ricerca, fai clic sull'opzione "Iconify".

After the search results appear, click on the "Iconify" option.

Passo 4

Quindi seleziona l'icona,

Passo 5

Fai clic sull'opzione "Import as a component".

Click the "Import as a component" option.

Passo 6

Ora vedrai l'icona aggiunta al tuo frame. Regola l'icona secondo necessità per soddisfare le specifiche del tuo progetto.

You will now see the icon added to your frame. Adjust the icon as necessary to meet your project specifications.

Consigli pratici per aggiungere icone in Figma

Usa i plugin di icone integrati
Figma dispone di diversi plugin gratuiti come “Iconify”, “Feather Icons” e “Material Design Icons”. Per usarli, vai nella barra dei menu, fai clic su “Resources”, seleziona la scheda “Plugins” e cerca il plugin di icone che desideri. Una volta installato, puoi trascinare e rilasciare le icone direttamente nel tuo design.
Copia le icone da librerie esterne
Puoi visitare librerie di icone gratuite come Font Awesome o Google Material Icons, quindi copiare le versioni SVG delle icone e incollarle nel tuo file Figma. Questo è utile quando ti servono icone specifiche per un brand o universalmente riconosciute.
Importa file SVG
Se hai icone salvate come file SVG sul tuo computer, puoi importarle in Figma semplicemente trascinandole sulla canvas. Figma manterrà la qualità vettoriale e consentirà di ridimensionarle e modificarne facilmente i colori.
Usa i componenti per mantenere la coerenza
Converti le icone usate di frequente in componenti. In questo modo, se devi aggiornarne una, l'aggiornamento verrà applicato automaticamente a tutte le istanze nel tuo design.
Organizza le icone in una libreria
Crea una libreria condivisa di componenti di icone per il tuo team. Questo favorisce la coerenza e fa risparmiare tempo, rendendo le icone usate più spesso accessibili da un unico punto centrale.

Errori comuni e come evitarli

Non convertire in tracciati
Alcune icone incollate da fonti esterne potrebbero non essere modificabili. Fai clic con il tasto destro sull'icona e seleziona “Outline Stroke” o “Flatten” per convertirle in forme modificabili.
Usare troppi stili
Evita di mescolare stili di icone diversi (ad es. filled, outline, duotone) in un unico design. Mantieni uno stile coerente in tutto il progetto per una maggiore uniformità visiva.
Importare immagini di bassa qualità
Usa sempre formati SVG o vettoriali invece di PNG o JPG per mantenere la nitidezza a qualsiasi dimensione.
Ridimensionare senza tenere premuto Shift
Quando ridimensioni le icone, tieni premuto Shift per mantenere le proporzioni ed evitare distorsioni.
Dimenticare di nominare i livelli
Assegna sempre nomi chiari ai livelli o ai componenti delle icone. Aiuta nell'organizzazione e rende la ricerca più semplice, soprattutto nei file di progetto più grandi.

FAQ comuni sull'aggiunta di icone in Figma

Posso personalizzare il colore delle icone in Figma?
Sì, se l'icona è un vettore (SVG), puoi modificarne facilmente il colore di riempimento e del contorno nel pannello delle proprietà sulla destra.
I plugin costano denaro?
La maggior parte dei plugin per icone come Iconify è gratuita. Alcuni plugin avanzati possono avere funzionalità a pagamento, ma le librerie di icone di base sono solitamente disponibili senza costi.
Posso usare le mie icone personalizzate?
Sì, puoi importare i tuoi design di icone in Figma caricandoli o trascinandoli nel tuo file.
Come posso mantenere la coerenza delle icone in un progetto?
Usa componenti e stili. Crea un sistema di design in cui tutte le icone si basano sulle stesse regole di dimensione, peso e colore.
Posso animare le icone in Figma?
Puoi applicare transizioni di base usando le funzionalità di prototipazione di Figma, ma per animazioni avanzate potresti aver bisogno di strumenti come Figmotion o di esportare le icone per usarle in app esterne.
Come registrare lo schermo su mac?
Per registrare lo schermo su un Mac, puoi usare Trupeer AI. Ti consente di catturare l'intero schermo e offre funzionalità di IA come l'aggiunta di avatar IA, l'aggiunta di voce narrante, l'aggiunta di zoom avanti e indietro nel video. Con la funzione di traduzione video IA di Trupeer, puoi tradurre il video in oltre 30 lingue.
Come aggiungere un avatar IA a una registrazione dello schermo?
Per aggiungere un avatar IA a una registrazione dello schermo, dovrai usare uno strumento di registrazione dello schermo con IA. Trupeer AI è uno strumento di registrazione dello schermo con IA, che ti aiuta a creare video con più avatar e ti aiuta anche a creare il tuo avatar per il video.
Come registrare lo schermo su windows?
Per registrare lo schermo su Windows, puoi usare la Game Bar integrata (Windows + G) oppure uno strumento IA avanzato come Trupeer AI per funzionalità più avanzate come avatar IA, voce narrante, traduzione, ecc.
Come aggiungere la voce narrante a un video?
Per aggiungere la voce narrante ai video, scarica l'estensione Chrome di trupeer ai. Dopo la registrazione, carica il tuo video con voce, scegli la voce narrante desiderata da trupeer ed esporta il video modificato.
Come faccio a ingrandire in una registrazione dello schermo?
Per ingrandire durante una registrazione dello schermo, usa gli effetti zoom in Trupeer AI, che ti consentono di ingrandire e rimpicciolire in momenti specifici, migliorando l'impatto visivo dei contenuti video.