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: Arbeta med Figma
|
|
info: Lär dig hur du kan samarbeta med Twentys Figma
|
|
image: /images/user-guide/objects/objects.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/objects/objects.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Figma är ett samarbetsverktyg för gränssnittsdesign som hjälper till att överbrygga kommunikationsbarriären mellan designers och utvecklare.
|
|
Den här guiden förklarar hur du kan samarbeta med Figma.
|
|
|
|
## Access
|
|
|
|
1. **Access the shared link:** You can access the project's Figma file [here](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty).
|
|
2. **Logga in:** Om du inte redan är inloggad kommer Figma att be dig att göra det.
|
|
Viktiga funktioner är endast tillgängliga för inloggade användare, såsom utvecklarläge och möjlighet att välja en dedikerad ram.
|
|
|
|
<Warning>
|
|
|
|
Du kommer inte att kunna samarbeta effektivt utan ett konto.
|
|
|
|
</Warning>
|
|
|
|
## Figma-struktur
|
|
|
|
På den vänstra sidofältet kan du komma åt de olika sidorna på Twentys Figma. Så här är de organiserade:
|
|
|
|
- **Komponentsida:** Detta är den första sidan. Designern använder den för att skapa och organisera återanvändbara designelement i designfilen. Till exempel knappar, ikoner, symboler eller andra återanvändbara komponenter. Den tjänar till att upprätthålla konsekvens i designen.
|
|
- **Huvudsida:** Den andra sidan är huvudsidan, som visar projektets kompletta användargränssnitt. Du kan trycka på _**Spela**_ för att använda den fullständiga appprototypen.
|
|
- **Funktionssidor:** De andra sidorna handlar vanligtvis om funktioner som är under utveckling. De innehåller designen av specifika funktioner eller moduler av applikationen eller webbplatsen. De är vanligtvis fortfarande under utveckling.
|
|
|
|
## Användbara tips
|
|
|
|
Med bara visningsåtkomst kan du inte redigera designen, men du kan komma åt alla funktioner som är användbara för att omvandla designerna till kod.
|
|
|
|
### Använd utvecklarläget
|
|
|
|
Figmas utvecklarläge förbättrar utvecklares produktivitet genom att erbjuda enkel designnavigering, effektiv resursförvaltning, effektiva kommunikationsverktyg, verktygslådsintegration, snabb kodfragment och viktiga lagerinformation, vilket överbryggar klyftan mellan design och utveckling. Du kan lära dig mer om utvecklarläget [här](https://www.figma.com/dev-mode/).
|
|
|
|
Byt till "Utvecklar"-läge i verktygsfältets högra del för att se designdetaljer, kopiera CSS och få tillgång till resurser.
|
|
|
|
### Använd Prototypen
|
|
|
|
Klicka på något element på arbetsytan och tryck på “Spela”-knappen i det övre högra hörnet av gränssnittet för att få tillgång till prototypvyn. Prototyp-läget låter dig interagera med designen som om det vore den slutliga produkten. Det visar flödet mellan skärmar och hur gränssnittselement som knappar, länkar eller menyer beter sig vid interaktion.
|
|
|
|
1. **Förståelse för övergångar och animationer:** I prototypläget kan du se övergångar eller animationer som lagts till av en designer mellan skärmar eller UI-element, vilket ger tydliga visuella instruktioner till utvecklare om den avsedda beteendet och stilen.
|
|
2. **Implementeringsförtydligande:** En prototyp kan också hjälpa till att minska tvetydigheter. Utvecklare kan interagera med den för att få en bättre förståelse av funktionaliteten eller utseendet på specifika element.
|
|
|
|
För mer omfattande detaljer och vägledning om att lära sig Figma-plattformen, kan du besöka den officiella [Figma-dokumentationen](https://help.figma.com/hc/en-us).
|
|
|
|
### Mät avstånd
|
|
|
|
Välj ett element, håll `Alternativ`-tangenten (Mac) eller `Alt`-tangenten (Windows) och sväva över ett annat element för att se avståndet mellan dem.
|
|
|
|
### Figma-tillägg för VSCode (Rekommenderad)
|
|
|
|
[Figma för VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)
|
|
låter dig navigera och inspektera designfiler, samarbeta med designers, spåra förändringar och påskynda implementeringen - allt utan att lämna din textredigerare.
|
|
Det är en del av våra rekommenderade tillägg.
|
|
|
|
## Samarbete
|
|
|
|
1. **Använda Kommentarer:** Du är välkommen att använda kommentarsfunktionen genom att klicka på bubblaikonen på verktygsfältets vänstra del.
|
|
2. **Markörchatt:** En trevlig funktion i Figma är markörchatten. Tryck bara på `;` på Mac och `/` på Windows för att skicka ett meddelande om du ser någon annan använda Figma samtidigt som du.
|