C’è una vastità immensa di modi con cui è possibile creare dei siti web, ma online è molto
difficile trovare guide effettivamente utili per la creazione di un sito, specialmente se lo si vuole
creare con uno specifico, come può essere Figma.
In questo articolo troverai una guida completa su come creare un intero sito web su Figma.
Perchè su Figma? Al momento Figma è uno dei migliori programmi, in quanto semplicità e di intuitività, su cui creare un sito web, oltre ad essere molto sottovalutato come metodo.
Perciò, nel seguente articolo, troverai una guida completa per creare un sito web si Figma.

1. CREARE IL PROGETTO con FIGMA

Come prima cosa, una volta aperto il programma e aver effettuato l’accesso al proprio account,
dovremmo creare un nuovo file di lavoro tramite il pulsante “New design file”. È buona pratica
rinominare il nome del progetto fin da subito, poiché ciò fa sì che il salvataggio automatico si
attivi, il che è utile, soprattutto se il progetto è particolarmente lungo.

Una volta creato il nostro progetto, come prima cosa dovremmo impostare il cosiddetto “Frame
principale”, ovvero l’area che rappresenta la pagina del sito. Con lo strumento “Frame”,
attivabile tramite il tasto F, selezioniamo un “preset” predefinito ( in questo caso il Desktop
1440 px), cioè una delle larghezze più comuni per gli schermi moderni. Questo, banalmente,
farà sì che la pagina cambi larghezza aiutando a lavorare con proporzioni realistiche.

2. IMPOSTAZIONE DEL SITO con Figma

Dopo aver impostato il Frame, sarà utile configurare una “griglia di layout” che renda più

semplice mantenere ordine, allineamenti e proporzioni all’interno del progetto. Nel pannello
laterale destro è presente la “Layout Grid”, ed è possibile modificarla da lì, dove dovremmo
impostarla in modalità “colonne”. La configurazione migliore per un sito è quella a dodici
colonne, con un distacco di circa venti o trenta pixel e con margini laterali tra sessanta e
centoventi pixel ( Nota: queste proporzioni non sono obbligatorie, ma sono quelle più
comuni nella maggior parte dei siti che trovi online). Questa struttura è estremamente
utilizzata nel web design ed è molto utile per l’adattamento del progetto a dimensioni diverse,
rendendo più intuitiva la progettazione.

Una volta che abbiamo impostata la nostra griglia, si può procedere con la creazione
“dell’header” del sito. Disegna un rettangolo nella parte superiore della pagina, così da creare
una base visiva dell’header, al quale si possono aggiungere gli elementi come il logo, il menu di
navigazione e un pulsante di accesso o contatto, ma si può benissimo scegliere in base al tipo di
sito che volete creare. Utilizziamo poi lo strumento “Text” per inserire le scritte del menu e del
“Auto-layout” per mantenere spaziature uniformi, ciò aiuterà a creare una struttura facilmente
modificabile in seguito.

3. CREAZIONE DEL SITO

Procediamo verso il centro della pagina. Qua possiamo iniziare a creare la sezione “hero”,
ovvero l’area che ha il compito di “catturare” l’attenzione dell’utente. Questa sezione, di solito,
contiene immagini e illustrazione, un titolo principale ( di grande impatto), un testo descrittivo
e un pulsante che incoraggia l’utente a cliccare sulla pagina del sito. È importante scegliere un
font leggibile e coerente con lo stile della pagina, oltre che un’immagine impattiva e di alta
qualità. È consigliato di trasformare i pulsanti in componenti STACCATI dal resto degli oggetti
della pagina, per motivi che spiegheremo dopo. Una volta completata la hero, si possono creare
le varie pagine successive del sito. 

Ad esempio una sezione dedicata ai servizi, che può essere
progettata tramite degli Autolayout come base, ciascuno con icone, titoli e brevi descrizioni.
Il portfolio o la galleria dei progetti può invece essere costruito usando una griglia di immagini
che si adatti facilmente con la larghezza della pagina.

 La sezione delle presentazione
dell’azienda o del team deve avere fotografie, testi e una dettagliata dei valori del brand. Anche
una sezione di testimonianze, con citazioni e fotografie dei clienti, rendono il sito più credibile
e professionale. Per quanto riguarda la sezione contatti, è possibile progettare un modulo
semplice, un pulsante di invio o una mappa con informazioni aggiuntive.

4. FINALIZZAZIONE DELLA GRAFICA DEL SITO

Alla fine della pagina si realizza il “footer”, ovvero una sezione generalmente più corta,
caratterizzata da colori meno evidenti e da un testo ridotto. Qui vengono inseriti link,
informazioni legali e icone social. Durante la creazione del progetto è utile fare uso degli stili di
base presenti su Figma, con colori e fonti impostati, perché permettono di avere uno stile con
elementi caratteristici del brand. In parallelo alla progettazione, è utile creare una serie di
componenti di pulsanti, card, campi di input, barre di navigazione e altri elementi.

5. CREAZIONE DEI COLLEGAMENTI TRA PAGINE

Una volta finita la creazione della grafica del sito, la modalità “Prototype” di Figma consente di
simulare il sito con collegamenti tra loro, pulsanti, sezioni e pagine incluse, cosa che può essere
perfino condivisa con clienti o collaboratori tramite link. Infine, per semplificare il lavoro degli
sviluppatori, con la modalità “Inspect” si possono ottenere misure, informazioni sui colori, il
loro codice e le informazioni di esportazione, semplificando il tutto e rendendo il passaggio per
l’esportazione più facile. Infine dovrete andare nella casella “file” e cliccare su “export”, poi si
potrà dovrà esportare in “web”. Ci sono diversi siti che, come “Host”, possono ospitare siti
privati, come Webflow, Framer e Dorik.