github-actions[bot]
8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
66 lines
4.5 KiB
Plaintext
66 lines
4.5 KiB
Plaintext
---
|
|
title: Lavora con Figma
|
|
info: Learn how you can collaborate with Twenty's Figma
|
|
image: /images/user-guide/objects/objects.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/objects/objects.png" alt="Header" />
|
|
</Frame>
|
|
|
|
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
|
|
|
|
1. **Accedi al link condiviso:** Puoi accedere al file Figma del progetto [qui](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty).
|
|
2. **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.
|
|
|
|
<Warning>
|
|
|
|
Non sarai in grado di collaborare efficacemente senza un account.
|
|
|
|
</Warning>
|
|
|
|
## 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](https://www.figma.com/dev-mode/).
|
|
|
|
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.
|
|
|
|
1. **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.
|
|
2. **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](https://help.figma.com/hc/en-us).
|
|
|
|
### 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](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension) 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
|
|
|
|
1. **Utilizzo dei commenti:** Puoi utilizzare la funzione commento cliccando sull'icona a forma di fumetto nella parte sinistra della barra degli strumenti.
|
|
2. **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.
|