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>
67 lines
4.3 KiB
Plaintext
67 lines
4.3 KiB
Plaintext
---
|
|
title: Werk met Figma
|
|
info: Leer hoe u kunt samenwerken met Twenty's Figma
|
|
image: /images/user-guide/objects/objects.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/objects/objects.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Figma is a collaborative interface design tool that aids in bridging the communication barrier between designers and developers.
|
|
Deze gids legt uit hoe u kunt samenwerken met Figma.
|
|
|
|
## Toegang
|
|
|
|
1. **Toegang tot de gedeelde link:** U kunt het Figma-bestand van het project [hier](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty) openen.
|
|
2. **Aanmelden:** Als u nog niet bent aangemeld, zal Figma u vragen dit te doen.
|
|
Belangrijke functies zijn alleen beschikbaar voor aangemelde gebruikers, zoals de ontwikkelaarsmodus en de mogelijkheid om een toegewijd frame te selecteren.
|
|
|
|
<Warning>
|
|
|
|
Zonder een account kunt u niet effectief samenwerken.
|
|
|
|
</Warning>
|
|
|
|
## Figma-structuur
|
|
|
|
In de linker zijbalk kunt u de verschillende pagina's van Twenty's Figma openen. Zo zijn ze georganiseerd:
|
|
|
|
- **Componentenpagina:** Dit is de eerste pagina. De ontwerper gebruikt deze om herbruikbare ontwerpelementen te creëren en te organiseren die in het gehele ontwerpbestand worden gebruikt. Bijvoorbeeld knoppen, pictogrammen, symbolen of andere herbruikbare componenten. Het dient om consistentie in het ontwerp te behouden.
|
|
- **Hoofdpagina:** De tweede pagina is de hoofdpagina, die de volledige gebruikersinterface van het project toont. U kunt op _**Play**_ drukken om de volledige app-prototype te gebruiken.
|
|
- **Functiepagina's:** De andere pagina's zijn doorgaans gewijd aan functies die nog in ontwikkeling zijn. Ze bevatten het ontwerp van specifieke functies of modules van de applicatie of website. Ze zijn doorgaans nog in ontwikkeling.
|
|
|
|
## Handige tips
|
|
|
|
Met alleen-lezen toegang kunt u het ontwerp niet bewerken, maar u hebt toegang tot alle functies die nuttig zijn om de ontwerpen in code om te zetten.
|
|
|
|
### Gebruik de Dev-modus
|
|
|
|
Figma's Dev Mode enhances developers' productivity by providing easy design navigation, effective asset management, efficient communication tools, toolbox integrations, quick code snippets, and key layer information, bridging the gap between design and development. U kunt meer leren over de Dev-modus [hier](https://www.figma.com/dev-mode/).
|
|
|
|
Schakel naar de "Ontwikkelaars" modus in het rechterdeel van de werkbalk om ontwerpspecificaties te zien, CSS te kopiëren en toegang tot assets te verkrijgen.
|
|
|
|
### Use the Prototype
|
|
|
|
Click on any element on the canvas and press the “Play” button at the top right edge of the interface to access the prototype view. De prototype modus laat u met het ontwerp interageren alsof het het uiteindelijke product is. Het toont de stroom tussen schermen en hoe interface-elementen zoals knoppen, links of menu's zich gedragen wanneer erop wordt geklikt.
|
|
|
|
1. **Understanding transitions and animations:** In the Prototype mode, you can view any transitions or animations added by a designer between screens or UI elements, providing clear visual instructions to developers on the intended behavior and style.
|
|
2. **Uitleg over implementatie:** Een prototype kan ook helpen om onduidelijkheden te verminderen. Ontwikkelaars kunnen ermee interageren om een beter begrip te krijgen van de functionaliteit of verschijning van bepaalde elementen.
|
|
|
|
Voor meer uitgebreide details en richtlijnen over het leren van het Figma platform, kunt u de officiële [Figma Documentatie](https://help.figma.com/hc/en-us) bekijken.
|
|
|
|
### Afstanden meten
|
|
|
|
Selecteer een element, houd de `Option` toets (Mac) of `Alt` toets (Windows) ingedrukt, en beweeg dan over een ander element om de afstand ertussen te zien.
|
|
|
|
### Figma-extensie voor VSCode (Aanbevolen)
|
|
|
|
[Figma voor VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)
|
|
laat u ontwerpbestanden navigeren en inspecteren, samenwerken met ontwerpers, wijzigingen volgen, en de implementatie versnellen - allemaal zonder uw teksteditor te verlaten.
|
|
Het maakt deel uit van onze aanbevolen extensies.
|
|
|
|
## Samenwerking
|
|
|
|
1. **Using Comments:** You are welcome to use the comment feature by clicking on the bubble icon in the left part of the toolbar.
|
|
2. **Cursor chat:** Een leuke eigenschap van Figma is de Cursor chat. Druk gewoon op `;` op Mac en `/` op Windows om een bericht te sturen als u ziet dat iemand anders Figma tegelijkertijd met u gebruikt.
|