Skip to content

Commit 0186a6f

Browse files
mrosvikmimarz
andauthored
docs: update theme guide with extra image for broken links (#3266)
* small fixes * update image and text * Update apps/storefront/app/grunnleggende/for-designere/eget-tema/page.mdx --------- Co-authored-by: Michael Marszalek <[email protected]>
1 parent 2c1ca34 commit 0186a6f

File tree

2 files changed

+14
-4
lines changed

2 files changed

+14
-4
lines changed

apps/storefront/app/grunnleggende/for-designere/eget-tema/page.mdx

+14-4
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ Dette alternativet krever **ikke** Token Studio. Med dette alternativet kjører
6969

7070
## Alternativ 2: Med kobling
7171

72-
En kobling gjør at du slipper å legge variablene inn i Figma, du importerer dem i stedet fra pluginen "Tokens Studio".
72+
En kobling gjør at du slipper å legge variablene inn i Figma, du importerer dem i stedet fra pluginen "Tokens Studio". Dette alternativet krever kjennskap til Git.
7373

7474
<Card
7575
data-color='brand2'
@@ -81,13 +81,13 @@ En kobling gjør at du slipper å legge variablene inn i Figma, du importerer de
8181
</Card>
8282

8383

84-
### Slik går du frem for å få det til:
84+
### Slik går du frem:
8585

8686
1. Hent komponentbiblioteket fra [Figma Community](https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit) (Trykk "Open in Figma") til din organisasjon som har mimimum pro-lisens. Merk at dette blir en kopi av komponentbiblioteket uten noen kobling mot hovedfilen. Filen har nå lagt seg i "drafts", så du må flytte den til et fornuftig sted i din organisasjon.
8787

8888
2. Gå til [Temabyggeren](https://next.theme.designsystemet.no) og generer fargeskalaen ut i fra dine profilfarger. Klikk "Ta i bruk tema". Kopier kodesnutten og kjør den i en terminal i ditt Git repo. Sjekk inn og push filene.
8989

90-
3. Installer pluginen [Tokens Studio](<https://www.figma.com/community/plugin/843461159747178978/Tokens-Studio-for-Figma-(Figma-Tokens)>) for Figma. Tokens Studio sørger for kobling mellom Figma og kode, ved hjelp av Design Tokens (i json-filer).
90+
3. Installer pluginen [Tokens Studio](<https://www.figma.com/community/plugin/843461159747178978/Tokens-Studio-for-Figma-(Figma-Tokens)>) for Figma. Tokens Studio sørger for kobling mellom Figma og kode, ved hjelp av Design Tokens.
9191

9292
<Image
9393
src='/img/tokenstudio.png'
@@ -108,6 +108,16 @@ En kobling gjør at du slipper å legge variablene inn i Figma, du importerer de
108108
dataUnstyled
109109
/>
110110

111+
Vær oppmerksom på at modes som allerede ligger i Community-filen ikke blir slettet av Token Studio. Slett temaene du ikke trenger i Figma "Local variables" under "Theme". Det samme kan skje under "Main" og "Support".
112+
113+
<Image
114+
src='/img/brutte-referanser.png'
115+
alt='Skjermbilde som viser brutte koblinger i Figma-variablene. Høyreklikk og slett temaene du ikke trenger.'
116+
boxShadow={false}
117+
dataUnstyled
118+
119+
/>
120+
111121
5. Nå skal du se alle komponentene med dine egne profilfarger i Figma. For at andre designere i organisasjonen skal kunne bruke komponentene må du publisere filen.
112122

113-
6. Ferdig! PS. Dersom du skal gjøre endringer på tokens i Tokens Studio kan du pushe endringene til repoet ditt ved å trykke på "Last-opp"-ikonet (Push) nederst.
123+
6. Ferdig! PS. Dersom du skal gjøre endringer på tokens i Tokens Studio kan du pushe endringene til repoet ditt ved å trykke på "Last-opp"-ikonet (Push) nederst.
77.9 KB
Loading

0 commit comments

Comments
 (0)