Come creare un progetto con Figma

Iniziare a utilizzare Figma
SmartWorld team
SmartWorld team
Come creare un progetto con Figma

In questa guida, scopriremo come creare e personalizzare un progetto con Figma.

Indice

Cos’è Figma?

Figma è uno strumento di progettazione di interfacce utente (UI) basato su cloud che consente ai designer di creare, prototipare e collaborare in tempo reale su progetti di design. È molto popolare tra i designer di UI/UX per la sua capacità di supportare la collaborazione simultanea tra più utenti, facilitando il lavoro di squadra e migliorando l'efficienza del processo di design.

Più utenti possono lavorare sullo stesso progetto contemporaneamente, vedendo le modifiche degli altri in tempo reale. Figma consente di creare prototipi interattivi delle interfacce, permettendo di simulare il comportamento dell'applicazione o del sito web.

Figma, creare un account

Prima di tutto, dovrete creare un account. Entrate nel sito web ufficiale e premete "Get started" o "Get started for free".

Come creare rapidamente un account Figma (l'editor di grafica vettoriale e strumento di prototipazione) dal sito web ufficiale: il pulsante “Get started” o “Get started for free”, posizionato nella parte alta dello schermo

Come creare rapidamente un account Figma (l'editor di grafica vettoriale e strumento di prototipazione) dal sito web ufficiale: il pulsante “Get started” o “Get started for free”, posizionato nella parte alta dello schermo.

Inserite il vostro indirizzo e-mail (che potete creare con piattaforme come Gmail, Libero mail, Yahoo Mail, Virgilio Mail etc.) e una password sicura. Potete anche iscrivervi rapidamente con il vostro Account Google.

La schermata che consente di scegliere le credenziali per il proprio account Figma, ovvero l'indirizzo e-mail e la password

La schermata che permette di scegliere le credenziali per il proprio account Figma, ovvero l'indirizzo e-mail e la password: queste informazioni consentiranno di effettuare l'accesso successivamente.

Creare un progetto Figma dal sito web ufficiale

Vorreste creare un progetto utilizzando direttamente la piattaforma web? Aprite un browser, collegatevi al sito web e fate click su "Log in".

Il sito web ufficiale di Figma in un computer: il pulsante "Login", posizionato nella parte alta dello schermo, permette di accedere al proprio account

Il sito web ufficiale di Figma in un computer: il pulsante "Login", posizionato nella parte alta dello schermo, permette di accedere al proprio account.

Digitate le credenziali (indirizzo e-mail e password) oppure premete "Continue with Google".

Come accedere al proprio account Figma: utilizzare le credenziali dell'account Google (1) oppure le credenziali (indirizzo e-mail e password) della piattaforma (2)

Come accedere al proprio account Figma: utilizzare le credenziali dell'account Google (1) oppure le credenziali (indirizzo e-mail e password) della piattaforma (2).

Nella schermata principale di Figma, cliccate "Design file", il pulsante posizionato nella parte alta.

Il sito web ufficiale di Figma, l'editor di grafica vettoriale e strumento di prototipazione: il pulsante "Design file" consente agli utenti di creare un nuovo progetto

Il sito web ufficiale di Figma, l'editor di grafica vettoriale e strumento di prototipazione: il pulsante "Design file" consente agli utenti di creare un nuovo progetto.

Scegliete dove salvare il file.

Creare un progetto Figma dall’applicazione

Potete utilizzare anche l'applicazione ufficiale. Prima di tutto, effettuate il download (qui trovate tutti i dettagli).

  1. Collegatevi al sito web ufficiale (cliccando qui);
  2. Individuate la sezione "Desktop app";
  3. Premete l'opzione corretta per il vostro sistema operativo: "Desktop app for macOS" o "Desktop app for Windows";
  4. Avviate il file e completate l'installazione.
Come scaricare l'applicazione di Figma in un computer: la schermata "Desktop app" (1), le voci "Desktop app for macOS" (2, per scaricare la versione per computer Apple), "Desktop app for Windows" (3, il download della versione per computer con Microsoft Windows) e "Beta apps available here" (4, per trovare e scaricare le versione "Beta")

Come scaricare l'applicazione di Figma in un computer: la schermata "Desktop app" (1), le voci "Desktop app for macOS" (2, per scaricare la versione per computer Apple), "Desktop app for Windows" (3, il download della versione per computer con Microsoft Windows) e "Beta apps available here" (4, per trovare e scaricare le versione "Beta", ovvero in fase di prova e collaudo).

Ora, potete creare il vostro primo progetto.

  1. Avviate Figma;
  2. Fate click su "Log in with browser";
  3. Digitate le vostre credenziali oppure procedete con l'Account Google;
  4. Fate click su "Design file";
  5. Scegliete dove creare il nuovo progetto.

Figma, personalizzare un progetto

Ora potete personalizzare il vostro progetto.

Prima di tutto, vi consigliamo di inserire il titolo del progetto al posto di "Untitled". Selezionate lo strumento "Frame" (cliccando il pulsante corrispondente oppure la "F" sulla tastiera) per creare i "frame", uno degli elementi fondamentali del design, dei contenitori versatili che possono essere utilizzati per organizzare e strutturare il contenuto del progetto. Possono contenere altri elementi di design, come forme, testo, immagini e persino altri frame.

I frame sono utilizzati anche nella creazione di prototipi interattivi. Possono rappresentare diverse schermate o stati di un'interfaccia utente e collegarsi tra loro per simulare la navigazione e l'interazione.

Oltre ai frame, Figma offre vari strumenti per inserire e progettare tutti gli elementi necessari per un sito web o un'applicazione:

  • Rectangle (tasto "R"): crea rettangoli e altre forme di base per costruire layout e design.
  • Pen (tasto "P"): disegna forme vettoriali personalizzate con punti e linee, utile per icone e illustrazioni.
  • Text (tasto "T"): inserisce caselle di testo per aggiungere contenuti scritti.
  • Resources (tasto "Shift+i"): per accedere a componenti, icone e altre risorse utili per il design, inclusi componenti riutilizzabili.
  • Hand tool (tasto "H"): permette di muoversi liberamente all'interno del canvas di lavoro per esplorare e modificare diverse parti del progetto.
  • Add comment (tasto "C"): per aggiungere commenti direttamente sul progetto per facilitare la collaborazione e la comunicazione con il team.
Come creare e personalizzare un progetto su Figma: il pulsante "Frame" (1,  per creare elementi fondamentali che permettono di organizzare e strutturare i componenti di un progetto di design), gli strumenti disponibili (2, che aiutano i designer a creare, collaborare e prototipare efficacemente) e la voce che consente di modificare il titolo (3)

Come creare e personalizzare un progetto su Figma: il pulsante "Frame" (1, per creare elementi fondamentali che permettono di organizzare e strutturare i componenti di un progetto di design), gli strumenti disponibili (2, che aiutano i designer a creare, collaborare e prototipare efficacemente) e la voce che consente di modificare il titolo (3).

Come scaricare l’app mobile e testare il progetto Figma

Per visualizzare e testare le creazioni, potete scaricare l'applicazione per Android, iPhone e iPad.

  1. Accendete il vostro dispositivo;
  2. Aprite Google Play Store (Android) o App Store (iPhone e iPad);
  3. Utilizzate il campo di ricerca per individuare l'applicazione;
  4. Trovate l'app che desiderate scaricare;
  5. Fate click su "Ottieni" oppure "Installa";
  6. Una volta completata l'installazione, troverete l'icona di Figma aggiunta al menu delle applicazioni.

Successivamente, aprite l'applicazione, effettuate l'accesso (digitando le credenziali) e selezionate il progetto che vorreste testare.

Altre guide su Software grafico:

Tips, tricks e news!
Tutto il meglio della tecnologia in video brevi!
Seguici