Figma è uno strumento di progettazione dell’interfaccia collaborativa che aiuta a colmare il divario comunicativo tra designer e sviluppatori.
Questa guida spiega come puoi collaborare con Figma.
Accesso
- Accedi al link condiviso: Puoi accedere al file Figma del progetto qui.
- Accedi: Se non hai ancora effettuato l’accesso, Figma ti inviterà a farlo.
Le funzionalità chiave sono disponibili solo per gli utenti connessi, come la modalità sviluppatore e la possibilità di selezionare un telaio dedicato.
Non sarai in grado di collaborare efficacemente senza un account.
Struttura di Figma
On the left sidebar, you can access the different pages of Twenty’s Figma. Ecco come sono organizzate:
- Pagina dei componenti: Questa è la prima pagina. Il designer la usa per creare e organizzare gli elementi di design riutilizzabili impiegati in tutto il file di design. Ad esempio, pulsanti, icone, simboli o qualsiasi altro componente riutilizzabile. Serve a mantenere la coerenza nel design.
- Pagina principale: La seconda pagina è la pagina principale, che mostra l’interfaccia utente completa del progetto. Puoi premere Play per utilizzare il prototipo completo dell’app.
- Pagine delle caratteristiche: Le altre pagine sono generalmente dedicate alle caratteristiche in corso di sviluppo. Contengono il design di caratteristiche specifiche o moduli dell’applicazione o del sito web. Sono generalmente ancora in fase di sviluppo.
Suggerimenti utili
Con l’accesso in sola lettura, non puoi modificare il design, ma puoi accedere a tutte le caratteristiche che saranno utili per convertire i design in codice.
Usa la modalità Dev
La modalità Dev di Figma migliora la produttività degli sviluppatori offrendo facile navigazione nel design, gestione efficace delle risorse, strumenti di comunicazione efficienti, integrazioni toolbox, rapidi frammenti di codice e informazioni chiave sui layer, colmando il divario tra design e sviluppo. Puoi saperne di più sulla modalità Dev qui.
Cambia alla modalità “Sviluppatore” nella parte destra della barra degli strumenti per vedere le specifiche del design, copiare il CSS e accedere alle risorse.
Usa il Prototipo
Fai clic su qualsiasi elemento del canvas e premi il pulsante “Play” nell’angolo in alto a destra dell’interfaccia per accedere alla visuale del prototipo. La modalità Prototipo ti permette di interagire con il design come se fosse il prodotto finale. Dimostra il flusso tra gli schermi e il comportamento degli elementi dell’interfaccia come pulsanti, link o menu quando interagiti.
- Comprendere transizioni e animazioni: Nella modalità Prototipo, puoi vedere qualsiasi transizione o animazione aggiunta da un designer tra gli schermi o gli elementi dell’interfaccia utente, fornendo ai sviluppatori istruzioni visive chiare sul comportamento e lo stile previsto.
- Chiarimento dell’implementazione: Un prototipo può anche aiutare a ridurre le ambiguità. Gli sviluppatori possono interagire con esso per ottenere una migliore comprensione della funzionalità o dell’aspetto di particolari elementi.
Per dettagli e consigli più completi sull’apprendimento della piattaforma Figma, puoi visitare la Documentazione ufficiale di Figma.
Misura le distanze
Seleziona un elemento, tieni premuto il tasto Option (Mac) o Alt (Windows), quindi passa con il mouse su un altro elemento per vedere la distanza tra di loro.
Estensione Figma per VSCode (Consigliata)
Figma per VS Code ti permette di navigare e ispezionare i file di design, collaborare con i designer, tracciare i cambiamenti e velocizzare l’implementazione - tutto senza lasciare il tuo editor di testo.
Fa parte delle nostre estensioni consigliate.
Collaborazione
- Utilizzo dei commenti: Puoi utilizzare la funzione commento cliccando sull’icona a forma di fumetto nella parte sinistra della barra degli strumenti.
- Chat del cursore: Una caratteristica interessante di Figma è la chat del cursore. Premi
; su Mac e / su Windows per inviare un messaggio se vedi qualcun altro utilizzare Figma nello stesso momento.
