diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 2f3cf744e7a98c4c727c43b9b7c827e25f84cbe4..a62e60ec67c9f176e2551684cd7fa24b586177cb 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -446,6 +446,7 @@ publish-figma:
     - npm pkg delete scripts.prepare
     - npm ci --cache .npm
     - npx figma connect publish --token ${FIGMA_TOKEN}
+    - npx figma connect publish --token ${FIGMA_TOKEN} --config figma.html.config.json
   needs:
     - install
   rules:
diff --git a/eslint.config.mjs b/eslint.config.mjs
index c7f03ff39017600a956afef76f838c13e8d8e077..9d6021a2d493aef6d2c3412ed43448b4cd220631 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -17,6 +17,7 @@ export default [
       "docs/tutorial/**/*",
       "turbo/generators/**/*",
       "apps/gatsby",
+      "packages/**/figma/*",
     ],
   },
   ...sdsConfig,
diff --git a/figma.html.config.json b/figma.html.config.json
new file mode 100644
index 0000000000000000000000000000000000000000..4aba2cb1869daffd4d56a01567a4783fb8815887
--- /dev/null
+++ b/figma.html.config.json
@@ -0,0 +1,6 @@
+{
+  "codeConnect": {
+    "parser": "html",
+    "label": "HTML"
+  }
+}
diff --git a/jest.config.js b/jest.config.js
index 20f2565b7e8cafc05b567341c1005d6a060cd3ce..167de918a844434118f181acec72f004d4fe9aa9 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -6,7 +6,7 @@ module.exports = {
     "/node_modules/",
     "/build/",
     "/dist/",
-    ".figma.tsx",
+    "/figma/*",
     ".stories.tsx",
   ],
   coverageDirectory: "./coverage",
diff --git a/packages/button/figma/Button.html.ts b/packages/button/figma/Button.html.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f84975e923a0acccb0a395fe34de02a18fd52287
--- /dev/null
+++ b/packages/button/figma/Button.html.ts
@@ -0,0 +1,102 @@
+import figma, { html } from "@figma/code-connect/html";
+
+figma.connect(
+  "https://www.figma.com/design/RMhyuuEhXZ4vbKVrLQr4t4/SDS-Komponentbibliotek-2.0.0?node-id=422%3A4494",
+  {
+    variant: { Label: true },
+    props: {
+      className: figma.className([
+        "sds-button",
+        figma.enum("Visibilty", {
+          Strong: "sds-button--strong",
+          Subtle: "sds-button--subtle",
+          Transparent: "sds-button--transparent",
+          Danger: "sds-button--critical",
+        }),
+        figma.enum("Size", { Small: "sds-button--small" }),
+      ]),
+      label: figma.string("Label text"),
+    },
+    example: ({ className, label }) =>
+      html`<button class="${className}">
+        <span class="sds-button__label">${label}</span>
+      </button>`,
+  },
+);
+
+figma.connect(
+  "https://www.figma.com/design/RMhyuuEhXZ4vbKVrLQr4t4/SDS-Komponentbibliotek-2.0.0?node-id=422%3A4494",
+  {
+    variant: { Label: true, "Show icon / Right": true },
+    props: {
+      className: figma.className([
+        "sds-button",
+        figma.enum("Visibilty", {
+          Strong: "sds-button--strong",
+          Subtle: "sds-button--subtle",
+          Transparent: "sds-button--transparent",
+          Danger: "sds-button--critical",
+        }),
+        figma.enum("Size", { Small: "sds-button--small" }),
+      ]),
+      label: figma.string("Label text"),
+      icon: figma.instance("Icon / Right"),
+    },
+    example: ({ className, label, icon }) =>
+      html`<button class="${className}">
+        <span class="sds-button__label">${label}</span>
+        <span class="sds-button__icon">${icon}</span>
+      </button>`,
+  },
+);
+
+figma.connect(
+  "https://www.figma.com/design/RMhyuuEhXZ4vbKVrLQr4t4/SDS-Komponentbibliotek-2.0.0?node-id=422%3A4494",
+  {
+    variant: { Label: true, "Show icon / Left": true },
+    props: {
+      className: figma.className([
+        "sds-button",
+        figma.enum("Visibilty", {
+          Strong: "sds-button--strong",
+          Subtle: "sds-button--subtle",
+          Transparent: "sds-button--transparent",
+          Danger: "sds-button--critical",
+        }),
+        figma.enum("Size", { Small: "sds-button--small" }),
+      ]),
+      label: figma.string("Label text"),
+      icon: figma.instance("Icon / Left"),
+    },
+    example: ({ className, label, icon }) =>
+      html`<button class="${className}">
+        <span class="sds-button__icon">${icon}</span>
+        <span class="sds-button__label">${label}</span>
+      </button>`,
+  },
+);
+
+figma.connect(
+  "https://www.figma.com/design/RMhyuuEhXZ4vbKVrLQr4t4/SDS-Komponentbibliotek-2.0.0?node-id=422%3A4494",
+  {
+    variant: { Label: false, "Show icon / Right": true },
+    props: {
+      className: figma.className([
+        "sds-button",
+        figma.enum("Visibilty", {
+          Strong: "sds-button--strong",
+          Subtle: "sds-button--subtle",
+          Transparent: "sds-button--transparent",
+          Danger: "sds-button--critical",
+        }),
+        figma.enum("Size", { Small: "sds-button--small" }),
+      ]),
+      label: figma.string("Label text"),
+      icon: figma.instance("Icon / Right"),
+    },
+    example: ({ className, label, icon }) =>
+      html`<button class="${className}" aria-label="${label}">
+        <span class="sds-button__icon">${icon}</span>
+      </button>`,
+  },
+);
diff --git a/packages/button/figma/Button.figma.tsx b/packages/button/figma/Button.react.tsx
similarity index 100%
rename from packages/button/figma/Button.figma.tsx
rename to packages/button/figma/Button.react.tsx