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 jy met Twenty se Figma kan saamwerk
|
|
image: /images/user-guide/objects/objects.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/objects/objects.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Figma is 'n gesamentlike koppelvlakontwerpinstrument wat help om die kommunikasieversperring tussen ontwerpers en ontwikkelaars te oorbrug.
|
|
Hierdie gids verduidelik hoe jy met Figma kan saamwerk.
|
|
|
|
## Toegang
|
|
|
|
1. **Toegang tot die gedeelde skakel:** Jy kan toegang verkry tot die projek se Figma-lêer [hier](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty).
|
|
2. **Sign in:** If you're not already signed in, Figma will prompt you to do so.
|
|
Sleutelkenmerke is slegs beskikbaar vir aangemelde gebruikers, soos die ontwikkelaarsmodus en die vermoë om 'n toegewyde raam te kies.
|
|
|
|
<Warning>
|
|
|
|
Jy sal nie effektief kan saamwerk sonder 'n rekening nie.
|
|
|
|
</Warning>
|
|
|
|
## Figma-struktuur
|
|
|
|
Aan die linkerkantste kantbalk kan jy toegang kry tot die verskillende bladsye van Twenty se Figma. Dit is hoe hulle georganiseer is:
|
|
|
|
- **Komponente-bladsy:** Dit is die eerste bladsy. The designer uses it to create and organize the reusable design elements used throughout the design file. Byvoorbeeld, knoppies, ikone, simbole of enige ander herbruikbare komponente. Dit dien om konsekwentheid oor die ontwerp te handhaaf.
|
|
- **Hoofbladsy:** Die tweede bladsy is die hoofbladsy, wat die volledige gebruikerskoppelvlak van die projek toon. You can press _**Play**_ to use the full app prototype.
|
|
- **Features pages:** The other pages are typically dedicated to features in progress. Hulle bevat die ontwerp van spesifieke kenmerke of modules van die toepassing of webwerf. Hulle is gewoonlik nog in proses.
|
|
|
|
## Nuttige Wenke
|
|
|
|
Met lees-alleen toegang, kan jy nie die ontwerp wysig nie, maar jy kan toegang kry tot al die kenmerke wat nuttig sal wees om die ontwerpe in kode om te skakel.
|
|
|
|
### Gebruik die Ontwikkelaars modus
|
|
|
|
Figma se Ontwikkelaarsmodus verbeter ontwikkelaars se produktiwiteit deur maklike ontwerp navigasie, effektiewe batebestuur, doeltreffende kommunikasie-instrumente, gereedskapskas integrasies, vinnige kode brokkies en sleutel laag inligting te verskaf, wat die gaping tussen ontwerp en ontwikkeling oorbrug. Jy kan meer oor Ontwikkelaarsmodus leer [hier](https://www.figma.com/dev-mode/).
|
|
|
|
Skuif na die "Ontwikkelaar"-modus in die regterkantste deel van die nutsbalk om ontwerpspesifikasies te sien, CSS te kopieer, en toegang tot hulpbronne te kry.
|
|
|
|
### Gebruik die Prototipe
|
|
|
|
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. Prototipe modus laat jou toe om met die ontwerp te interaksie asof dit die finale produk is. It demonstrates the flow between screens and how interface elements like buttons, links, or menus behave when interacted with.
|
|
|
|
1. **Verstaan van oorgange en animasies:** In die Prototipe modus, kan jy enige oorgange of animasies sien wat deur 'n ontwerper bygevoeg is tussen skerms of UI-elemente, wat duidelike visuele instruksies aan ontwikkelaars verskaf oor die bedoelde gedrag en styl.
|
|
2. **Implementeer verduideliking:** 'n Prototipe kan ook help om dubbelsinnighede te verminder. Ontwikkelaars kan daarmee interaksie hê om 'n beter begrip van die funksionaliteit of voorkoms van spesifieke elemente te kry.
|
|
|
|
Vir meer omvattende besonderhede en leiding oor die leer van die Figma-platform, kan jy die amptelike [Figma Dokumentasie](https://help.figma.com/hc/en-us) besoek.
|
|
|
|
### Meet afstande
|
|
|
|
Kies 'n element, hou die `Option`-sleutel (Mac) of `Alt`-sleutel (Windows), en hou dan oor 'n ander element om die afstand tussen hulle te sien.
|
|
|
|
### Figma-uitbreiding vir VSCode (Aanbeveel)
|
|
|
|
[Figma vir VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)
|
|
laat jou toe om ontwerp lêers te navigeer en inspekteer, saam te werk met ontwerpers, veranderinge by te hou, en implementering te versnel - alles sonder om jou teks redigeerder te verlaat.
|
|
Dit is deel van ons aanbevole uitbreidings.
|
|
|
|
## Samewerking
|
|
|
|
1. **Gebruik Kommentaar:** Jy is welkom om die kommentaarfunksie te gebruik deur op die borrelikoon in die linkerkant van die nutsbalk te klik.
|
|
2. **Aanwysoklets:** 'n Lekker kenmerk van Figma is die Aanwysoklets. Druk net `;` op Mac en `/` op Windows om 'n boodskap te stuur as jy iemand anders sien wat gelyktydig met jou Figma gebruik.
|