Guida ai Figma per principianti

Con Figma è possibile progettare elementi di interfaccia, costruire siti web interattivi e prototipi di app, creare illustrazioni e lavorare con la grafica vettoriale. Molti designer lo usano anche per creare layout di siti web per Tilda.

• Interfaccia per applicazioni mobili-FigmaiOS UI kit.
• Prototipo del pannello di controllo della Tesla Model 3 e dei suoi elementi di interfaccia.

Ad esempio, i project manager e gli imprenditori possono utilizzare modelli di diagrammi di Gantt per la pianificazione o creare annunci sui social media utilizzando i preset per Facebook e altre piattaforme.

• Multipiattaforma

• Basato sul cloud

• Feedback incorporato

Chiunque abbia accesso può commentare un layout e ricevere un feedback direttamente sul progetto. In questo modo si accelera il processo di approvazione e si evita che le note più importanti rimangano sepolte nei messaggi di posta elettronica.

Dopo l'iscrizione, vedrete due spazi di lavoro principali:

1. Il file manager, dove è possibile creare progetti e regolare le impostazioni del profilo.
2. L'editor grafico stesso.

Figma Community è una funzione relativamente nuova che funziona come una piattaforma di social media all'interno dello strumento principale. Permette agli utenti di condividere e scoprire risorse di progettazione come modelli, kit UI e plugin. Per accedervi, fare clic sull'icona del globo.

I plugin sono essenzialmente strumenti ed estensioni di terze parti che ampliano le funzionalità di Figma. Contribuiscono a velocizzare i flussi di lavoro, a migliorare l'efficienza e a fornire funzionalità aggiuntive come librerie di immagini stock, icone, ecc.

Ad esempio, se installate il plugin Unsplash, potrete inserire immagini stock senza lasciare Figma, mentre Iconify vi dà accesso a oltre 40 000 icone vettoriali.

Gli utenti possono sviluppare e aggiungere plugin autonomamente, adattando le funzionalità di Figma alle loro esigenze specifiche.

Da quando Figma ha introdotto Figma Community, i plugin sono diventati parte integrante dell'interfaccia. È possibile trovare e sfogliare tutti i plugin disponibili.

Una volta collegati i plugin desiderati, questi sono accessibili dalla barra degli strumenti inferiore, nella scheda Plugin e widget.

La schermata di un nuovo file contiene tre aree principali: L'area di disegno, la barra degli strumenti e due barre laterali. La barra laterale sinistra contiene il pannello dei livelli. Ecco alcuni elementi chiave dell'interfaccia:

Per impostazione predefinita, tutte le nuove forme aggiunte sono colorate di grigio. Per cambiare il colore, selezionare "Scegli colore" dal menu a discesa Modifica. Si aprirà il selezionatore di colori, che consente di scegliere un nuovo colore identificando qualsiasi colore già utilizzato sulla tela.

"Seleziona tutto con..." evidenzia tutti gli elementi che condividono le stesse proprietà, riempimento, font o effetti, facilitando le modifiche in batch.

Questo menu aiuta a impostare l'area di disegno, facilitando la navigazione nel layout. È possibile attivare la griglia di pixel, mostrare i righelli, ingrandire o rimpicciolire, ecc.

Per massimizzare l'area di lavoro, è possibile nascondere il pannello dei livelli e l'interfaccia utilizzando le opzioni corrispondenti.

Gli oggetti posizionati sulla cornice sono elencati come "livelli" sulla sinistra. È anche possibile raggruppare gli oggetti (ad esempio, inserire un numero di telefono e un'e-mail nel piè di pagina). Allineare gli elementi all'interno della cornice utilizzando il pannello a destra, oppure raggrupparli con Oggetto → Selezione gruppo(Ctrl/Cmd + G).

È possibile definire il numero di colonne, regolare la trasparenza del colore e personalizzare la larghezza del bordo. È inoltre possibile scegliere il tipo di griglia, visualizzandola come griglia, colonne o righe.

• Per spostare e scalare gli oggetti sugli assi X e Y, utilizzare le impostazioni presenti nella parte superiore del pannello Proprietà.
• Utilizzare l'impostazione Raggio degli angoli in "Aspetto" per arrotondare gli angoli di una forma, ad esempio per rendere i bordi superiori di un rettangolo simili a un segnalibro. Per impostazione predefinita, il raggio si applica a tutti gli angoli. Per arrotondare solo angoli specifici, fare clic sull'impostazione Angoli singoli accanto ai campi di valore.

• Per regolare lo spessore del tratto, utilizzare l'impostazione "Tratto": inserire un valore o trascinare il cursore. Per nascondere il riempimento, fare clic sull'icona dell'occhio o del meno sotto "Riempimento".

• Per far assomigliare il rettangolo a una bandiera, estendere il bordo inferiore. Fare doppio clic sulla forma per modificarne i punti.

• Lo "Strumento piega" consente di smussare gli angoli o le curve.
• Il "secchio di vernice" consente di riempire un percorso chiuso.

• Riempimento: l'immagine viene scalata per coprire completamente la cornice, assicurando che non rimangano spazi vuoti. Se il rapporto d'aspetto dell'immagine è diverso da quello della cornice, alcune parti dell'immagine possono essere ritagliate per mantenere la copertura completa.

• Adatta: Visualizza l'intera immagine all'interno della cornice, conservando il rapporto d'aspetto originale. Se l'immagine e la cornice hanno proporzioni diverse, può risultare dello spazio vuoto (padding).

• Ritaglia: consente di regolare manualmente la parte dell'immagine visibile all'interno della cornice. È possibile riposizionare e ridimensionare l'immagine per concentrarsi su un'area specifica, tagliando via il resto. Le aree ritagliate vengono nascoste ma non eliminate, consentendo una modifica non distruttiva.

• Piastrella: Ripete l'immagine come un modello.

Le impostazioni disponibili consentono anche di eseguire correzioni fotografiche sull'immagine, regolando la luminosità, il contrasto, la saturazione e così via, o addirittura modificando una parte specifica della foto.

1. Posizionare un livello forma sotto il livello foto.
2. Selezionare entrambi i livelli.
3. Andare su Oggetto → Usa come maschera (scorciatoia: Ctrl + Alt + M su Windows o Cmd + Opt + M su macOS).

Figma supporta l'importazione di file SVG. È possibile trascinarli dal computer o copiarli e incollarli direttamente da Illustrator o Fresco. Questi file vengono spesso visualizzati come cornici. Nel pannello Livelli, è possibile raggruppare gli oggetti vettoriali premendo Ctrl + G (Windows) o Cmd + G (macOS) e spostarli sopra il livello della cornice.

• Solido: il tipo di riempimento predefinito, che applica un singolo colore all'oggetto.
• Lineare: Crea un gradiente lungo una linea retta tra due punti.
• Radiale: Genera un gradiente circolare che si irradia da un punto centrale.
• Angolare: Applica un gradiente che ruota attorno a un punto centrale, creando un effetto torta.
• Diamante: Produce un gradiente a forma di diamante che si irradia dal centro.
• Immagine: Riempie l'oggetto con un'immagine (o un video).

Modificando le posizioni degli estremi del gradiente, è possibile controllare la direzione e l'intensità della transizione di colore.

Per opzioni più creative, provate a sovrapporre le forme e ad applicare più gradienti. È possibile utilizzare le modalità di fusione per impilare forme o immagini in modi unici.

Se il collegamento tra un componente padre e un componente figlio è interrotto, è possibile ripristinare la connessione selezionando il componente figlio e facendo clic sull'icona Ripristina o Torna indietro. Questa azione ripristina tutti i parametri modificati manualmente, ristabilendo il collegamento con il componente padre.

Salvate tutte le variazioni in un riquadro dedicato, quindi applicatele ai livelli di testo secondo necessità.

• Staccare l'istanza figlio dal suo genitore usando l'opzione "Stacca istanza".
• Applicare il layout automatico.

• Fisso: Mantiene la larghezza/altezza statica in base ai parametri inseriti manualmente.
• Abbraccio: La cornice si ridimensiona automaticamente per adattarsi al contenuto.
• Riempimento: l'elemento riempie la larghezza o l'altezza del contenitore padre.

• A capo: Dispone gli oggetti in più righe o colonne all'interno di una cornice. Gli oggetti scorrono orizzontalmente e vanno a capo nella riga successiva quando lo spazio è limitato.
• Min/Max: imposta le dimensioni minime e massime per le cornici e gli elementi figlio, evitando che diventino troppo grandi o troppo piccoli.

Questo plugin consente di sfogliare oltre 40.000 icone vettoriali di Iconify, tra cui collezioni come Material Design, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji, ecc. e di inserirle rapidamente nel vostro progetto.

• Windows: Ctrl + Shift + E
• macOS: Cmd + Shift + E

• SVG: ideale per oggetti vettoriali come icone e grafica semplice, grazie alla sua scalabilità e nitidezza a qualsiasi dimensione.
• JPEG: più adatto per fotografie e immagini con sfumature, offre un buon equilibrio tra compressione e qualità.
• PNG: è preferito per le immagini che richiedono trasparenza o per quelle con testo e bordi netti, in quanto supporta la compressione senza perdita di dati.
• PDF: Utile per documenti e layout che devono conservare gli elementi vettoriali ed essere scalabili senza perdita di qualità.

• Discutere i progetti: Collaborare in tempo reale con chat e commenti vocali e persino incorporare musica. FigJam offre funzioni di intelligenza artificiale (attualmente in versione beta) come "Ordina", che organizza automaticamente le note adesive per argomento, e "Riassumi", che fornisce una rapida panoramica di tutte le note.
• Prendere appunti e analizzare le interviste ai clienti: I progettisti possono utilizzare un modello integrato per registrare le interviste agli utenti e quindi creare delle personas utente in base ai dati raccolti.
• Creare mappe del viaggio del cliente: Visualizzate i percorsi degli utenti: descrivete le azioni che compiono, le loro aspettative, le emozioni e i punti dolenti. Valorizzate ogni fase del percorso dell'utente utilizzando strumenti come note adesive, emoji e altri widget.

• Richiede il riavvio per aggiungere i font locali: La semplice installazione di un font sul computer non è sufficiente. È necessario riavviare Figma per caricarlo.
• Possibili imprecisioni nell'esportazione: A volte Figma aggiunge casualmente alcuni pixel di tratto o distorce le illustrazioni lineari quando si esportano file PNG, JPG o SVG.
• Nessuna protezione integrata del copyright: Nel piano Starter gratuito, non c'è modo di impedire a qualcuno di duplicare il vostro file e di modificare la propria copia.
• Richiede una connessione internet stabile: Come Google Docs o qualsiasi altro servizio basato sul cloud, Figma non consente la modifica offline. Se si perde la connessione, le modifiche non verranno salvate fino a quando non si tornerà online.
• Nessuna scorciatoia da tastiera personalizzata: Le scorciatoie disponibili in Figma sono fisse, ma è possibile utilizzare strumenti di terze parti come AutoHotkey per rimappare i tasti.
• Nessuna versione multilingue: Figma è attualmente disponibile solo in inglese e giapponese. Se vi serve in un'altra lingua, l'unico modo è usare l'estensione Google Translate per Chrome. Se avete esperienza con editor grafici come Photoshop o avete seguito questa guida, sarà più facile muoversi con Figma.

• Editor grafico online: tutto il team può lavorare contemporaneamente sullo stesso file, con tutti gli aggiornamenti salvati nel cloud.
• Cronologia delle versioni: Figma memorizza ogni modifica della versione, in modo da poter tornare indietro facilmente se necessario.
• Nessun vincolo di sistema operativo: Figma viene eseguito direttamente in un browser, quindi non richiede una configurazione complessa e funziona anche su computer portatili di dimensioni modeste. Tuttavia, se si preferisce, è possibile installare anche l'applicazione desktop.
• Modello Freemium: Il piano Starter gratuito supporta fino a due redattori, perfetto per molti freelance o piccoli team.
• Ideale per prototipi semplici: Il concetto generale e l'interfaccia sono progettati per la creazione di interfacce web e app. Tuttavia, per illustrazioni o modifiche fotografiche più avanzate, potrebbe essere necessario utilizzare uno strumento diverso.
• Ecosistema di plugin: Con centinaia di plugin disponibili (e la possibilità di crearne di propri), Figma può adattarsi alla maggior parte dei flussi di lavoro.