Interfaccia Figma – informazioni di base | Figma per principianti #2

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ù.

Interfaccia di Figma – indice:

1. Interfaccia del browser dei file
2. Interfaccia del file

Interfaccia del browser dei file nell’interfaccia di Figma

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.

Interfaccia del file

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:

• Torna ai file – ti riporta al browser dei file.
• Azione rapida – qui puoi cercare le funzioni di cui hai bisogno per nome.
• File – ti consente di Salvare ed Esportare file.
• Modifica – qui troverai funzioni di base per modificare file, come Annulla, Ripeti, Copia, Incolla e funzioni avanzate per selezionare oggetti.
• Visualizza – ti consente di controllare le impostazioni di visualizzazione delle Griglie e Righelli, contiene anche funzioni per zoomare e navigare all’interno di un file.
• Oggetto – qui troverai tutte le funzioni necessarie per lavorare con gli oggetti.
• Testo – ti consente di formattare il testo (Grassetto, Corsivo, Allineamento) e creare elenchi puntati e numerati.
• Organizza – ti consente di organizzare gli oggetti utilizzando molte varianti delle funzioni Allinea e Distribuisci.
• Plugin – qui puoi gestire i plugin installati. I plugin estendono la funzionalità di Figma e rendono più facile il processo di design.
• Integrazioni – utilizzando questa funzione puoi condividere i tuoi design nelle applicazioni collegate.
• Preferenze – qui puoi personalizzare le impostazioni di Figma, per quanto riguarda il trascinamento degli oggetti e la visibilità degli elementi selezionati.
• Librerie – questo modulo conterrà componenti e stili che puoi utilizzare nel tuo file.

b) Strumenti di spostamento e scala

• Strumento di spostamento ti consente di spostare oggetti nel Canvas e riordinare i livelli nel pannello dei livelli.
• Strumento di scala ti consente di ridimensionare i livelli senza distorcerli.

c) Strumenti di Frame e Slice

• Strumento Frame ti consente di scegliere la dimensione dello schermo del dispositivo su cui stai progettando.
• Strumento Slice ti consente di esportare una parte specifica dello schermo in un nuovo livello.

d) Strumenti di forma – qui troverai forme geometriche di base e la funzione Inserisci immagine.

e) Strumenti Penna e Matita

• Strumento Penna è utilizzato per creare forme personalizzate.
• Strumento Matita ti consente di aggiungere immagini disegnate a mano.

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.