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: Treballar amb Figma
|
|
info: Aprèn com pots col·laborar amb el Figma de Twenty
|
|
image: /images/user-guide/objects/objects.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/objects/objects.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Figma és una eina de disseny d'interfície col·laborativa que ajuda a superar la barrera de comunicació entre dissenyadors i desenvolupadors.
|
|
Aquesta guia explica com pots col·laborar amb Figma.
|
|
|
|
## Accés
|
|
|
|
1. **Accedeix a l'enllaç compartit:** Pots accedir al fitxer Figma del projecte [aquí](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty).
|
|
2. **Inicia sessió:** Si encara no has iniciat sessió, Figma et demanarà que ho facis.
|
|
Les funcions clau només estan disponibles per als usuaris registrats, com el mode desenvolupador i la capacitat de seleccionar un marc dedicat.
|
|
|
|
<Warning>
|
|
|
|
No podràs col·laborar efectivament sense un compte.
|
|
|
|
</Warning>
|
|
|
|
## Estructura de Figma
|
|
|
|
A la barra lateral esquerra, pots accedir a les diferents pàgines de Figma de Twenty. Aquest és l'ordre en què estan organitzades:
|
|
|
|
- **Pàgina de components:** Aquesta és la primera pàgina. El dissenyador la utilitza per crear i organitzar els elements de disseny reutilitzables que s'utilitzen al llarg del fitxer de disseny. Per exemple, botons, icones, símbols, o qualsevol altre component reutilitzable. Serveix per mantenir la coherència a través del disseny.
|
|
- **Pàgina principal:** La segona pàgina és la pàgina principal, que mostra la interfície completa de l'usuari del projecte. Pots fer clic a _**Play**_ per utilitzar el prototip complet de l'app.
|
|
- **Pàgines de funcions:** Les altres pàgines estan normalment dedicades a funcions en desenvolupament. Contenen el disseny de funcions específiques o mòduls de l'aplicació o lloc web. Normalment, encara estan en desenvolupament.
|
|
|
|
## Consells útils
|
|
|
|
Amb accés només de lectura, no pots editar el disseny, però pots accedir a totes les funcions que seran útils per convertir els dissenys en codi.
|
|
|
|
### Utilitza el mode Dev
|
|
|
|
El mode Dev de Figma millora la productivitat dels desenvolupadors proporcionant una navegació fàcil del disseny, una gestió eficaç dels recursos, eines de comunicació eficients, integracions de caixa d'eines, fragments de codi ràpids i informació clau de les capes, superant la bretxa entre el disseny i el desenvolupament. Pots aprendre més sobre el mode Dev [aquí](https://www.figma.com/dev-mode/).
|
|
|
|
Canvia al mode "Developer" a la part dreta de la barra d'eines per veure especificacions del disseny, copiar CSS i accedir a recursos.
|
|
|
|
### Utilitza el prototip
|
|
|
|
Fes clic en qualsevol element de la pantalla i prem el botó “Play” a la part superior dreta de la interfície per accedir a la vista de prototip. El mode prototip et permet interactuar amb el disseny com si fos el producte final. It demonstrates the flow between screens and how interface elements like buttons, links, or menus behave when interacted with.
|
|
|
|
1. **Comprensió de transicions i animacions:** En el mode prototip, pots veure qualsevol transició o animació afegida per un dissenyador entre pantalles o elements d'UI, proporcionant instruccions visuals clares als desenvolupadors sobre el comportament i l'estil desitjats.
|
|
2. **Aclariment d'implementació:** Un prototip també pot ajudar a reduir ambigüitats. Els desenvolupadors poden interactuar amb ell per comprendre millor la funcionalitat o l'aspecte d'elements particulars.
|
|
|
|
Per a més detalls complets i guia sobre l'aprenentatge de la plataforma Figma, pots visitar la [Documentació Oficial de Figma](https://help.figma.com/hc/en-us).
|
|
|
|
### Mesura distàncies
|
|
|
|
Selecciona un element, manté premuda la tecla `Option` (Mac) o `Alt` (Windows) i després passa el cursor sobre un altre element per veure la distància entre ells.
|
|
|
|
### Extensió Figma per a VSCode (Recomanada)
|
|
|
|
[Figma per a VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension) et permet navegar i inspeccionar fitxers de disseny, col·laborar amb dissenyadors, fer seguiment de canvis i accelerar la implementació - tot sense sortir del teu editor de text.
|
|
Forma part de les nostres extensions recomanades.
|
|
|
|
## Col·laboració
|
|
|
|
1. **Utilitzar comentaris:** Pots utilitzar la funció de comentaris fent clic a la icona de bombolla a la part esquerra de la barra d'eines.
|
|
2. **Xat del cursor:** Una característica agradable de Figma és el xat del cursor. Només cal prémer `;` en Mac i `/` en Windows per enviar un missatge si veus algú més utilitzant Figma al mateix temps que tu.
|