From 69291ad881d8b22cd90b15324f7cf118f01681d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marianne=20R=C3=B8svik?= Date: Tue, 15 Oct 2024 13:16:59 +0200 Subject: [PATCH] docs: how to use Designsystemet with your own theme (#2608) Resolves #2342 --------- Co-authored-by: barsnes --- .../for-designere/eget-tema/page.mdx | 93 +++++++------------ .../MdxContent/MdxContent.module.css | 4 + 2 files changed, 36 insertions(+), 61 deletions(-) diff --git a/apps/storefront/app/grunnleggende/for-designere/eget-tema/page.mdx b/apps/storefront/app/grunnleggende/for-designere/eget-tema/page.mdx index eb15d81e61..639695eb45 100644 --- a/apps/storefront/app/grunnleggende/for-designere/eget-tema/page.mdx +++ b/apps/storefront/app/grunnleggende/for-designere/eget-tema/page.mdx @@ -6,7 +6,7 @@ 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 }) => ( @@ -14,94 +14,65 @@ export default ({ children }) => ( content={children} data={{ title: 'Bruk designsystemet med eget tema', - date: '7. juni 2024', + date: '15. oktober 2024', icon: , 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. - -### 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]() 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]() 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. - + - 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. \ No newline at end of file diff --git a/apps/storefront/components/MdxContent/MdxContent.module.css b/apps/storefront/components/MdxContent/MdxContent.module.css index 6b0e2e7c2a..82466f0443 100644 --- a/apps/storefront/components/MdxContent/MdxContent.module.css +++ b/apps/storefront/components/MdxContent/MdxContent.module.css @@ -9,6 +9,10 @@ & p { margin-bottom: var(--ds-spacing-4); + + & > strong { + margin: 0 !important; + } } & > h1,