diff --git a/content/altinn-studio/designer/build-app/ui-designer/components/index.en.md b/content/altinn-studio/designer/build-app/ui-designer/components/index.en.md
index f14542d7f21..81de800737b 100644
--- a/content/altinn-studio/designer/build-app/ui-designer/components/index.en.md
+++ b/content/altinn-studio/designer/build-app/ui-designer/components/index.en.md
@@ -113,7 +113,7 @@ See documentation here: https://docs.altinn.studio/altinn-studio/guides/design/g
       </td>
     </tr>
         <tr>
-      <td><a href="/altinn-studio/guides/design/guidelines/components/select/">Dropdown</a></td>
+      <td><a href="/altinn-studio/guides/design/guidelines/components/dropdown/">Dropdown</a></td>
       <td>
         <ul>
           <li>Link to data model</li>
diff --git a/content/altinn-studio/guides/design/guidelines/components/button/_index.en.md b/content/altinn-studio/guides/design/guidelines/components/button/_index.en.md
index 2470148ab41..1d32eed7773 100644
--- a/content/altinn-studio/guides/design/guidelines/components/button/_index.en.md
+++ b/content/altinn-studio/guides/design/guidelines/components/button/_index.en.md
@@ -1,13 +1,16 @@
 ---
 title: Buttons and links
-description: Main button (blue) is used to send the user to the next step.
+description: Primary button (blue) is used to send the user to the next step.
 weight: 20
 ---
 
 ### Guidelines:
-- There should only be one main button per page. Secondary choices can be added as buttons styled as links. 
+- There should only be one main button per page. Secondary choices can be added as secondary buttons. 
 - The text on the button should be clear. Usually "Next" works well, but the button can also be formulated as an answer to a question (example below).
 - The last/submit page of the form should have a green "Submit Form" button.
 
-### Example of use:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D3495%253A809" %}}
+### Eksempel på bruk:
+
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7597%3A3003&node-id=7993-11241&node-type=frame&viewport=-1492%2C411%2C0.43&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---
\ No newline at end of file
diff --git a/content/altinn-studio/guides/design/guidelines/components/button/_index.nb.md b/content/altinn-studio/guides/design/guidelines/components/button/_index.nb.md
index c72cf5ea38f..e63c4b9cc0d 100644
--- a/content/altinn-studio/guides/design/guidelines/components/button/_index.nb.md
+++ b/content/altinn-studio/guides/design/guidelines/components/button/_index.nb.md
@@ -5,10 +5,13 @@ weight: 20
 ---
 
 ### Retningslinjer:
-- Det skal kun være en hovedknapp per side. Sekundærvalg kan legges til som knapper stylet som lenker.
+- Det skal kun være en hovedknapp per side. Sekundærvalg kan legges til som sekundærknapper, de ser ut som lenker.
 - Teksten på knappen skal være tydelig. Som regel fungerer "Neste" bra, men knappen kan også formuleres som svar på 
 et spørsmål (se eksempel under).
 - På siste steg i skjemaet (innsending) skal hovedknappen være grønn.
 
 ### Eksempel på bruk:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D3495%253A809" %}}
+
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7597%3A3003&node-id=7993-11241&node-type=frame&viewport=-1492%2C411%2C0.43&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---
\ No newline at end of file
diff --git a/content/altinn-studio/guides/design/guidelines/components/checkbox/_index.en.md b/content/altinn-studio/guides/design/guidelines/components/checkbox/_index.en.md
index 5df6bcda765..e03d5567d5e 100644
--- a/content/altinn-studio/guides/design/guidelines/components/checkbox/_index.en.md
+++ b/content/altinn-studio/guides/design/guidelines/components/checkbox/_index.en.md
@@ -11,4 +11,6 @@ If the user should only be able to pick one option, use [radio buttons](../radio
 
 ### Example of use:
 
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D5295%253A1181" %}}
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7669%3A83879&node-id=8014-10784&node-type=frame&viewport=799%2C642%2C0.27&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---
\ No newline at end of file
diff --git a/content/altinn-studio/guides/design/guidelines/components/checkbox/_index.nb.md b/content/altinn-studio/guides/design/guidelines/components/checkbox/_index.nb.md
index 9838d9733cb..4453ea07e41 100644
--- a/content/altinn-studio/guides/design/guidelines/components/checkbox/_index.nb.md
+++ b/content/altinn-studio/guides/design/guidelines/components/checkbox/_index.nb.md
@@ -13,4 +13,6 @@ i tekst hvorfor det mangler.
 
 ### Eksempel på bruk:
 
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D5295%253A1181" %}}
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7669%3A83879&node-id=8014-10784&node-type=frame&viewport=799%2C642%2C0.27&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---
\ No newline at end of file
diff --git a/content/altinn-studio/guides/design/guidelines/components/date/_index.en.md b/content/altinn-studio/guides/design/guidelines/components/date/_index.en.md
index 6830fa6e67f..4f2968f3aa0 100644
--- a/content/altinn-studio/guides/design/guidelines/components/date/_index.en.md
+++ b/content/altinn-studio/guides/design/guidelines/components/date/_index.en.md
@@ -15,7 +15,7 @@ Use the date picker if something is being planned, or for selecting a (relativel
 
 ### Example of usage:
 
-<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D4833%253A961" allowfullscreen></iframe>
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7653%3A49596&node-id=8014-16586&node-type=frame&viewport=572%2C356%2C0.19&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
 
 ---
 
@@ -30,4 +30,7 @@ Date fields should be used for dates further back in time, or for dates that the
 - If the foundational data exists, a specific date can be suggested in the field, or it can be preset with the current date.
   
 ### Example of usage:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D5139%253A832" %}}
+
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7653%3A49596&node-id=8300-25621&node-type=frame&viewport=2176%2C-50%2C0.76&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---
\ No newline at end of file
diff --git a/content/altinn-studio/guides/design/guidelines/components/date/_index.nb.md b/content/altinn-studio/guides/design/guidelines/components/date/_index.nb.md
index afa3fdccb98..f862e629d4c 100644
--- a/content/altinn-studio/guides/design/guidelines/components/date/_index.nb.md
+++ b/content/altinn-studio/guides/design/guidelines/components/date/_index.nb.md
@@ -17,7 +17,7 @@ velge datoer tilbake i tid? Innenfor en gitt periode?
 
 ### Eksempel på bruk:
 
-<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D4833%253A961" allowfullscreen></iframe>
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7653%3A49596&node-id=8014-16586&node-type=frame&viewport=572%2C356%2C0.19&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
 
 ---
 
@@ -35,4 +35,7 @@ der en spesifikk dag er viktig, bruk [datovelgeren](#datovelger) i stedet.
 - Om datagrunnlaget finnes, kan en spesifikk dato være foreslått i feltet. Ellers kan eksempelinnholdet være dagen i dag. 
 
 ### Eksempel på bruk:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D5139%253A832" %}}
+
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7653%3A49596&node-id=8300-25621&node-type=frame&viewport=2176%2C-50%2C0.76&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---
\ No newline at end of file
diff --git a/content/altinn-studio/guides/design/guidelines/components/dropdown/_index.en.md b/content/altinn-studio/guides/design/guidelines/components/dropdown/_index.en.md
new file mode 100644
index 00000000000..594b3430369
--- /dev/null
+++ b/content/altinn-studio/guides/design/guidelines/components/dropdown/_index.en.md
@@ -0,0 +1,18 @@
+---
+title: Dropdown
+description: The dropdown list should be used in cases where the user is picking one of many alternatives, much like the radio buttons. 
+weight: 70
+---
+
+### The dropdown list should be used when:
+- You have many alternatives (more than 5, but not unlimited)
+- You have a recommended choice which is pre-selected
+- It isn't important for the user to compare the alternatives
+- You don't need the user to read every alternative
+- The alternatives are known by the user (birth month, country of origin, etc)
+
+### Example of use:
+
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7669%3A77399&node-id=8194-46299&node-type=frame&viewport=832%2C-812%2C0.45&scaling=scale-down&content-scaling=fixed&starting-point-node-id=8014%3A37377&embed-host=share" allowfullscreen></iframe>
+
+---
\ No newline at end of file
diff --git a/content/altinn-studio/guides/design/guidelines/components/select/_index.nb.md b/content/altinn-studio/guides/design/guidelines/components/dropdown/_index.nb.md
similarity index 58%
rename from content/altinn-studio/guides/design/guidelines/components/select/_index.nb.md
rename to content/altinn-studio/guides/design/guidelines/components/dropdown/_index.nb.md
index 895f961b8fd..ea531a84075 100644
--- a/content/altinn-studio/guides/design/guidelines/components/select/_index.nb.md
+++ b/content/altinn-studio/guides/design/guidelines/components/dropdown/_index.nb.md
@@ -13,4 +13,6 @@ Nedtrekksliste velges når:
 
 ### Eksempel på bruk:
 
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D5655%253A1605" %}}
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7669%3A77399&node-id=8194-46299&node-type=frame&viewport=832%2C-812%2C0.45&scaling=scale-down&content-scaling=fixed&starting-point-node-id=8014%3A37377&embed-host=share" allowfullscreen></iframe>
+
+---
\ No newline at end of file
diff --git a/content/altinn-studio/guides/design/guidelines/components/error-message/_index.en.md b/content/altinn-studio/guides/design/guidelines/components/error-message/_index.en.md
index 1fbc9b7684b..c5848d21645 100644
--- a/content/altinn-studio/guides/design/guidelines/components/error-message/_index.en.md
+++ b/content/altinn-studio/guides/design/guidelines/components/error-message/_index.en.md
@@ -19,6 +19,8 @@ Read more about error messaging on [UU-tilsynet's web pages (nb)](https://www.uu
 - The requirements to submit the form correctly should be clearly indicated before any error messages appear.
 - If the form has faults when the user attempts to proceed, the error messaging box at the top of the screen should show all errors and link to the fields that are incorrectly formatted. ⚠️ NB: This functionality is currently unavailable in Altinn Studio
 
-### Example of usage:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D5711%253A2073" %}}
+### Example of use:
 
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7653%3A50248&node-id=8014-22322&node-type=frame&viewport=10%2C702%2C0.44&scaling=scale-down&content-scaling=fixed&starting-point-node-id=8014%3A22322&embed-host=share" allowfullscreen></iframe>
+
+---
diff --git a/content/altinn-studio/guides/design/guidelines/components/error-message/_index.nb.md b/content/altinn-studio/guides/design/guidelines/components/error-message/_index.nb.md
index a8d2387ded9..e845aa9dc00 100644
--- a/content/altinn-studio/guides/design/guidelines/components/error-message/_index.nb.md
+++ b/content/altinn-studio/guides/design/guidelines/components/error-message/_index.nb.md
@@ -24,5 +24,7 @@ og lenke til de feltene feilen gjelder. Feilene skal forsvinne etterhvert som de
 funksjonaliteten er ikke tilgjengelig i Altinn Studio enda.
 
 ### Eksempel på bruk:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D5711%253A2073" %}}
 
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7653%3A50248&node-id=8014-22322&node-type=frame&viewport=10%2C702%2C0.44&scaling=scale-down&content-scaling=fixed&starting-point-node-id=8014%3A22322&embed-host=share" allowfullscreen></iframe>
+
+---
\ No newline at end of file
diff --git a/content/altinn-studio/guides/design/guidelines/components/file-upload/_index.en.md b/content/altinn-studio/guides/design/guidelines/components/file-upload/_index.en.md
index 720d5c3b582..49f1544185b 100644
--- a/content/altinn-studio/guides/design/guidelines/components/file-upload/_index.en.md
+++ b/content/altinn-studio/guides/design/guidelines/components/file-upload/_index.en.md
@@ -11,5 +11,8 @@ Before requesting a file upload, check if the data can be collected differently,
 - If the upload has an error, be as specific as possible in the error message. Saying "Incorrect format" is not enough, the requirement has to be exactly specified. 
 - If your form requires multiple attachments of different types/categories, we recommend requesting them in multiple steps with a file upload module for each step. Specify what should be uploaded on each page, so that the user is never in doubt. 
 
-### Example of usage:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D10665%253A6471" %}}
+### Example of use:
+
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7653%3A60542&node-id=8014-26201&node-type=frame&viewport=104%2C714%2C0.35&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---
\ No newline at end of file
diff --git a/content/altinn-studio/guides/design/guidelines/components/file-upload/_index.nb.md b/content/altinn-studio/guides/design/guidelines/components/file-upload/_index.nb.md
index 23877dc6cee..7718eea615f 100644
--- a/content/altinn-studio/guides/design/guidelines/components/file-upload/_index.nb.md
+++ b/content/altinn-studio/guides/design/guidelines/components/file-upload/_index.nb.md
@@ -15,4 +15,7 @@ det må spesifiseres nøyaktig hva som kreves.
 filopplaster i hvert steg. Spesifiser i innledningen på hver side hva som skal legges ved, slik at brukeren ikke blir i tvil.
 
 ### Eksempel på bruk:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D10665%253A6471" %}}
+
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7653%3A60542&node-id=8014-26201&node-type=frame&viewport=104%2C714%2C0.35&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---
\ No newline at end of file
diff --git a/content/altinn-studio/guides/design/guidelines/components/helptext/_index.en.md b/content/altinn-studio/guides/design/guidelines/components/helptext/_index.en.md
index 2e344c0b3de..f7c88f7194d 100644
--- a/content/altinn-studio/guides/design/guidelines/components/helptext/_index.en.md
+++ b/content/altinn-studio/guides/design/guidelines/components/helptext/_index.en.md
@@ -10,5 +10,8 @@ You can also use the help text field to explain rules, terms or explain why the
 - Help texts are placed together with a label or title that needs further explanation. 
 - If information contained in a helper text is needed in order to answer the form correctly, **do not** use a help text, as required information should be placed in an info text in the UI (below the header).
 
-### Example of usage:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D5711%253A1788" %}}
+### Example of use:
+
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7669%3A75779&node-id=8014-35112&node-type=frame&viewport=960%2C660%2C0.33&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---
\ No newline at end of file
diff --git a/content/altinn-studio/guides/design/guidelines/components/helptext/_index.nb.md b/content/altinn-studio/guides/design/guidelines/components/helptext/_index.nb.md
index 2bad2743581..b6144f9af08 100644
--- a/content/altinn-studio/guides/design/guidelines/components/helptext/_index.nb.md
+++ b/content/altinn-studio/guides/design/guidelines/components/helptext/_index.nb.md
@@ -12,4 +12,7 @@ Man kan også benytte feltet til å forklare et regelverk, fremmede begreper, el
 plasseres i en infotekst i grensesnittet (under labelen). 
 
 ### Eksempel på bruk:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D5711%253A1788" %}}
+
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7669%3A75779&node-id=8014-35112&node-type=frame&viewport=960%2C660%2C0.33&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---
\ No newline at end of file
diff --git a/content/altinn-studio/guides/design/guidelines/components/input/_index.en.md b/content/altinn-studio/guides/design/guidelines/components/input/_index.en.md
index c59442337c3..6db7bf7ac77 100644
--- a/content/altinn-studio/guides/design/guidelines/components/input/_index.en.md
+++ b/content/altinn-studio/guides/design/guidelines/components/input/_index.en.md
@@ -13,9 +13,11 @@ toc: true
 - Two input fields can be placed beside each other if they are somehow connected, see the example below. 
 - Deactivated fields should be avoided. If a field cannot be edited, the information should instead be presented as text. 
 
-### Example of usage:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D2816%253A1332" %}}
+### Example of use:
+
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=&node-id=8014-37377&node-type=frame&viewport=973%2C657%2C0.32&scaling=scale-down&content-scaling=fixed&starting-point-node-id=8014%3A37377&embed-host=share" allowfullscreen></iframe>
 
+---
 
 ### Width of an input field
 The width of an input field should reflect what is expected as input from the user. We currently have three standard sizes that should reflect most scenarios and cover different screen-sizes. [Read more about how to change the sizes here](/altinn-studio/reference/ux/styling/#innergrid-og-labelgrid).
@@ -63,7 +65,7 @@ Large text fields are used when the user has to fill in a longer explanation. La
 
 ### Example of usage:
 
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D3495%253A656" %}}
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7669%3A77399&node-id=8158-45097&node-type=frame&viewport=895%2C-77%2C0.32&scaling=scale-down&content-scaling=fixed&starting-point-node-id=8014%3A37377&embed-host=share" allowfullscreen></iframe>
 
 ---
 
@@ -72,4 +74,6 @@ For addresses, there is a rigid setup where the postal code and city is on the s
 
 ### Example of usage:
 
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D2911%253A652" %}}
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7669%3A77399&node-id=8134-44753&node-type=frame&viewport=1038%2C88%2C0.45&scaling=scale-down&content-scaling=fixed&starting-point-node-id=8014%3A37377&embed-host=share" allowfullscreen></iframe>
+
+---
\ No newline at end of file
diff --git a/content/altinn-studio/guides/design/guidelines/components/input/_index.nb.md b/content/altinn-studio/guides/design/guidelines/components/input/_index.nb.md
index 22936882f51..a3dda5ca174 100644
--- a/content/altinn-studio/guides/design/guidelines/components/input/_index.nb.md
+++ b/content/altinn-studio/guides/design/guidelines/components/input/_index.nb.md
@@ -14,8 +14,10 @@ toc: true
 - Deaktivert felt bør unngås. Dersom et felt ikke kan redigeres bør informasjonen heller presenteres i tekst. 
 
 ### Eksempel på bruk:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D2816%253A1332" %}}
 
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=&node-id=8014-37377&node-type=frame&viewport=973%2C657%2C0.32&scaling=scale-down&content-scaling=fixed&starting-point-node-id=8014%3A37377&embed-host=share" allowfullscreen></iframe>
+
+---
 
 ### Bredde på inputfelt
 Bredden på inputfeltet burde reflektere det som forventes av input fra brukeren. Vi har laget tre standard størrelser som burde dekke de fleste scenarioer og som skal fungere på forskjellige skjermstørrelser. [Les om hvordan du endrer størrelsen her](/altinn-studio/reference/ux/styling/#innergrid-og-labelgrid)
@@ -64,7 +66,7 @@ inputfelt gjelder.
 
 ### Eksempel på bruk:
 
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D3495%253A656" %}}
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7669%3A77399&node-id=8158-45097&node-type=frame&viewport=895%2C-77%2C0.32&scaling=scale-down&content-scaling=fixed&starting-point-node-id=8014%3A37377&embed-host=share" allowfullscreen></iframe>
 
 ---
 
@@ -74,4 +76,6 @@ ut automatisk basert på postnr-input.
 
 ### Eksempel på bruk:
 
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D2911%253A652" %}}
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7669%3A77399&node-id=8134-44753&node-type=frame&viewport=1038%2C88%2C0.45&scaling=scale-down&content-scaling=fixed&starting-point-node-id=8014%3A37377&embed-host=share" allowfullscreen></iframe>
+
+---
\ No newline at end of file
diff --git a/content/altinn-studio/guides/design/guidelines/components/picture-component/_index.en.md b/content/altinn-studio/guides/design/guidelines/components/picture-component/_index.en.md
index 123a12010ab..2e819620223 100644
--- a/content/altinn-studio/guides/design/guidelines/components/picture-component/_index.en.md
+++ b/content/altinn-studio/guides/design/guidelines/components/picture-component/_index.en.md
@@ -17,9 +17,3 @@ It is important that alternative texts are written consequently. We recommend fo
 - Write short and start with the most important part of the image
 - End by saying if the photo is a photo, illustration or graphic.
 
-**Example** 
-"Three old wooden trolley. Photograph."
-
-### Example of use:
-
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D2815%253A680" %}}
diff --git a/content/altinn-studio/guides/design/guidelines/components/picture-component/_index.nb.md b/content/altinn-studio/guides/design/guidelines/components/picture-component/_index.nb.md
index 7863be43016..a49d16ccba1 100644
--- a/content/altinn-studio/guides/design/guidelines/components/picture-component/_index.nb.md
+++ b/content/altinn-studio/guides/design/guidelines/components/picture-component/_index.nb.md
@@ -17,9 +17,3 @@ Det er viktig at måten vi skriver alternative tekster er konsekvente. Vi anbefa
 - skriv kort og begynn med det viktigste
 - avslutt ved å si om det er foto, illustrasjon eller grafikk
 
-**Eksempel** 
-"Tre gamle tretraller. Foto."
-
-### Eksempel på bruk:
-
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D2815%253A680" %}}
diff --git a/content/altinn-studio/guides/design/guidelines/components/radiobutton/_index.en.md b/content/altinn-studio/guides/design/guidelines/components/radiobutton/_index.en.md
index 855d8c10fe7..16698abb0c7 100644
--- a/content/altinn-studio/guides/design/guidelines/components/radiobutton/_index.en.md
+++ b/content/altinn-studio/guides/design/guidelines/components/radiobutton/_index.en.md
@@ -14,6 +14,8 @@ weight: 60
 - Deactivated radio buttons should be avoided. If an option is unavailable it 
 should be removed and the reason why explained in a text. 
 
-### Example of use:
+### Example of usage:
 
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D5655%253A1419" %}}
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=&node-id=8021-77574&node-type=frame&viewport=563%2C533%2C0.19&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---
\ No newline at end of file
diff --git a/content/altinn-studio/guides/design/guidelines/components/radiobutton/_index.nb.md b/content/altinn-studio/guides/design/guidelines/components/radiobutton/_index.nb.md
index 41d700719de..629a484e9dc 100644
--- a/content/altinn-studio/guides/design/guidelines/components/radiobutton/_index.nb.md
+++ b/content/altinn-studio/guides/design/guidelines/components/radiobutton/_index.nb.md
@@ -18,5 +18,6 @@ i tekst hvorfor det mangler.
 
 ### Eksempel på bruk:
 
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D5655%253A1419" %}}
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=&node-id=8021-77574&node-type=frame&viewport=563%2C533%2C0.19&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
 
+---
\ No newline at end of file
diff --git a/content/altinn-studio/guides/design/guidelines/components/select/_index.en.md b/content/altinn-studio/guides/design/guidelines/components/select/_index.en.md
deleted file mode 100644
index 1798b7dc7f4..00000000000
--- a/content/altinn-studio/guides/design/guidelines/components/select/_index.en.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: Dropdown
-description: The pull-down list should be used in cases where the user is picking one of many alternatives, much like the radio buttons. 
-weight: 70
----
-
-### The pull-down list should be used when:
-- You have many alternatives (more than 5, but not unlimited)
-- You have a recommended choice which is pre-selected
-- It isn't important for the user to compare the alternatives
-- You don't need the user to read every alternative
-- The alternatives are known by the user (birth month, country of origin, etc)
-
-### Example of use:
-
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D5655%253A1605" %}}
diff --git a/content/altinn-studio/guides/design/guidelines/components/title-and-paragraph/_index.en.md b/content/altinn-studio/guides/design/guidelines/components/title-and-paragraph/_index.en.md
index 1272bafd2da..b9674d7f5df 100644
--- a/content/altinn-studio/guides/design/guidelines/components/title-and-paragraph/_index.en.md
+++ b/content/altinn-studio/guides/design/guidelines/components/title-and-paragraph/_index.en.md
@@ -1,5 +1,5 @@
 ---
-title: Titles and paragraphs
+title: Typography
 description: In most cases, there should be a header (H2) and a paragraph at the start of form pages to summarize the task of the user.
 weight: 10
 ---
@@ -12,4 +12,6 @@ weight: 10
 
 ### Example using different text sizes:
 
-{{% figma-example src="https://www.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/branch/bmIjxvx6Y3SWQO0L2GfAtJ/Altinn-Studio-Komponenter?page-id=7704%3A42723&node-id=7775-83095&node-type=canvas&viewport=1068%2C905%2C0.37&t=x1HB477mc3oa8lWU-1&scaling=min-zoom&content-scaling=fixed" %}}
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7704%3A42723&node-id=8021-82726&node-type=frame&viewport=590%2C727%2C0.2&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---
\ No newline at end of file
diff --git a/content/altinn-studio/guides/design/guidelines/components/title-and-paragraph/_index.nb.md b/content/altinn-studio/guides/design/guidelines/components/title-and-paragraph/_index.nb.md
index 7ab056a78c5..1df53ea3560 100644
--- a/content/altinn-studio/guides/design/guidelines/components/title-and-paragraph/_index.nb.md
+++ b/content/altinn-studio/guides/design/guidelines/components/title-and-paragraph/_index.nb.md
@@ -1,5 +1,5 @@
 ---
-title: Tittel og avsnitt
+title: Typografi
 description: Det bør som hovedregel alltid være en header (H2) og et avsnitt i starten på en skjamaside for å oppsummere brukerens oppgave.
 weight: 10
 ---
@@ -12,4 +12,6 @@ weight: 10
 
 ### Eksempel på bruk:
 
-{{% figma-example src="https://www.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/branch/bmIjxvx6Y3SWQO0L2GfAtJ/Altinn-Studio-Komponenter?page-id=7704%3A42723&node-id=7775-83095&node-type=canvas&viewport=1068%2C905%2C0.37&t=x1HB477mc3oa8lWU-1&scaling=min-zoom&content-scaling=fixed" %}}
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7704%3A42723&node-id=8021-82726&node-type=frame&viewport=590%2C727%2C0.2&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---
\ No newline at end of file