docs: move figma component guidance into variables docs (#4918)

Author: mrosvik

apps/www/app/_utils/redirects.server.ts

@@ -198,6 +198,14 @@ const redirects: Redirect[] = [
     from: '/no/fundamentals/figma/get-started',
     to: '/no/fundamentals/start-here/preparations#figma',
   },
+  {
+    from: '/en/fundamentals/figma/new-component',
+    to: '/en/fundamentals/figma/variables-in-figma',
+  },
+  {
+    from: '/no/fundamentals/figma/new-component',
+    to: '/no/fundamentals/figma/variables-in-figma',
+  },
 
   {
     from: '/en/fundamentals/figma/get-started',

apps/www/app/content/fundamentals/en/figma/new-component.mdx

@@ -8,6 +8,9 @@ icon: PaletteIcon
 published: true
 order: 30
 ---
+
+When you create new components in Figma, connect sizes, spacing and colours to the correct variables. This makes the components work as expected across different sizes, and ensures that colours follow the selected theme and work in both light and dark mode.
+
 ## Size Variables
 
 Size variables are used to set both spacing and sizes. 
@@ -54,8 +57,6 @@ To set up your own color variables, see the guide "[Design System with Custom Th
 ### What is main and support?
 Main and Support are separate modes in Figma that simulate the functionality of data-color from code. They only exist in Figma and allow you to control which colors components should use, based on context.
 
-In Figma without an enterprise license, you can use 4 colors per mode, meaning 8 colors total distributed between main and support.
-
 Read more about how these are used in [modes in Figma](/en/fundamentals/figma/modes-in-figma)
 
 This gives you two important advantages:
@@ -67,4 +68,4 @@ Instead of creating separate components for blue, red, green, etc., the same com
 ### Colors in Figma Dev Mode
 In Figma Dev Mode, colors are displayed in two ways:
 - Main / Support: Used for flexible colors, equivalent to [data-color in code](/en/fundamentals/code/colors). You set a mode like main/border-default, and the component inherits the correct color. This makes it easier to reuse components without creating new variants. The modes are cascading - you can set them on page, frame or element.
-- Explicit color: Used when a color should always be the same, regardless of mode. The display in Dev Mode will then show a specific variable, just as in code.
+- Explicit color: Used when a color should always be the same, regardless of mode. The display in Dev Mode will then show a specific variable, just as in code.

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

@@ -9,6 +9,9 @@ published: true
 order: 30
 search_terms: figmavariabler, variables
 ---
+
+Når du lager nye komponenter i Figma, bør du koble størrelser, avstander og farger til riktige variabler. Da vil komponentene fungere som forventet i ulike størrelser, og fargene vil følge valgt theme og fungere i både light og dark mode.
+
 ## Size-variabler
 
 Size-variabler brukes til å sette både avstander og størrelser. 
@@ -55,8 +58,6 @@ For å sette opp egne fargevariabler se guiden "[Designsystemet med eget tema](/
 ### Hva er main og support?
 Main og Support er egne modes i Figma som simulerer funksjonaliteten til data-color fra kode. De finnes kun i Figma og lar deg styre hvilke farger komponenter skal bruke, basert på kontekst.
 
-I Figma uten enterprise-lisens kan du bruke 4 farger per mode, altså 8 farger totalt fordelt mellom main og support.
-
 Les mer om hvordan disse brukes i [modes i Figma](/no/fundamentals/figma/modes-in-figma)
 
 Dette gir deg to viktige fordeler:
@@ -68,4 +69,4 @@ I stedet for å lage separate komponenter for blå, rød, grønn osv., kan én o
 ### Farger i Figma Dev Mode
 I Figma Dev Mode vises farger på to måter:
 - Main / Support: Brukes for fleksible farger, tilsvarende [data-color i kode](/no/fundamentals/code/colors). Du setter en mode som main/border-default, og komponenten arver riktig farge. Dette gjør det enklere å gjenbruke komponenter uten å lage nye varianter. Modusene er cascading - du kan sette dem på page, frame eller element.
-- Eksplisitt farge: Brukes når en farge alltid skal være den samme, uansett mode. Visningen i Dev Mode vil da vise en spesifikk variabel, akkurat som i kode.
+- Eksplisitt farge: Brukes når en farge alltid skal være den samme, uansett mode. Visningen i Dev Mode vil da vise en spesifikk variabel, akkurat som i kode.