Skip to content

Commit

Permalink
docs: how to use Designsystemet with your own theme (digdir#2608)
Browse files Browse the repository at this point in the history 
Resolves digdir#2342

---------

Co-authored-by: barsnes <[email protected]>
  • Loading branch information
@mrosvik @Barsnes
mrosvik and Barsnes authored Oct 15, 2024
1 parent 6c35bb3 commit 69291ad
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 61 deletions.
93 changes: 32 additions & 61 deletions apps/storefront/app/grunnleggende/for-designere/eget-tema/page.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,102 +6,73 @@ import { ResponsiveIframe, Image } from '@components';
export const metadata = {
title: 'Bruk designsystemet med eget tema',
description:
'Lær hvordan du kan bruke designsystemet med dine egne profilfarger.',
'Lær hvordan du kan bruke designsystemet med dine egne profilfarger og preferanser.',
};

export default ({ children }) => (
<MenuPageLayout
content={children}
data={{
title: 'Bruk designsystemet med eget tema',
date: '7. juni 2024',
date: '15. oktober 2024',
icon: <PaletteIcon />,
color: 'blue',
}}
/>
);

Skal du ta i bruk Designsystemet i din egen organisasjon med dine egne profilfarger? Det er flere måter å gjøre det på. Det første du må ta stilling til er om du vil bruke komponentene _med_ eller _uten_ kobling mellom Figma og kode.
Skal du ta i bruk Designsystemet i din egen organisasjon med dine egne profilfarger og preferanser? Det er flere måter å gjøre det på. Det første du må ta stilling til er om du vil bruke komponentene **_med_** eller **_uten_** kobling mellom Figma og kode.

**Alternativ 1:** _Med_ kobling mellom Figma og kode \
**Alternativ 2:** _Uten_ kobling mellom Figma og kode
Du bør uansett passe på at det er samme Design Tokens som brukes i både Figma og kode, slik at designere og utviklere arbeider etter de samme reglene. Det sikrer at ting ser likt ut i Figma og i de faktiske løsningene. Om du gjør det manuelt eller med en kobling må du vurdere.

Hvilket alternativ du går for avhenger av dine behov og rammer.
**Alternativ 1:** _Uten_ kobling mellom Figma og kode \
**Alternativ 2:** _Med_ kobling mellom Figma og kode

Fordelen med å ha en kobling, gjennom tokens, er at de sørger for at designere og utviklere arbeider etter de samme reglene, og at ting ser likt ut i Figma og i de faktiske løsningene. En annen fordel er at du vil kunne generere et tema som vil fungere ut av boksen med designsystemet sine komponentbibliotek i kode.

Ulempen er at det krever en del mer første gang du skal sette det opp, ettersom du er avhengig av pluginen [Tokens Studio](https://tokens.studio/) og en Github-bruker. Har du en Gihub-bruker skal det la seg gjennomføre på 3 minutter, som du kan se i videoen under. Vi håper vi kan gjøre dette enklere med en egen plugin etter hvert.
Hvilket alternativ du går for avhenger av dine behov og rammer. Å sette opp en kobling krever en **pro-lisens** av pluginen [Tokens Studio](https://tokens.studio/). Vi håper vi kan gjøre dette enklere med pluginen vår etter hvert.

Vi guider deg gjennom begge alternativene her.

## Alternativ 1: Med kobling

En kobling gjør at du slipper å legge variablene inn i Figma, du importerer dem i stedet fra json-filen og holder dem i sync via pluginen "Tokens studio". Du må ha en [Github-bruker](https://github.com) selv eller en Github-venn som kan hjelpe deg.
## Alternativ 1: Uten direkte kobling

I videoen under kan du se hele prosessen for å få satt opp designsystemet med eget tema.
Dette alternativet krever **ikke** Token Studio. Med dette alternativet kjører dere samme kodesnutt fra temabyggeren i Designsystemets Figma plugin og i terminalen for å generere Design Tokens til bygg i kode. Det vil ikke være en direkte kobling, men variablene/tokens vil genereres med samme metode, og du vil dermed få like verdier i kode og Figma.

<ResponsiveIframe
src='/img/variabler-alt2.mp4'
title='Skjermopptak som viser hvordan du setter opp koblingen mellom Figma og Github og legger inn dine egne profilfarger. Tekslig beskrivelse av det som skjer i videoen ligger under.'
frameBorder='0'
allow='autoplay; fullscreen; picture-in-picture'
allowFullScreen
aspectRatio='16-9'
></ResponsiveIframe>

### Slik går du frem for å få det til:
### Slik går du frem:

1. Er du designer kan det være lurt å snakke med en utvikler, slik at dere har en felles forståelse av hvordan tokens kobler sammen Figma og kode. For å kunne legge til egne tokens i dagens oppsett må du lage en kopi av dette repoet: [design-tokens](https://github.com/designsystemet/design-tokens). Velg "Use this template" og "Create a new repository".
1. Gå til [Temabyggeren](https://next.theme.designsystemet.no) og generer fargeskalaen ut i fra dine profilfarger.
2. Hent komponentbiblioteket fra [Figma Community](https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit) (Trykk "Open in Figma"). Merk at dette blir en kopi av komponentbiblioteket uten noen kobling mot hovedfilen. Filen har nå lagt seg i dine "drafts", så du må flytte den til et fornuftig sted i din organisasjon.
3. Installer designsystemets [plugin for Figma](https://www.figma.com/community/plugin/1382044395533039221/designsystemet-beta).
4. Kopier kodesnutten og lim den inn i pluginen du installerte i steg 2. Utvikler må kjøre samme kodesnutten i en terminal for å generere Design Tokens for kode.
5. Velg "Oppdater variabler". 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.

2. Gå til [next.theme.designsystemet.no](https://next.theme.designsystemet.no). Legg inn dine farger og velg `Kopier` > `Light theme`. [Les mer om fargesystemet her](/grunnleggende/for-designere/fargesystem).

3. Gå til repoet du lagde i steg 1. Lim inn koden du kopierte i steg 2 her: `DittRepo/design-tokens/primitives/colors/light/theme.json`.
## Alternativ 2: Med kobling

4. Hent komponentbiblioteket fra [Figma Community](https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit)
En kobling gjør at du slipper å legge variablene inn i Figma, du importerer dem i stedet fra pluginen "Tokens Studio". **Du må en pro-lisens av pluginen "Tokens Studio" for å få til denne koblingen.** Du må også ha et sted å lagre filene, f.eks i et Git repo.

5. Nå kan du sette opp [Tokens Studio](https://tokens.studio/) til å peke på repoet. Slik gjør du det:

- **[Installer](<https://www.figma.com/community/plugin/843461159747178978/Tokens-Studio-for-Figma-(Figma-Tokens)>) Figma Tokens** - En plugin for Figma som gjør at du kan bruke json-filen til å generere variabler for Figma. De fleste designere skal slippe å forholde seg til denne pluginen, men en person i organisasjonen bør ha ansvar for å holde tokens i sync med variablene som eksisterer i figma.
- **I Github:**
### Slik går du frem for å få det til:

- gå til [GitHub Developer Settings](https://github.com/settings/tokens)
- trykk "Generate new token" (Classic).
- Skriv "Designsystemet" i "Note"
- Sett expiration et godt stykke frem i tid.
- Huk av "repo" i avkrysningsboksene.
- Trykk "Generate token"
- Du får nå en "Personal Access Token" (PAT).
- Kopier PAT-en (du kan bare se den én gang)
1. Gå til [Temabyggeren](https://next.theme.designsystemet.no) og generer fargeskalaen ut i fra dine profilfarger.

- **I Figma Tokens**, under `Sync > GitHub`, fyll inn:
- Name: `DesignsystemetTokens`
- Personal Access Token: `*** din PAT ***` (som du fikk fra Github)
- Repository: `owner (brukernavn)/navn på repo`
- Branch: "main".
- File Path: `design-tokens`
- Trykk "Save"
2. Hent komponentbiblioteket fra [Figma Community](https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit) (Trykk "Open in Figma"). Merk at dette blir en kopi av komponentbiblioteket uten noen kobling mot hovedfilen. Filen har nå lagt seg i dine "drafts", så du må flytte den til et fornuftig sted i din organisasjon.

6. Du vil nå se alle tokens-verdiene du genererte i temavelgeren. Du kan velge `Styles & variables` og `Create variables` for å få fargene dine tilgjengelige som variabler i Figma.
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).

7. Ferdig! 🎉 PS. Dersom du skal gjøre endringer på tokens i pluginen kan du pushe endringene til Github-repoet ditt ved å trykke på "Last-opp"-ikonet (Push) nederst. Men...du må ha Pro-versjonen av Tokens Studio for å kunne gjøre dette, så det kan være like greit at endringer kun gjøres i koden, og at du henter ned eventuelle endringer til Figma ved å velge "Last-ned"-ikonet (Pull) nederst.
4. Bruk ditt eksisterende Git repo, eller opprett et nytt. F.eks med [Github](https://github.com/new).

## Alternativ 2: Uten kobling
5. Gå tilbake til [Temabyggeren](https://next.theme.designsystemet.no) og klikk "Ta i bruk tema". Kopier kodesnutten og kjør den i en terminal i ditt Git repo. Sjekk inn og push filene.

Ved å _ikke_ ha en kobling kan du sette opp Figma-bibiloteket med dine farger uten at du må bruke Github. _Uten direkte kobling til tokens_, må du manuelt passe på at variablene som lages i Figma er de samme som brukes i kode.
6. Nå setter du opp Figma-pluginen "Tokens Studio", som du installerte i steg 3.

<ResponsiveIframe
src='/img/variabler-alt1.mp4'
title='Skjermopptak som viser hvordan du kopierer filen fra Community, flytter den til en mappe, og endrer fargevariablene til de du har generert med temavelgeren.'
frameBorder='0'
allow='autoplay; fullscreen; picture-in-picture'
allowFullScreen
aspectRatio='16-9'
></ResponsiveIframe>
- Følg Tokens Studio sin guide "[Sync your Design Tokens with code](https://docs.tokens.studio/token-storage-and-sync/sync-provider-overview)" for å sette opp ditt Git repo.
- Husk å sette "Token storage location" til `design-tokens` (eller det du har valgt å kalle mappen din med Design Tokens).

### Slik går du frem:
7. Under "Tokens" i Tokens Studio skal du nå se alle fargene du generte med Temabyggeren i steg 1.

8. I Tokens Studio velg `Styles & variables` og `Export styles & variables to Figma` og følg stegene for å få fargene dine tilgjengelige som variabler i Figma.

9. 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.

1. Hent komponentbiblioteket fra [Figma Community](https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit) (Trykk "Open in Figma"). Merk at dette blir en kopi av komponentbiblioteket uten noen kobling mot hovedfilen. Filen har nå lagt seg i dine "drafts", så du må flytte den til et fornuftig sted i din organisasjon.
2. Installer designystemets [plugin for Figma](https://www.figma.com/community/plugin/1382044395533039221/designsystemet-beta).
3. Gå til [next.theme.designsystemet.no](https://next.theme.designsystemet.no) og generer fargeskalaen ut i fra dine profilfarger.
4. Kopier JSON-koden og lim den inn i pluginen du installerte i steg 2.
5. Velg "Oppdater variabler". Nå skal du se alle komponentene med dine egne profilfarger. For at andre designere i organisasjonen skal kunne bruke komponentene må du publisere filen.
9. 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.
4 changes: 4 additions & 0 deletions apps/storefront/components/MdxContent/MdxContent.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@

& p {
margin-bottom: var(--ds-spacing-4);

& > strong {
margin: 0 !important;
}
}

& > h1,
Expand Down

0 comments on commit 69291ad

Please sign in to comment.