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: Jobb med Figma
|
|
info: Lær hvordan du kan samarbeide med Twenty's Figma
|
|
image: /images/user-guide/objects/objects.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/objects/objects.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Figma er et samarbeidende grensesnittdesignverktøy som bidrar til å bygge bro over kommunikasjonsbarrierer mellom designere og utviklere.
|
|
Denne guiden forklarer hvordan du kan samarbeide med Figma.
|
|
|
|
## Tilgang
|
|
|
|
1. **Få tilgang til den delte lenken:** Du kan få tilgang til prosjektets Figma-fil [her](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty).
|
|
2. **Logg inn:** Hvis du ikke allerede er logget inn, vil Figma be deg om å gjøre det.
|
|
Nøkkelfunksjoner er kun tilgjengelige for innloggede brukere, som utviklermodus og muligheten til å velge en dedikert ramme.
|
|
|
|
<Warning>
|
|
|
|
Du vil ikke kunne samarbeide effektivt uten en konto.
|
|
|
|
</Warning>
|
|
|
|
## Figma-struktur
|
|
|
|
På venstre sidefelt kan du få tilgang til de forskjellige sidene av Twenty's Figma. Slik er de organisert:
|
|
|
|
- **Komponentside:** Dette er den første siden. Designeren bruker den til å lage og organisere de gjenbrukbare designelementene som brukes i hele designfilen. For eksempel knapper, ikoner, symboler eller andre gjenbrukbare komponenter. Den tjener til å opprettholde konsistensen på tvers av designet.
|
|
- **Hovedside:** Den andre siden er hovedsiden, som viser hele brukergrensesnittet til prosjektet. Du kan trykke _**Play**_ for å bruke hele app-prototypen.
|
|
- **Funksjonssider:** De andre sidene er vanligvis dedikert til funksjoner som er under utvikling. De inneholder designet av spesifikke funksjoner eller moduler av applikasjonen eller nettstedet. De er vanligvis fortsatt under utvikling.
|
|
|
|
## Nyttige tips
|
|
|
|
Med tilgang kun for lesing kan du ikke redigere designet, men du kan få tilgang til alle funksjoner som vil være nyttige for å konvertere designene til kode.
|
|
|
|
### Bruk utviklermodus
|
|
|
|
Figmas utviklermodus forbedrer utviklerens produktivitet ved å gi enkel designnavigering, effektiv ressursstyring, effektive kommunikasjonsverktøy, verktøykasseintegrasjoner, hurtige kodeutdrag og nøkkellag informasjon, og bygger bro mellom design og utvikling. Du kan lære mer om utviklermodus [her](https://www.figma.com/dev-mode/).
|
|
|
|
Bytt til "Utvikler"-modus i høyre del av verktøylinjen for å se design spesifikasjoner, kopiere CSS og få tilgang til eiendeler.
|
|
|
|
### Bruk prototypen
|
|
|
|
Klikk på et hvilket som helst element på lerretet og trykk "Play"-knappen øverst til høyre i grensesnittet for å få tilgang til prototypevisningen. Prototype mode allows you to interact with the design as if it were the final product. It demonstrates the flow between screens and how interface elements like buttons, links, or menus behave when interacted with.
|
|
|
|
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. **Implementeringsavklaring:** En prototype kan også bidra til å redusere uklarheter. Utviklere kan samhandle med det for å få en bedre forståelse av funksjonaliteten eller utseendet til bestemte elementer.
|
|
|
|
For mer omfattende detaljer og veiledning om læring om Figma-plattformen, kan du besøke den offisielle [Figma-dokumentasjonen](https://help.figma.com/hc/en-us).
|
|
|
|
### Mål avstander
|
|
|
|
Velg et element, hold `Option`-tasten (Mac) eller `Alt`-tasten (Windows) inne, og plasser deretter over et annet element for å se avstanden mellom dem.
|
|
|
|
### Figma-utvidelse for VSCode (anbefalt)
|
|
|
|
[Figma for VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)
|
|
lar deg navigere og inspisere designfiler, samarbeide med designere, spore endringer og øke implementeringshastigheten - alt uten å forlate tekstbehandleren din.
|
|
Det er en del av de anbefalte utvidelsene våre.
|
|
|
|
## Samarbeid
|
|
|
|
1. **Bruke kommentarer:** Du er velkommen til å bruke kommentarfunksjonen ved å klikke på bobleikonet i venstre del av verktøylinjen.
|
|
2. **Markørchat:** En fin funksjon ved Figma er markørchatten. Bare trykk `;` på Mac og `/` på Windows for å sende en melding hvis du ser noen andre bruke Figma samtidig som deg.
|