docs: Slots in Figma

apps/www/app/content/fundamentals/en/figma/slots-in-figma.mdx

@@ -0,0 +1,35 @@
+---
+title: Slots in Figma
+description: Learn how to use slots in Figma to customise components without detaching them.
+date: 2025-08-21
+category: Figma
+color: yellow
+icon: LayersPlusIcon
+published: true
+order: 20
+---
+
+When working with components in Figma, you may often need to customise the content without breaking the connection to the main component. Many solve this by *detaching* the component, but that means you lose the benefits of inheriting changes and improvements from the library.  
+
+With **slots**, you can instead keep the connection while adding your own content. Slots act as open areas within a component where you can place other components. If you need more complex compositions of content and different components, you can combine them into a separate component and then insert that component into the slot.  
+
+Several of our components are built with slots, allowing you to customise what content to place inside them. This applies to `Card`, `Details`, and `Dialog`.  
+
+## Why use slots?
+- **Keeps the connection to the library.** You do not need to update manually when the main component changes.  
+- **More flexible use.** You can insert content that varies from case to case, without altering the component itself.  
+- **Consistency and control.** The structure and style come from Desigsystemet, while you have the freedom to add your own content.  
+
+## How does it work in practice?
+Let’s take an example with a `Dialog` component. A `Dialog` can have different content depending on the need – everything from a simple text message to more complex user interfaces.
+
+1. Insert the `Dialog` from the library.  
+2. Instead of *detaching*, use the slot area that is available inside the component.  
+3. Add the content you need, for example, a table or a list.  
+4. If the content consists of several elements, you can create a new component of that content and place it inside the slot.  
+
+[VIDEO]
+
+<br/>
+
+<br/>

apps/www/app/content/fundamentals/no/figma/slots-in-figma.mdx

@@ -0,0 +1,56 @@
+---
+title: Bytte innhold med "swap"
+description: Lær hvordan du kan bruke "swap"-funksjonen i Figma for å tilpasse komponenter uten å detache dem.
+date: 2025-08-21
+category: Figma
+color: yellow
+icon: LayersPlusIcon
+published: true
+order: 20
+---
+Når du jobber med komponenter i Figma kan du ofte ha behov for å tilpasse innholdet uten å ødelegge koblingen til hovedkomponenten. Mange løser dette ved å *detache* komponenten, men det gjør at du mister fordelene med å arve endringer og forbedringer fra biblioteket.  
+
+Med **"swap"** kan du i stedet beholde koblingen og samtidig legge inn eget innhold. Når du har valgt en komponent, kan du åpne instans-menyen i høyresidepanelet. Her kan du bytte ut komponenten med andre komponenter fra biblioteket. 
+
+I videoen under bytter vi ut `body` i `Alert`-komponenten med en selvlaget sammensatt komponent som inneholder både tekst, `details` og knapper. 
+
+<ResponsiveIframe
+  src='/img/swap-alert.mp4'
+  title='Skjermopptak av Figma som viser hvordan bytte ut en komponent med en annen.'
+  frameBorder='0'
+  allow='autoplay; fullscreen; picture-in-picture'
+  allowFullScreen
+  aspectRatio='16-9'
+/>
+
+Du markerer altså komponenten du vil bytte ut, åpner instans-menyen i høyresidepanelet, og finner komponenten du vil bruke i stedet. Hvis innholdet består av flere elementer, kan du lage en ny komponent med det innholdet du ønsker. Husk å bruke punktum (.) foran navnet på komponenten hvis den ikke skal eksporteres til biblioteket. 
+
+
+## Hvorfor bruke swap?
+- **Beholder koblingen til biblioteket.** Du slipper å oppdatere manuelt når hovedkomponenten endres.  
+- **Mer fleksibel bruk.** Du kan sette inn innhold som varierer fra gang til gang, uten å endre selve komponenten.  
+- **Konsistens og kontroll.** Grunnstrukturen og stilen kommer fra Designsystemet, mens du har frihet til å fylle innholdet.  
+
+## "Slots"-områder
+Flere av komponentene våre har innebygde "slots"-områder, siden vi ikke vet hva du har behov for av innhold. Dette gjelder `Card`, `Details` og `Dialog`. "Slots" i disse komponentene fungerer som åpne områder der du kan plassere det innholdet du trenger. Trenger du kompliserte sammensetninger av innhold og ulike komponenter kan du sette dem sammen til en egen komponent, og deretter bytte ut Slot-komponenten med din egen.
+
+## Hvordan fungerer det i praksis?
+La oss ta et eksempel med en **dialog-komponent**. En `Dialog` kan ha ulikt innhold avhengig av behov, alt fra en enkel tekst til komplekse grensesnitt.
+
+1. Sett inn dialog-komponenten fra biblioteket.  
+2. I stedet for å *detache*, bruk slot-området som er tilgjengelig inne i komponenten.  
+3. Legg inn innholdet du trenger, for eksempel en tabell eller en liste.  
+4. Hvis innholdet består av flere elementer, kan du lage en ny komponent av dette innholdet og plassere den inn i sloten.  
+
+<ResponsiveIframe
+  src='/img/swap-alert.mp4'
+  title='Skjermopptak av Figma som viser hvordan bytte ut en komponent med en annen.'
+  frameBorder='0'
+  allow='autoplay; fullscreen; picture-in-picture'
+  allowFullScreen
+  aspectRatio='16-9'
+/>
+
+<br/>
+
+<br/>