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.2 KiB
Plaintext
67 lines
4.2 KiB
Plaintext
---
|
||
title: Arbejd med Figma
|
||
info: Lær, hvordan du kan samarbejde med 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.
|
||
Denne guide forklarer, hvordan du kan samarbejde med Figma.
|
||
|
||
## Adgang
|
||
|
||
1. **Få adgang til det delte link:** Du kan få adgang til projektets Figma-fil [her](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty).
|
||
2. **Log ind:** Hvis du ikke allerede er logget ind, vil Figma bede dig om at gøre det.
|
||
Nøglefunktioner er kun tilgængelige for brugere, der er logget ind, såsom udviklertilstanden og muligheden for at vælge en dedikeret ramme.
|
||
|
||
<Warning>
|
||
|
||
Du vil ikke kunne samarbejde effektivt uden en konto.
|
||
|
||
</Warning>
|
||
|
||
## Figma-struktur
|
||
|
||
I venstre sidebar kan du få adgang til de forskellige sider af Twenty's Figma. Sådan er de organiseret:
|
||
|
||
- **Komponentside:** Dette er den første side. Designeren bruger den til at skabe og organisere de genanvendelige designelementer, der bruges gennem designfilen. For eksempel knapper, ikoner, symboler eller andre genanvendelige komponenter. Den tjener til at opretholde konsistens på tværs af designet.
|
||
- **Hovedside:** Den anden side er hovedsiden, som viser projektets komplette brugergrænseflade. Du kan trykke på _**Play**_ for at bruge hele app-prototypen.
|
||
- **Funktionssider:** De andre sider er typisk dedikeret til funktioner under udvikling. De indeholder designet af specifikke funktioner eller moduler af applikationen eller websitet. De er typisk stadig under udvikling.
|
||
|
||
## Nyttige tips
|
||
|
||
Med skrivebeskyttet adgang kan du ikke redigere designet, men du kan få adgang til alle funktioner, der vil være nyttige til at konvertere designene til kode.
|
||
|
||
### Brug Dev-tilstanden
|
||
|
||
Figma's Dev Mode forbedrer udvikleres produktivitet ved at give nem designnavigation, effektiv administration af assets, effektive kommunikationsværktøjer, toolbox integrationer, hurtige kodesnippets og nøglelagsinformation, som bygger bro mellem design og udvikling. Du kan lære mere om Dev Mode [her](https://www.figma.com/dev-mode/).
|
||
|
||
Skift til "Developer"-tilstanden i højre del af værktøjslinjen for at se designspecifikationer, kopiere CSS og få adgang til aktiver.
|
||
|
||
### Brug prototypen
|
||
|
||
Klik på et hvilket som helst element på lærredet og tryk på “Play”-knappen øverst til højre på grænsefladen for at få adgang til prototypevisningen. Prototypetilstand giver dig mulighed for at interagere med designet, som om det var det endelige produkt. Det viser flowet mellem skærme og hvordan interfacets elementer som knapper, links eller menuer opfører sig, når de interageres med.
|
||
|
||
1. **Forstå overgangene og animationerne:** I Prototypetilstand kan du se eventuelle overgange eller animationer tilføjet af en designer mellem skærme eller UI-elementer, hvilket giver klare visuelle instruktioner til udviklere om den påtænkte opførsel og stil.
|
||
2. **Implementeringsklarificering:** En prototype kan også hjælpe med at reducere tvetydigheder. Udviklere kan interagere med den for at få en bedre forståelse af funktionaliteten eller udseendet af særlige elementer.
|
||
|
||
For mere omfattende detaljer og vejledning om at lære Figma-platformen, kan du besøge den officielle [Figma Documentation](https://help.figma.com/hc/en-us).
|
||
|
||
### Mål afstande
|
||
|
||
Vælg et element, hold `Option`-tasten (Mac) eller `Alt`-tasten (Windows) nede, og svæv derefter over et andet element for at se afstanden mellem dem.
|
||
|
||
### Figma-udvidelse til VSCode (Anbefales)
|
||
|
||
[Figma for VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)
|
||
lader dig navigere og inspicere designfiler, samarbejde med designere, spore ændringer og fremskynde implementering – alt uden at forlade din teksteditor.
|
||
Det er en del af vores anbefalede udvidelser.
|
||
|
||
## Samarbejde
|
||
|
||
1. **Brug af kommentarer:** Du er velkommen til at bruge kommentarfunktionen ved at klikke på bobleikonet i venstre del af værktøjslinjen.
|
||
2. **Markørchat:** En god funktion ved Figma er Markørchat. Tryk bare på `;` på Mac og `/` på Windows for at sende en besked, hvis du ser en anden bruge Figma samtidig med dig.
|