Creare un nuovo progetto su Figma

Il primo accesso a Figma: creare file progetti e gruppi di lavoro

creativecode avatar Giulio Tiseo

27 Nov, 2019

~8min.

In questo primo tutorial della Guida alla progettazione di Siti Web, ti mostrerò passo dopo passo come creare un nuovo progetto su Figma. Per metterti nelle condizioni di lavorare in totale armonia con il programma, troverai una panoramica chiara e dettagliata della configurazione di base che ti permetterà di comprendere i primi step che affronterai nel corso del Getting Started.

Creare un nuovo progetto su Figma
Requisiti

In questo tutorial ti parlerò del tuo primo accesso a Figma. Se non conosci Figma o non sai a cosa serve, leggi l’articolo Figma: il miglior tool per realizzare il design di siti web e app, per farti un’idea del programma prima di cominciare.

# Registra il tuo account e inizia subito un nuovo progetto su Figma

Homepage di Figma
Homepage di Figma

Se hai letto l’articolo introduttivo a Figma, saprai già che si tratta di una web app che ti permette di realizzare prototipi di siti web e app in un ambiente integrato e gratuito. Quando ti parlo di web app faccio riferimento ad un tipo di applicazione che può essere eseguita attraverso il browser. Tale caratteristica rappresenta un discreto vantaggio in termini di praticità perché ti permette di lavorare al tuo progetto immediatamente, senza dover installare nulla sul computer.

Per iniziare un nuovo progetto su Figma, sarà sufficiente andare sul sito ufficiale figma.com e creare un nuovo account facendo click su Sign Up.

Potrai scegliere di effettuare la registrazione diretta se sei in possesso di un profilo Google, oppure creare un account da zero compilando i campi con email e password.

Figma è un’applicazione che ti permette di realizzare un numero infinito di design da conservare nel cloud. Ogni file verrà memorizzato in automatico dal sistema, direttamente sul tuo profilo e non dovrai mai più preoccuparti di perdere dati a causa di un crash inaspettato (evento piuttosto raro in Figma).

Registrare account Figma
Modulo di registrazione a Figma

Un altro vantaggio non da poco sta nella possibilità di effettuare l’accesso all’applicazione da un qualsiasi dispositivo e continuare a lavorare da una qualsiasi altra postazione connessa a internet.

Se ti è più comodo, è comunque presente su figma.com la sezione Download dove potrai scaricare gratuitamente il setup di Figma in versione desktop. In questo modo potrai installare l’applicazione sul tuo Sistema operativo (disponibili Windows e iOS) e poter accedere alle risorse senza necessariamente passare dal browser.

Naturalmente lavorare sull’app non preclude nulla. La base dati resta la stessa, per cui ogni progetto sarà disponibile su entrambe le versioni di Figma.

Per scaricare l’applicazione clicca qui oppure cerca la pagina dei downloads scorrendo l’homepage in basso, nella sezione Resources.

Trovare download Figma
Puoi trovare il link alla pagina download nel footer del sito ufficiale

# Creare il team che lavorerà al progetto

Una volta effettuato l’accesso a Figma, verrai reindirizzato immediatamente alla homepage del programma dove compariranno una serie di messaggi di benvenuto che ti guideranno nelle prime fasi di utilizzo di Figma.

Benvenuto figma al primo accesso
Il messaggio di benvenuto di Figma al primo accesso

Approfittiamo di questo rapido Getting Started per effettuare le prime configurazioni di base creando velocemente un nuovo team di lavoro!

Creare team su Figma
Inserisci il nome del team

Non appena avrai dato un nome al team, la guida ti chiederà di riportare l’indirizzo email dei tuoi collaboratori di modo che il sistema possa inviare loro un messaggio di invito per unirsi al gruppo.

Aggiungere collaboratori
Seleziona i collaboratori del tuo team oppure vai avanti cliccando su “Skip for now”

Attenzione: la configurazione che stai eseguendo in questa fase, potrà essere modificata anche in seguito, quindi sentiti libero di saltare questa parte facendo click su Skip for now oppure lascia vuoto il form se non sai ancora con chi condividere il progetto.

Per creare il nostro primo progetto selezioniamo il piano Free. Le alternative sono Professional e Organization
Scegliamo il piano free per il nostro primo progetto su Figma

A questo punto per completare il setup iniziale, Figma ci chiede se intendiamo sottoscrivere un abbonamento a pagamento o meno. Per i nostri scopi sarà più che sufficiente scegliere l’offerta compresa nel piano gratuito; posso dirti che per l’uso che ho fatto di Figma nel corso di questi anni, non ho mai avuto bisogno di passare ai piani professional ma nel caso di grandi aziende è probabile ce ne sia bisogno.

Se hai bisogno di farti un’idea sul piano che si adatta di più alle tue esigenze, questo elenco potrà aiutarti nella scelta:

  • Free: se sei uno studente o un web designer freelance. Lavori la maggior parte del tempo per conto tuo su progetti dal budget non estremamente elevato e non hai bisogno di condividere i file con tante persone contemporaneamente;
  • Professional: se sei un freelancer che lavora a progetti piuttosto complessi che richiedono un budget elevato e l’impiego di un lungo tempo di lavorazione.
  • Organization: è la soluzione per le aziende, a limite potresti trovarla già disponibile sul posto di lavoro. È adatto alle agenzie che hanno a disposizione un team di 5 o più creativi. Questa soluzione permette di accedere ad una serie di funzionalità di gestione dei gruppi di lavoro e delle risorse estremamente avanzate.

Come creo un team fuori dal Getting Started?

Per creare un nuovo team al di fuori del Getting Started, dovrai fare click sulla voce “+ New Team…” che puoi trovare in basso a sinistra sulla sidebar. Da lì in poi i passaggi saranno identici a quelli appena visti.

# Creazione di un nuovo progetto

Fantastico! Ora che il tuo team è pronto ti troverai davanti al Team Space di Figma, ovvero una scheramata simile a questa:

Suggerimento per creare un nuovo progetto su Figma
Al centro puoi osservare il suggerimento per creare un nuovo progetto

Qui potrai gestire i collaboratori, impostare i permessi e navigare fra i progetti aperti dal tuo team.

Per invitare nuovi membri basterà fare click sul link “+ Invite Members” presente nella sidebar a destra

A questo punto Figma ci suggerisce di creare un nuovo progetto. Senza perdere tempo proseguiamo con le indicazioni suggerite dal Getting Started e chiamiamo questo progetto Progettare siti web con Figma. Lavoreremo su questo progetto nel corso di tutto il Modulo A.

Attribuisci un nome al nuovo progetto Figma

A questo punto non resta che fare click sul bottone Create project per registrare la nuova istanza sul tuo profilo.

# La struttura gerarchica di file e utenti in Figma

Prima di proseguire vorrei sottolineare l’importanza di ciò che hai appena fatto fino ad ora. Se è vero che ci siamo limitati a seguire il percorso indicato dall’ottimo tutorial di Figma, è anche vero che lo lo abbiamo fatto trascurando per un attimo quella che è la logica strutturale del programma.

Non c’è problema, recuperiamo subito…

Per il momento abbiamo creato un Team di lavoro al quale è stato associato un piano gratuito (Free plan). Dopodiché, all’interno della vista dedicata al team, abbiamo iniziato un nuovo progetto (Project).

Bene, devi sapere che in Figma si organizza il lavoro secondo una struttura gerarchica ben definita. Ciascun profilo può accedere ad un insieme di team, cartelle, file e pagine. Osserva lo schema in basso e analizziamolo insieme:

Struttura gerarchica File Figma
Struttura gerarchica di file e utenti in Figma

Come vedi, attraverso una struttura gerarchica a grappolo, Figma ti permette di gestire attraverso il tuo profilo un insieme di team che potranno curare una serie di progetti (fino a tre nel piano gratuito). Ogni progetto può contenere al suo interno un numero infinito di file (File) e pagine (Pages).

Le pagine non sono altro che dei documenti allegati ad un file che permettono di suddividere in modo più efficace e ordinato il lavoro. Avremo modo di tornarci più avanti.

Fai mente locale su questa struttura prima di lanciarti nella progettazione; in questo modo potrai realizzare dei progetti precisi e ordinati senza dover penare nel caos di ventimila file creati e abbandonati nel File Space.

Ora che hai creato il primo progetto su Figma, puoi passare alla creazione di un file.

# Creazione di un File

Fai click sulla voce “New File” in alto a destra per creare il primo file del progetto. In pochi istanti si aprirà in nuova finestra un’area di lavoro intitolata Untitled.

Come vedi l’editor di Figma è estremamente pulito, perdersi è praticamente impossibile. Attraverso l’editor avrai modo di lavorare con immagini vettoriali che potrai creare attraverso gli strumenti a tua disposizione nella toolbar o importandoli direttamente nella canvas.

Parleremo in modo approfondito dell’editor di Figma nel prossimo articolo, per ora limitiamoci ad osservare questa prima schermata ed editiamo il nome del file appena creato e chiamiamolo “Strumenti di base“.

Per farlo, seleziona la voce “Untitled” che trovi al centro della toolbar in alto e digita il nuovo titolo.

Rinominare un file in Figma

Facendo click sulla freccetta che punta verso il basso, accanto il nome Strumenti di base, potrai aprire un menu a tendina che mostrerà una serie di azioni che potrai applicare a questo specifico file. In particolare potrai:

  • Vedere la version history delle modifiche effettuate su questo file (durata 30 giorni);
  • Esportare i contenuti visibili nella canvas;
  • Duplicare il file;
  • Rinominare il file;
  • Eliminare il file;
  • Spostare il file verso un altro progetto.

Per tornare indietro alla lista dei files compresi nel progetto, fai click sull’icona del menu presente sulla sinistra della toolbar e seleziona Back To Files.

Come puoi notare, adesso è comparso nel Team Space del progetto intitolato Progettare siti web con Figma, un nuovo file chiamato Strumenti di base.

Vista dei files in nel progetto Figma

Fantastico, hai creato il tuo primo progetto su Figma! Ora è il momento di sperimentare le funzionalità che ci offre questo straordinario tool.

Appuntamento al prossimo articolo!

“Come usare Figma” sarà pubblicato entro il 9 Dicembre 2019 sulla Guida alla progettazione di siti web con Figma.

Vai sulla nostra pagina Facebook e seguici per non perderti gli aggiornamenti dal sito.