feat: add figma code connect

.config/cspellignorewords.txt

@@ -173,3 +173,4 @@ carsharing
 bikesharing
 carsharing
 bikesharing
+figd

.env.template

@@ -5,3 +5,8 @@ COMMIT_MAIL=my.commit@mail.com
 # https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/resources/db-theme
 ASSET_PASSWORD=ABC
 ASSET_INIT_VECTOR=ABC
+
+# When you copy the link of a component you get a url like this https://www.figma.com/design/FIGMA_FILE?node-id=XXX
+# Use the strings between `design/` and `?node-id`
+
+FIGMA_FILE=XXX

.github/workflows/01-build-figma-code-connect.yml

@@ -0,0 +1,30 @@
+---
+name: Build Figma Code Connect
+
+permissions:
+  contents: read
+
+on:
+  workflow_call:
+
+jobs:
+  build-figma-code-connect:
+    name: Build Figma Code Connect
+    runs-on: ubuntu-24.04
+    steps:
+      - name: ⏬ Checkout repo
+        uses: actions/checkout@v6
+
+      - name: 🔄 Init Cache
+        uses: ./.github/actions/npm-cache
+
+      - name: 🔨 Generate Figma Code Connect
+        env:
+          FIGMA_FILE: ${{ github.event.pull_request != null && vars.FIGMA_FILE_DEV || vars.FIGMA_FILE_MAIN }}
+        run: npm run generate:figma --workspace=@db-ux/core-components
+
+      - name: ⏫ Upload figma-code-connect
+        uses: actions/upload-artifact@v6
+        with:
+          name: figma-code-connect
+          path: figma-code-connect

.github/workflows/02-test-figma-code-connect.yml

@@ -0,0 +1,35 @@
+---
+name: Test figma code-connect
+
+permissions:
+  contents: read
+
+on:
+  workflow_call:
+
+jobs:
+  deploy:
+    name: Test figma code-connect
+    runs-on: ubuntu-24.04 # Use Ubuntu 24.04 explicitly
+    strategy:
+      fail-fast: false
+      matrix:
+        target: [angular, react, vue]
+    steps:
+      - name: ⏬ Checkout repo
+        uses: actions/checkout@v6
+
+      - name: 🔄 Init Cache
+        uses: ./.github/actions/npm-cache
+
+      - name: ⏬ Download figma code connect
+        uses: actions/download-artifact@v7
+        with:
+          name: figma-code-connect
+          path: figma-code-connect
+
+      - name: ⚡ Run Test
+        env:
+          FIGMA_ACCESS_TOKEN: ${{ secrets.FIGMA_ACCESS_TOKEN }}
+        run: |
+          npm run test --workspace=${{ matrix.target }}-figma

.github/workflows/03-publish-figma-code-connect.yml

@@ -0,0 +1,35 @@
+---
+name: Publish to figma code-connect
+
+permissions:
+  contents: read
+
+on:
+  workflow_call:
+
+jobs:
+  deploy:
+    name: Publish to figma code-connect
+    runs-on: ubuntu-24.04 # Use Ubuntu 24.04 explicitly
+    strategy:
+      fail-fast: false
+      matrix:
+        target: [angular, react, vue]
+    steps:
+      - name: ⏬ Checkout repo
+        uses: actions/checkout@v6
+
+      - name: 🔄 Init Cache
+        uses: ./.github/actions/npm-cache
+
+      - name: ⏬ Download figma code connect
+        uses: actions/download-artifact@v7
+        with:
+          name: figma-code-connect
+          path: figma-code-connect
+
+      - name: 🖌️🔌 Publish
+        env:
+          FIGMA_ACCESS_TOKEN: ${{ secrets.FIGMA_ACCESS_TOKEN }}
+        run: |
+          npm run connect --workspace=${{ matrix.target }}-figma

.github/workflows/default.yml

@@ -64,6 +64,17 @@ jobs:
     secrets: inherit
     needs: [build-packages]
 
+  build-figma-code-connect:
+    if: ${{ github.event_name != 'release' && github.repository_owner == 'db-ux-design-system'}}
+    uses: ./.github/workflows/01-build-figma-code-connect.yml
+    needs: [init]
+
+  cancel-on-failure-figma-code-connect:
+    if: ${{ github.event_name != 'release' && !cancelled() && needs.build-figma-code-connect.result == 'failure' }}
+    uses: ./.github/workflows/00-cancel-workflow.yml
+    secrets: inherit
+    needs: [build-figma-code-connect]
+
   build-stories:
     if: ${{ needs.init.outputs.isChangesetRelease != 'true' }}
     uses: ./.github/workflows/01-build-stories.yml
@@ -96,6 +107,12 @@ jobs:
     uses: ./.github/workflows/02-vite-plugin-test.yml
     needs: [build-outputs]
 
+  test-figma-code-connect:
+    if: ${{ github.event_name != 'release' && github.repository_owner == 'db-ux-design-system'}}
+    uses: ./.github/workflows/02-test-figma-code-connect.yml
+    needs: [build-figma-code-connect, init]
+    secrets: inherit
+
   test-components:
     uses: ./.github/workflows/02-e2e.yml
     needs: [build-packages, init]
@@ -420,13 +437,15 @@ jobs:
           resultTestShowcaseVue="${{ needs.test-showcase-vue.result }}"
           resultTestShowcasePatternhub="${{ needs.test-showcase-patternhub.result }}"
           resultTestScreenReader="${{ needs.test-screen-reader.result }}"
+          resultTestFigmaCodeConnect="${{ needs.test-figma-code-connect.result }}"
 
           if [[ $resultBuildStorybookComposition == "success" ]] && \
              [[ $resultBuildStorybookAngular == "success" ]] && \
              [[ $resultBuildStorybookReact == "success" ]] && \
              [[ $resultBuildStorybookVue == "success" ]] && \
              [[ $resultTestFoundations == "success" ]] && \
-            [[ $resultTestScreenReader == "success" || (github.event_name != 'release' && $resultTestScreenReader == "skipped") ]] && \
+             [[ $resultTestFigmaCodeConnect == "success" || (github.event_name == 'release' && $resultTestFigmaCodeConnect == "skipped") ]] && \
+             [[ $resultTestScreenReader == "success" || (github.event_name != 'release' && $resultTestScreenReader == "skipped") ]] && \
              [[ $resultTestShowcaseStencil == "success" ]] && \
              [[ $resultTestShowcaseAngular == "success" ]] && \
              [[ $resultTestShowcaseReact == "success" ]] && \
@@ -464,6 +483,7 @@ jobs:
         build-showcase-nuxt,
         build-showcase-patternhub,
         build-outputs,
+        test-figma-code-connect,
         test-components,
         test-vite-plugin,
         test-showcase-stencil,
@@ -492,6 +512,12 @@ jobs:
       repoName: ${{ needs.init.outputs.repoName }}
       repoOwner: ${{ needs.init.outputs.repoOwner }}
 
+  publish-figma-code-connect:
+    if: ${{ !cancelled() && github.event_name != 'release' && github.repository_owner == 'db-ux-design-system' && github.ref == 'refs/heads/main' }}
+    uses: ./.github/workflows/03-publish-figma-code-connect.yml
+    needs: [checks-done, test-figma-code-connect]
+    secrets: inherit
+
   preview-url-pr-description:
     if: ${{ !cancelled() && github.event.pull_request != null }}
     needs: [deploy]

.gitignore

@@ -76,6 +76,7 @@ showcases/patternhub/public/iframe-resizer/*
 /core-web.iml
 /build-storybooks/
 **/blob-report
+/figma-code-connect/**/src/
 
 packages/mcp-server/src/manifest.json
 **/db-ux-detection-report.json

figma-code-connect/angular-figma/figma.config.json

@@ -0,0 +1,7 @@
+{
+	"codeConnect": {
+		"include": ["/**/*.ts"],
+		"label": "Angular",
+		"parser": "html"
+	}
+}

figma-code-connect/angular-figma/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "angular-figma",
+  "version": "0.0.0",
+  "type": "module",
+  "description": "Publish figma code connect",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/db-ux-design-system/core-web.git"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "connect": "npx figma connect publish",
+    "test": "vitest run --config vitest.config.ts",
+    "test:update": "vitest run --config vitest.config.ts --update"
+  },
+  "devDependencies": {
+    "vitest": "4.1.2"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  }
+}