docs: updated info about getting started as a designer

apps/storefront/pages/bloggen/2024/fluid-typography.mdx

@@ -1,5 +1,5 @@
 import { BlogArticleLayout } from '@layouts';
-import { Image } from '@components';
+import { ResponsiveIframe, Image } from '@components';
 import { Contributors } from '@blog';
 
 export default ({ children }) => (
@@ -61,6 +61,19 @@ Størrelsene som ble brukt i den dynamiske skalaen ble generert ved hjelp av [Fl
 | f5     | 26.00px / 1.63rem     | 38.00px / 2.38rem     |
 | f6     | 29.00px / 1.81rem     | 44.00px / 2.75rem     |
 
+<br />
+
+For å kunne se riktige tekststørrelser i Figma var vi avhengige av å ha installert pluginen [Tokens Studio for Figma](https://docs.tokens.studio/) og bruke denne til å aktivere riktig viewport. Videoen under viser hvordan pluginen ble brukt for å få riktige tekststørrelser for ulike viewports.
+
+<ResponsiveIframe
+  src='/img/fluid-text-size.mp4'
+  title='Skjermopptak av Figma som viser hvordan størrelse og avstand på tekst blir mindre i en mindre viewport'
+  frameBorder='0'
+  allow='autoplay; fullscreen; picture-in-picture'
+  allowFullScreen
+  aspectRatio='16-9'
+></ResponsiveIframe>
+
 <Contributors
   authors={[
     'Marianne Røsvik',

apps/storefront/pages/grunnleggende/for-designere/bidra-i-figma.mdx

@@ -24,10 +24,6 @@ export default ({ children }) => (
 
 Vi setter pris på at du hjelper oss å forbedre komponenter og design i Figma. De beste løsningene kommer gjennom samarbeid.
 
-### Sandkassen
-
-I sandkassen kan vi utforske og tenke høyt sammen. Du kan kopiere inn design fra ditt produktteam, for eksempel et mønster, en komponent eller noe annet du har laget som kan være relevant for designsystemet. Det er ingen føringer til hvordan vi skal jobbe i denne filen. Du må foreløpig ha en bruker i Digdir-Figma for å kunne redigere. [Åpne sandkassen og lim inn dine forslag](https://www.figma.com/file/hCLf6YzvQF15WPFFpXqeJj/Sandkasse?type=design&node-id=1%3A4&mode=design&t=5bHSaO1ULo9gKrkK-1).
-
 ### Ny komponent
 
 Ønsker du å foreslå en ny komponent setter vi pris på om den blir [registrert i Github](https://github.com/digdir/designsystemet/discussions/new?category=components).

apps/storefront/pages/grunnleggende/for-designere/eget-tema.mdx

@@ -0,0 +1,106 @@
+import { PaletteIcon } from '@navikt/aksel-icons';
+
+import { MenuPageLayout } from '@layouts';
+import { Meta, ResponsiveIframe, Image } from '@components';
+
+<Meta
+  title='Bruk designsystemet med eget tema'
+  description='Lær hvordan du kan bruke designsystemet med dine egne profilfarger.'
+/>
+
+export default ({ children }) => (
+  <MenuPageLayout
+    content={children}
+    data={{
+      title: 'Bruk designsystemet med eget tema',
+      date: '22. mai 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.
+
+**Alternativ 1:** _Med_ kobling mellom Figma og kode \
+**Alternativ 2:** _Uten_ kobling mellom Figma og kode
+
+Hvilket alternativ du går for avhenger av dine behov og rammer.
+
+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 nederst i denne artikkelen. Vi håper vi kan gjøre dette enklere med en egen plugin 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.
+
+I videoen under kan du se hele prosessen for å få satt opp designsystemet med eget tema.
+
+<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:
+
+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".
+
+2. Gå til [theme.designsystemet.no](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/theme1.json`.
+
+4. Hent komponentbiblioteket fra [Figma Community](https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit)
+
+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:**
+
+     - 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)
+
+   - **I Figma Tokens**, under `Sync > GitHub`, fyll inn:
+     - Name: `DesignsystemetTokens`
+     - Personal Access Token: `*** din PAT ***` (som du fikk fra Github)
+     - Repository: `der-din-fork-ligger/designsystemet`. (Bytt ut Digdir med eieren av ditt repo)
+     - Branch: "main".
+     - File Path: `design-tokens`
+     - Trykk "Save"
+
+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.
+
+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.
+
+## Alternativ 2: Uten kobling
+
+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.
+
+<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>
+
+### Slik går du frem:
+
+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.
+2. Filen har nå sannsyligvis lagt seg i dine "drafts" nå, så du må flytte den til et fornuftig sted i din organisasjon.
+3. Gå til [theme.designsystemet.no](theme.designsystemet.no) og generer fargeskalaen ut i fra dine profilfarger.
+4. Åpne "local variables" i Figma og bytt til settet `Mode`. **IKKE endre noe i `theme` og `semantic`-settet.** Du skal kun redigere HEX-kodene i `mode`-settet. I `mode` - bytt ut `accent`, `neutral`, `brand1`, `brand2`, `brand3` med dine egne farger. Du kan bytte under både light og dark om ønskelig. Det er litt tungvindt nå siden du må manuelt klippe og lime hex-koder. Vi jobber med en [plugin til Figma](https://github.com/digdir/designsystemet/tree/next/plugins/figma-sync) som gjør at du bare kan kopiere inn hele sulamitten. 🎉
+5. Nå skal du se alle komponentene med dine egne profilfarger. For at andre designere i organisasjonen skal kunne bruke komponentene må du publisere filen.

apps/storefront/pages/grunnleggende/for-designere/fargesystem.mdx

@@ -0,0 +1,73 @@
+import { Table } from '@digdir/designsystemet-react';
+
+import { PaletteIcon } from '@navikt/aksel-icons';
+
+import { MenuPageLayout } from '@layouts';
+import { Meta, Image, ResponsiveIframe } from '@components';
+
+<Meta
+  title='Sett opp ditt eget fargesystem'
+  description='Her får du hjelp til å sette opp et fargesystem'
+/>
+
+export default ({ children }) => (
+  <MenuPageLayout
+    content={children}
+    data={{
+      title: 'Sett opp ditt eget fargesystem',
+      date: '22. mai 2024',
+      icon: <PaletteIcon />,
+      color: 'blue',
+    }}
+  />
+);
+
+Med et gjennomtenkt fargesystem kan vi sikre at tekst alltid har god nok kontrast mot våre bakgrunnsfarger og at det finnes nok ulike farger for alle tilstander.
+
+En profilveileder inneholder ofte kun et sett med primærfarger og sekundærfarger i et par forskjellige fargetoner. Å lage et digitalt produkt kun med disse fargene alene er vanskelig. For å kunne sikre riktig kontrast og korrekte farger for ulike tilstander, er vi avhengig av å definere flere variasjoner av profilfargene. Bare button komponenten består av 6 ulike blåfarger:
+
+<Image
+  src='/img/button-colors.png'
+  alt='Skjermbildet viser button komponenten og alle de ulike farge-kodene den består av'
+  boxShadow={false}
+  caption='Som du ser i eksemplet trenger vi 6 ulike fargevariasjoner bare for Button-komponenten.
+'
+/>
+
+Fargesystemet er strukturert for å støtte multibranding og ulike modes (darkmode, contrastmode, etc.), og samtidig ivareta kontrastkrav. Vi har latt oss inspirere av [USWDS sine "magic numbers"](https://designsystem.digital.gov/design-tokens/color/overview/) for å sikre tilgjengelige fargekombinasjoner fra hvilken som helst fargepalett. Vi har også blitt inspirert av [Radix sitt fargesystem](https://www.radix-ui.com/colors) med tydelige intensjoner for de ulike fargene. For å sikre at en organisasjon skal kunne bruke sin faktiske brandfarge, har vi valgt å kombinere to tilnærminger til et helt nytt system.
+
+## Designsystemets temagenerator
+
+For å generere en skala som fungerer kan du bruke [Designsystemets temagenerator](theme.designsystemet.no) Det eneste du trenger å gjøre er å lime inn hex-koden til merkevarens accent-farge og øvrige profil-farger.
+
+<Image
+  src='/img/fargesystem.png'
+  alt='Skjermbildet viser et utsnitt fra fargegeneratoren med 5 fargepaletter.'
+  boxShadow={false}
+  caption='Fargesystemet bruker brand-fargen til å genere flere fargervarianter, slik at vi kan sikre god kontrast mellom tekst og bakgrunnsfarger.'
+/>
+
+Temageneratoren er basert på et fargesystem sørger for at både brand-farger ivaretas og kontrastkrav sikres gjennom de lineære fargene som genereres ut fra brand-fargen. Farger beregnet for tekst vil dermed alltid ha god nok kontrast mot bakgrunnsfarger.
+
+Eksempler:
+
+- `Text-default` har alltid god nok kontrast mot alle `background` og `surface` farger.
+- `Text-subtle` har alltid god nok kontrast mot alle `background`-farger og `surface-default`.
+- Dette vil gjelde uansett hva du har valgt som base-farge.
+
+`Base-default`-fargen vil alltid være den samme som fargen du har valgt. Dette er for å ivareta brandet ditt best mulig. Du må derfor selv passe på at fargen du velger oppfyller kontrastkravene i forhold til hvor den skal bli brukt. [Designsystemets temagenerator](theme.designsystemet.no) vil informere deg om eventuelle kontrastbrudd.
+
+La oss se på et eksempel der vi bytter ut fargene:
+
+<ResponsiveIframe
+  src='/img/theme-generator.mp4'
+  title='Skjermopptak fra prototypen. Filmen viser at brukeren endrer en farge og at komponentene påvirkes umiddelbart.'
+  frameBorder='0'
+  allow='autoplay; fullscreen; picture-in-picture'
+  allowFullScreen
+  aspectRatio='16-9'
+></ResponsiveIframe>
+
+## Bruk fargene du har generert
+
+Når du har generert skalaene, kan du [bruke de nye fargekodene i Designsystemet](/grunnleggende/for-designere/eget-tema), slik at alle komponenter følger din profil.

apps/storefront/pages/grunnleggende/for-designere/hent-oppdateringer.mdx

@@ -0,0 +1,29 @@
+import { PaletteIcon } from '@navikt/aksel-icons';
+
+import { MenuPageLayout } from '@layouts';
+import { Meta } from '@components';
+
+<Meta
+  title='Hent oppdateringer fra Figma'
+  description='Hva gjør du når det har kommet en ny versjon av Figma community-filen?'
+/>
+
+export default ({ children }) => (
+  <MenuPageLayout
+    content={children}
+    data={{
+      title: 'Hent oppdateringer fra Figma',
+      date: '22. mai 2024',
+      icon: <PaletteIcon />,
+      color: 'blue',
+    }}
+  />
+);
+
+Hva gjør du når det har kommet en ny versjon av Figma community-filen?
+
+Svaret er dessverre at det ikke finnes en ideell måte å gjøre det på i dag. Figma har foreløpig [ikke støtte for å hente ned endringer fra en Community-fil](https://forum.figma.com/t/need-a-way-to-get-latest-updates-or-subscribe-to-changes-from-a-published-community-file/32571). Vi håper dette vil komme, i mellomtiden kan du vurdere disse alternativene:
+
+1. Hent ned den siste versjonen av Community-filen og publiser den. De som tar i bruk komponentene fra nå av vil da ha de nyeste komponentene. Det er sannsynligvis lite verdi i å oppdatere gamle skisser og prototyper med nye komponenter. Om du likevel ønsker det kan du bruke "Swap"-funksjonen i Figma.
+
+2. Lage en [plugin](https://github.com/digdir/designsystemet/issues/289#issuecomment-2037555899) som kan hente ned siste endringer. Dette er noe vi vil vurdere å se på etter hvert.