In questo articolo discuteremo gli elementi dell’interfaccia di Figma. Familiarizzare con l’interfaccia all’inizio renderà il tuo lavoro successivo molto più facile. Discuteremo del browser dei file e dell’interfaccia dell’applicazione durante la modifica di un file. Continua a leggere per scoprire di più.
La prima cosa che vedrai dopo aver effettuato l’accesso a Figma sarà il Browser dei file, che ti permetterà di navigare nel tuo account. Da qui, puoi accedere ai tuoi progetti, team e risorse. L’interfaccia del browser dei file è composta da 3 sezioni: Barra di navigazione, Barra laterale e File.
1. La barra di navigazione si trova nella parte superiore dello schermo e ti consente di eseguire determinate azioni a livello di account.
A) Nome utente – qui viene visualizzato il nome dell’utente attivo. Cliccando, puoi passare tra gli account a cui sei connesso su un determinato dispositivo.
B) Barra di ricerca – in questa sezione, puoi cercare rapidamente progetti, colleghi e file per nome.
C) Notifiche – qui appariranno le notifiche su tutto ciò che accadrà nel tuo account.
D) Menu account – qui puoi gestire le impostazioni del tuo account e i plugin installati.
Consiglio utile: Se stai utilizzando l’app desktop di Figma, puoi facilmente passare tra progetti e il browser dei file. I progetti si aprono come nuove schede e il browser dei file è contrassegnato con l’icona Home.
2. Barra laterale – questa è l’area dell’interfaccia situata sul lato sinistro dello schermo. Ti consente di navigare tra file e prototipi.
Recenti – in questa scheda vengono visualizzati per primi i file e i prototipi che hai recentemente visualizzato o modificato.
Bozze – qui vedrai tutte le versioni di bozza che hai creato. Inoltre, troverai la scheda Eliminati dove puoi visualizzare i file archiviati.
Puoi ripristinare o eliminare permanentemente i file già eliminati – fai clic destro sul file per vedere queste opzioni.
Comunità – questo è uno spazio dove puoi sfogliare file e plugin condivisi da altri utenti di Figma. Torneremo su questa sezione nel nostro prossimo post del blog.
Team – qui vedrai tutti i team a cui appartieni.
3. File – in questa sezione verranno visualizzati tutti i tuoi file.
Per ogni pagina nel browser dei file, puoi scegliere come visualizzare i file: Mostra come griglia o Mostra come elenco. Per impostazione predefinita, è impostata la visualizzazione a griglia.
I file possono essere filtrati e ordinati secondo le tue esigenze.
Al di sopra dell’elenco dei file nelle schede Recenti e Bozze, ci sono pulsanti per aggiungere file: Nuovo file di design o Nuovo file FigJam. Ogni tipo di file ha il proprio set di funzionalità e strumenti.
I file di design ti permetteranno di creare i tuoi design dell’interfaccia.
I file FigJam sono lavagne digitali utilizzate, tra le altre cose, per riunioni e workshop online.
Compito 2.1. Familiarizza con l’interfaccia del browser dei file in Figma e apri il tuo primo progetto. Usa il pulsante Nuovo file di design.
La tua interfaccia utente quando modifichi un file in Figma è composta da quattro sezioni: Canvas, Toolbar, Pannello dei livelli, Pannello delle proprietà.
1. Canvas è l’area principale, situata al centro dello schermo. Questo è lo spazio in cui lavorerai.
2. Toolbar è la barra situata nella parte superiore dello schermo. Qui troverai gli strumenti e le funzioni necessarie per progettare interfacce.
a) Menu principale – in questo luogo hai accesso all’elenco di tutte le funzioni in Figma. Le scorciatoie da tastiera sono anche visualizzate nell’elenco.
Consiglio utile: Puoi visualizzare tutte le Scorciatoie da tastiera in un pannello speciale. Per attivarlo, fai clic su Menu principale > Aiuto e account > Scorciatoie da tastiera.
Il menu principale contiene le seguenti opzioni:
b) Strumenti di spostamento e scala
c) Strumenti di Frame e Slice
d) Strumenti di forma – qui troverai forme geometriche di base e la funzione Inserisci immagine.
e) Strumenti Penna e Matita
f) Strumento di testo – crea livelli di testo.
g) Strumento mano – ti consente di muoverti nel progetto e cliccare all’interno del file senza selezionare e spostare accidentalmente oggetti.
h) Strumento commento – ti consente di scambiare rapidamente idee con i membri del team.
i) Nome file – qui puoi vedere e cambiare la posizione del file o il suo nome.
j) Utenti – qui vedrai le persone che stanno attualmente visualizzando o modificando un file.
Consiglio utile: Quando lavori in un team, puoi cliccare sull’avatar di un altro utente per attivare la modalità di osservazione e monitorare le loro azioni in tempo reale. Il canvas e l’avatar dell’utente monitorato saranno contrassegnati con un bordo colorato quando la modalità di osservazione è attivata.
Puoi anche renderti più visibile in modo che gli altri membri del team possano facilmente monitorare le tue azioni. Clicca sul tuo avatar e seleziona “Metti in evidenza me”.
k) Impostazioni di condivisione – qui puoi gestire l’accesso di altri utenti al file.
l) Presenta – questa opzione ti consente di visualizzare il file e interagire con i prototipi creati.
m) Opzioni di zoom/visualizzazione – qui puoi regolare rapidamente le opzioni di visualizzazione del file.
3. Il pannello dei livelli è l’area sul lato sinistro dello schermo. Qui verranno visualizzati tutti i componenti e i livelli del file.
a) Livelli – qui vedrai tutti gli oggetti aggiunti al Canvas. Ogni oggetto è un livello separato. Accanto a ciascun livello vedrai un’icona che indica il suo tipo.
Puoi cambiare il nome del livello facendo doppio clic sul livello selezionato nel pannello dei livelli.
Consiglio utile: Non è facile ricordarsi di cambiare i nomi dei livelli predefiniti, ma cerca di tenerlo a mente. Questo manterrà il tuo file in ordine e renderà più facile trovare un elemento specifico quando vuoi modificarlo. Tuttavia, se dovessi dimenticarlo, non è tutto perduto. Ci sono plugin come “Clean Document” che ti aiuteranno a ripulire il disordine.
I nuovi livelli di oggetti vengono posizionati nel frame o nel gruppo genitore. Questo rende possibile comprimere ed espandere la visualizzazione dei livelli di frame e gruppo.
Puoi bloccare e sbloccare ciascun livello. Per farlo, fai clic sull’icona del lucchetto che appare accanto al nome del livello quando passi il mouse sopra il livello. Sarai in grado di distinguere facilmente i livelli bloccati o invisibili dagli altri livelli, poiché saranno contrassegnati con un’icona appropriata.
Consiglio utile: La possibilità di bloccare i livelli è molto utile, soprattutto quando alcuni di essi sono sullo sfondo. Questo ti aiuterà a evitare di spostare accidentalmente elementi.
Qui puoi anche attivare e disattivare la visibilità dei livelli selezionati. Per farlo, fai clic sull’icona dell’occhio. Puoi differenziare molto facilmente tra livelli bloccati e disabilitati nell’elenco dei livelli – sono contrassegnati con icone appropriate.
b) Assets – In questa scheda vedrai i componenti che puoi utilizzare nel tuo file. Questi possono essere icone, pulsanti o altri elementi dell’interfaccia utente più complessi. Per trovare un componente specifico utilizza la casella di ricerca. I componenti possono essere cercati nel file corrente e nelle librerie a cui hai accesso.
c) Pagina – Puoi aggiungere un numero illimitato di pagine in ogni file. Ogni pagina ha il suo sfondo Canvas, quindi puoi creare prototipi separati in un file.
Consiglio utile: Puoi regolare la larghezza del pannello dei livelli. Per farlo, afferra il bordo destro di questo pannello – il tuo cursore si trasformerà in una doppia freccia bianca. Quindi trascina il bordo fino a ottenere la larghezza desiderata.
4.Pannello delle proprietà è l’area sul lato destro dello schermo, che consiste in tre schede: Design, Prototype, Inspect.
a) Design – qui puoi visualizzare e regolare le proprietà di tutti i livelli: frame, forme e testi.
b) Prototype – qui troverai le impostazioni del prototipo e le connessioni tra gli elementi nel file.
c) Inspect – in questa scheda puoi vedere come inserire gli oggetti individuali del tuo progetto nel codice. I formati disponibili sono: CSS, Android e iOS.
Compito 2.2. Familiarizza con l’interfaccia del file in Figma. Assicurati di conoscere già i nomi degli elementi principali dell’interfaccia in modo che ti sarà più facile navigare nel file durante l’esecuzione di compiti pratici.
Questo è tutto ciò che devi sapere sull’interfaccia di Figma. Dai un’occhiata ai nostri altri articoli: Scaling scrum.
Se ti piace il nostro contenuto, unisciti alla nostra comunità di api laboriose su Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.
Un designer grafico e UX che trasmette nel design ciò che non può essere espresso a parole. Per lui, ogni colore, linea o font utilizzato ha un significato. Appassionato di design grafico e web.
Sai come creare un ebook? Conosci tutti gli aspetti essenziali del processo di produzione di…
Il marketing sostenibile non è più solo una delle strategie di marketing che puoi adottare…
Recentemente, sono emersi due fenomeni nel mercato del lavoro riguardanti gli atteggiamenti dei dipendenti e…
Come vendere su Pinterest e perché dovresti farlo? Vendere su Pinterest è un altro modo…
Sei un freelance alla ricerca di modi per promuovere il tuo portfolio? Oggi non solo…
La gestione finanziaria digitale e la contabilità online sono diventate sempre più popolari nel mondo…