Crea un dashboard reattivo con Figma

Feb 3, 2026

Come si fa

Figma è uno strumento grafico per i progettisti dell'interfaccia utente. Ha un'interfaccia semplice e ti consente di collaborare al lavoro con i tuoi compagni di squadra. Se vuoi lavorare offline, puoi scegliere di utilizzare l'app Desktop. In alternativa, Figma funziona su qualsiasi sistema operativo (Ciao, Windows), quindi non devi installare nulla. E per iniziare è facile - puoi importare i tuoi precedenti progetti di layout dallo schizzo.

Scegli un costruttore di siti Web: 16 Top Tools

In Figma, è possibile creare tutto il necessario per la tua interfaccia, dalle icone vettoriali illustrate ai layout personalizzati. Il montaggio multiplayer potrebbe risparmiare molto tempo per i team di progettazione, in quanto significa che tutti i membri del team possono funzionare allo stesso layout allo stesso tempo. E questi non sono nemmeno tutte le sue grandi caratteristiche.

In questo tutorial ti mostrerò come essere configurato con Figma, quindi passare attraverso come creare uno schermo dell'app mobile, passo dopo passo. In questo caso, progettereremo il dashboard per un'app di statistica immaginaria. Quando hai finito, sarai in grado di creare diverse interfacce in Figma e lavorare su di loro con la tua squadra in tempo reale.

01. Iscriviti

Prima di tutto, devi iscriverti a www.figma.com. . Decidi se si desidera utilizzare lo strumento nel browser o scaricare l'app Desktop. Per scaricare la versione desktop, vai al menu Hamburger nell'angolo in alto a sinistra e fai clic su "Get Desktop App".

02. Creare una tavola da disegno e una griglia

Add a baseline grid to help you position your elements harmoniously (click image to enlarge) — Aggiungi una griglia di base per aiutarti a posizionare i tuoi elementi armoniosamente (clicca sull'immagine per ingrandire)

Colpire UN per creare una tavola da disegno. Puoi scegliere uno dei preset o creare la tua dimensione personalizzata. Per questo progetto, useremo il telefono e il GT; iPhone 7 (375x667px). Per creare una griglia, selezionare prima la tavola da disegno. Quindi sulla barra laterale destra trovare "layout grid" e premi '+'. Impostare il conteggio della colonna: 6, Gutter: 16, Margini: 8 e Tipo: Stretch.

03. Disegna un rettangolo per lo sfondo

Iniziamo con lo sfondo. stampa R. Per far apparire lo strumento rettangolare e disegnare un rettangolo # 5F98FA senza frontiere. Impostare le dimensioni su 375x363 utilizzando il pannello Proprietà sul lato destro.

04. Aggiungi una barra di stato

Set the gradient for the status bar using the properties panel on the right on the screen. Here you can adjust the colour options to create a linear gradient (click image to enlarge) — Impostare il gradiente per la barra di stato utilizzando il pannello Proprietà a destra sullo schermo. Qui è possibile regolare le opzioni del colore per creare un gradiente lineare (clicca sull'immagine per ingrandire)

Successivamente vogliamo posizionare una barra di stato nella parte superiore dello schermo. stampa R. Per impostare la larghezza: 375, altezza: 64, posizione (x: 0; y: 0). Per la nostra barra di navigazione, imposta il riempimento del gradiente utilizzando il pannello di ispezione della proprietà a destra. Trova l'opzione 'Riempire', premere l'anteprima del colore e seleziona 'Linear' dal menu a discesa. Il colore in alto dovrebbe essere # 77A6F7 e in basso # 5a93F5 (opacità al 100% per entrambi).

05. Importa una barra di stato iOS

Sfortunatamente, Figma non include elementi IOS UI per impostazione predefinita. Tuttavia, c'è un file chiamato "file di esempio", che è un design di app iOS, quindi possiamo prendere in prestito la barra di stato da quella. Copia l'opzione della barra di stato della luce, incollalo nel file corrente e posizionalo a (x: 0; y: 0). Usando lo strumento Testo ( T. ), fai clic sulla tua tavola da disegno per aggiungere un'intestazione alla barra di navigazione. Sono andato per Avenir Heavy, 15px, #ffffff. Allineare la voce per centro orizzontale, Y: 33.

06. Creare un'icona posteriore

A sinistra della barra di navigazione dovrebbe essere un'icona "Indietro". Ho intenzione di crearlo da zero. Creare un rettangolo 14x14px, aggiungere rotazione di 45 gradi, X: 14; Y: 43. Duplica questo rettangolo e posizionalo a x: 18; Y: 43. Seleziona entrambi i rettangoli e sotto il menu principale Vai a Gruppi booleani e GT; Sovrattare la selezione. Dopodiché, torna in gruppi booleani e GT; Selezione appiattire o premere cmd + E. .

07. Termina l'icona della freccia

La nostra icona della freccia è quasi finita. Ora abbiamo solo bisogno di impostare la larghezza e l'altezza nei valori numerici - nella mia cassa larghezza: 12 px; Altezza: 20px. Il passo finale è impostare il colore di riempimento in #FFFFFFFF.

08. Creare un grafico

Ora creeremo un grafico. Innanzitutto, metteremo alcune linee guida. Seleziona lo strumento Rettangolo ( R. ) e set x: 24 y: 147; Larghezza: 1; Altezza: 166; Riempire il colore # B3DCFF e opacità 20%.

Duplica questo rettangolo quattro volte con margini da 80px. In fondo a ciascuna linea guida, dobbiamo aggiungere un'etichetta di data utilizzando i livelli di testo ('2 feb', '9 febbraio', 'febbraio 16', '23 febbraio', 'marzo 1'). Ho usato Avenir Medium, a 11px, # C1D8FF.

09. Fai la linea dati

Usando lo strumento penna ( P. ) Abbiamo bisogno di creare un vettore per rappresentare la linea dati. Fai clic e trascina per creare un punto Bézier. Questa forma dovrebbe avere una corsa 4px e nessun riempimento, #ffffff.

Aggiungiamo un'ombra di caduta per aiutare la linea in risalto: fai clic su "+" nella sezione Effetti e scegliere "Drop Shadow". Utilizzare le seguenti impostazioni per creare un'ombra liscia ed elegante: sfocatura: 3 px, y: 7px, # 2951ff, opacità: 100%.

10. Aggiungi dettaglio al grafico

Use the Text tool to add values to the places the guidelines intersect with the data line — Utilizzare lo strumento Testo per aggiungere valori ai luoghi che le linee guida si intersecano con la linea dati

Nei punti in cui le linee guida si intersecano con la linea dati che aggiungeremo cerchi. Questa volta useremo lo strumento Ellisse ( O. ), che troverai nel menu a discesa che accompagna lo strumento rettangolare. Disegna cerchi 8x8px su ogni intersezione e impostare il colore di riempimento in # 5F98FA. Dobbiamo aggiungere una corsa: fare clic sul pulsante '+' accanto alla sezione tratto, impostare il peso: 2 px e allineare: centro.

11. tocchi finali

Per completare la sezione del grafico, abbiamo solo bisogno di aggiungere valori ai nostri punti di intersezione. Con lo strumento di testo ( T. ) Seleziona Avenir Black, 11px, # 1F4991.

12. Tre scatole informative

Sotto il grafico della linea creeremo tre celle che mostrano ulteriori informazioni. Usando lo strumento Testo ( T. ) Creiamo la nostra prima rubrica: "Valore stimato delle tue azioni": X: 16; Y: 391, Avenir Medium, 15 PX, # 5D7EB6. A destra del cella cella il valore '$ 1,115', stile di testo: Avenir pesante, 22px, # 5f98fa, allineamento del testo: a sinistra, x: 287; Y: 387.

13. Fare un separatore

Disegna un rettangolo che è 1 px in altezza e si estende la larghezza completa dello schermo (# F5F5F5; X: 0; Y: 435) - questo fungerà da separatore tra le celle. Seleziona l'intestazione, il valore e il separatore e creare un gruppo ( cmd + G. ).

14. Aggiunta di intestazioni

Underneath the graph will be three cells showing key pieces of data (click image to enlarge) — Sotto il grafico sarà tre celle che mostrano pezzi chiave di dati (clicca sull'immagine per ingrandire)

Duplica questo gruppo in modo da avere tre gruppi con distanza verticale 24px tra loro. Cambia la seconda direzione verso "Membri totali" e il terzo gruppo si intestano a "amici registrati" e aggiornare i valori pertinenti.

15. Disegna e allinea un altro rettangolo

Ora aggiungeremo una chiamata all'azione. Disegna un rettangolo sotto l'ultima cella, larghezza: 195; Altezza: 44, distanza dell'asse y dall'ultimo separatore 21px.

Usando gli strumenti di allineamento, allinea il rettangolo tramite centro orizzontale. Quindi impostare il colore di riempimento in # 5F98FA e rotondezza a 22 (troverai questo campo dopo la "rotazione" nel pannello Proprietà). Dopodiché aggiungere un effetto shadow a goccia (colore: #abdaff, opacità: 100%; y: 5; sfocatura: 11).

16. Metti un po 'di testo sul pulsante

Aggiungi testo al pulsante utilizzando lo strumento Testo ( T. ): 'Ottieni più azioni!' Imposta questo in Avenir Black, 15 PX, #FFFFFFFF. Allineare il testo al centro del pulsante. Infine, gruppo tutti gli elementi insieme e li nomina correttamente.

17. renderlo reattivo

Ora regoleremo il nostro layout in modo che sia reattivo a diversi iPhone (320x568, 375x667 e 414x736). Per fare questo dobbiamo usare vincoli, che troverai sotto il menu Proprietà a destra.

18. Ottenere il layout giusto

Se si seleziona "SINISTRA" o "DESTRA" sul menu a discesa orizzontale, il gruppo si pinicherà sul lato scelto dello schermo e non si allungherà. Se si seleziona 'Center', il gruppo o il livello si allungherà in modo che riempia la larghezza dello schermo. Dobbiamo rendere la barra di stato float in posizione, quindi vogliamo l'opzione "DESTRA e AMP, sinistra" (o tieni premuto "cmd" e fare clic sulle barre sinistra e destra sul diagramma).

19. Test IT.

Proviamo questo. Con la barra di stato selezionata, premi l'opzione "DESTRA e AMP, sinistra". Seleziona una tavola da disegno e, invece di iPhone 7, scegli iPhone 7 Plus. Funziona correttamente anche se si seleziona la dimensione dell'iPhone SE.

20. Controlla ogni strato

Consideriamo il resto dei livelli. Per lo sfondo della barra di navigazione, vogliamo usare 'giusto + sinistra'. Per il titolo della barra di navigazione: 'Center'. Per l'icona della freccia posteriore, è meglio usare l'opzione 'sinistra' - in questo modo la freccia sarà bloccata sul lato sinistro dello schermo.

21. Imposta il grafico della linea

Ora impostiamo il grafico della linea. Per le linee guida, le date e i cerchi di intersezione, vogliamo usare 'Center'. Per la linea di dati e lo sfondo, useremo "DESTRA e AMP; SINISTRA". Nella sezione dei dati extra vogliamo utilizzare 'sinistra' per ogni titolo, 'giusto' per ogni valore, e 'giusto e amp; sinistra' per le linee del separatore. Per il gruppo del pulsante CTA, impostiamo 'Center'.

22. Impostare i vincoli verticali

Il passo finale è impostare i vincoli verticali. La barra di stato, la barra di navigazione, la linea di dati e i cerchi di intersezione e i titoli associati dovrebbero essere impostati su 'top'. Lo sfondo del grafico, le date e le linee guida dovrebbe essere impostato su 'Center'. Ogni gruppo di dati aggiuntivi deve essere impostato su verticale 'center', e il gruppo del pulsante CTA dovrebbe essere impostato su "BOOMBRO".

23. Fallo funzionare per ogni dimensione dello schermo

Dupliamo la tavola da disegno due volte e mettiamo uno alle dimensioni di un iPhone 7 Plus e l'altro alle dimensioni su un iPhone SE. Sulla versione Plus, è necessario ridurre il divario tra l'ultima cellula di informazioni extra e il pulsante CTA selezionando il gruppo di celle e aumentando la sua altezza da 195 a 225. Nella versione SE vedrai che le celle di informazione Il pulsante CTA, quindi dobbiamo selezionare il gruppo di celle e ridurre la sua altezza a 150.

24. Tutto fatto!

Ehi, congratulazioni! Abbiamo finito l'intera schermata dell'app in Figma. Per ora solo controllare tutto, e puoi sederti e sentirti un esperto.

Questo articolo è stato originariamente presente in Magazine netta Edizione 288; Compra qui.

Articoli Correlati:

Il concetto di New Bekance sembra un'app killer
Progettazione per l'impatto sociale
8 consigli per le interviste di lavori di Ace Tech