feat: add figma code connect by nmerget · Pull Request #5937 · db-ux-design-system/core-web

nmerget · 2026-01-28T08:15:44Z

Proposed changes

Add figma code connect plugin for mitosis
Add cicd for testing and publishing code connect
Add documentation "how to connect"

closes #3428

Types of changes

Bugfix (non-breaking change that fixes an issue)
New feature (non-breaking change which adds functionality)
Refactoring (improvements to existing components or architectural decisions)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Documentation Update (if none of the other choices apply)

Further comments

🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/feat-code-connect

changeset-bot · 2026-01-28T08:15:47Z

⚠️ No Changeset found

Latest commit: 9258649

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copilot

Pull request overview

Adds Figma Code Connect support to the Core Web design system monorepo by introducing a Mitosis-based generator, framework-specific Code Connect workspaces, and CI workflows to build/test/publish the generated connectors (per #3428).

Changes:

Introduces shared Figma Code Connect typings plus an initial Button mapping + Mitosis “figma lite” variants.
Adds a dedicated Mitosis config + plugin to generate Code Connect packages into figma-code-connect/*.
Extends the default CI pipeline with build/test/publish jobs for the Code Connect outputs and documents the setup process.

Reviewed changes

Copilot reviewed 41 out of 46 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/components/src/shared/figma.ts	Adds shared types for Code Connect metadata (props/urls).
packages/components/src/components/button/figma/button.figma.ts	Defines Button → Figma property mapping and URLs for Code Connect.
packages/components/src/components/button/figma/text.button.figma.lite.tsx	Adds Mitosis “figma lite” variant for text button connection metadata.
packages/components/src/components/button/figma/no-text.button.figma.lite.tsx	Adds Mitosis “figma lite” variant for icon/no-text button connection metadata.
packages/components/package.json	Adds `generate:figma` script to run the new Mitosis config.
packages/components/docs/how-to-figma-connect.md	Documents how to set up mappings, generate, test, and publish Code Connect.
packages/components/configs/mitosis.config.cjs	Excludes `.figma.` sources from the standard outputs build.
packages/components/configs/angular/mitosis.config.cjs	Excludes `.figma.` sources from Angular target build.
packages/components/configs/react/mitosis.config.cjs	Excludes `.figma.` sources from React target build.
packages/components/configs/vue/mitosis.config.cjs	Excludes `.figma.` sources from Vue target build.
packages/components/configs/stencil/mitosis.config.cjs	Excludes `.figma.` sources from Stencil target build.
packages/components/configs/mitosis.figma.config.cjs	Adds dedicated Mitosis config to generate Code Connect packages to `figma-code-connect/`.
packages/components/configs/plugins/figma/index.cjs	Implements a Mitosis plugin that emits `figma.connect(...)` modules from `useMetadata({ figma: ... })`.
package.json	Adds `figma-code-connect/*` as workspaces and adds `@figma/code-connect` dev dependency.
package-lock.json	Locks the new dependency and workspaces.
figma-code-connect/angular-figma/package.json	Defines Angular Code Connect workspace scripts (connect/test).
figma-code-connect/angular-figma/figma.config.json	Configures Code Connect parsing for Angular (html parser).
figma-code-connect/angular-figma/tsconfig.json	Adds TS config for Angular Code Connect workspace.
figma-code-connect/angular-figma/vitest.config.ts	Adds Vitest config for Angular Code Connect workspace.
figma-code-connect/angular-figma/test/parse.spec.ts	Adds snapshot-based parse test for generated connectors.
figma-code-connect/angular-figma/test/publish.spec.ts	Adds publish dry-run test for generated connectors.
figma-code-connect/angular-figma/test/snapshots/parse.spec.ts.snap	Stores expected parse output snapshot.
figma-code-connect/react-figma/package.json	Defines React Code Connect workspace scripts (connect/test).
figma-code-connect/react-figma/figma.config.json	Configures Code Connect parsing for React (react parser).
figma-code-connect/react-figma/tsconfig.json	Adds TS config for React Code Connect workspace.
figma-code-connect/react-figma/vitest.config.ts	Adds Vitest config for React Code Connect workspace.
figma-code-connect/react-figma/test/parse.spec.ts	Adds snapshot-based parse test for generated connectors.
figma-code-connect/react-figma/test/publish.spec.ts	Adds publish dry-run test for generated connectors.
figma-code-connect/vue-figma/package.json	Defines Vue Code Connect workspace scripts (connect/test).
figma-code-connect/vue-figma/figma.config.json	Configures Code Connect parsing for Vue (html parser).
figma-code-connect/vue-figma/tsconfig.json	Adds TS config for Vue Code Connect workspace.
figma-code-connect/vue-figma/vitest.config.ts	Adds Vitest config for Vue Code Connect workspace.
figma-code-connect/vue-figma/test/parse.spec.ts	Adds snapshot-based parse test for generated connectors.
figma-code-connect/vue-figma/test/publish.spec.ts	Adds publish dry-run test for generated connectors.
figma-code-connect/vue-figma/test/snapshots/parse.spec.ts.snap	Stores expected parse output snapshot.
.gitignore	Ignores generated `figma-code-connect/**/src/` output directories.
.github/workflows/default.yml	Integrates build/test/publish jobs for Code Connect into the default pipeline.
.github/workflows/01-build-figma-code-connect.yml	Adds reusable workflow to generate and upload the Code Connect artifact.
.github/workflows/02-test-figma-code-connect.yml	Adds reusable workflow to run Code Connect parsing/publish dry-run tests.
.github/workflows/03-publish-figma-code-connect.yml	Adds reusable workflow to publish Code Connect packages via CLI.
.env.template	Adds `FIGMA_FILE` variable documentation/template entry.
.config/cspellignorewords.txt	Adds `figd` to spellcheck ignore list (token prefix in docs).

Comments suppressed due to low confidence (5)

figma-code-connect/vue-figma/test/publish.spec.ts:12

This test contains a redundant works variable and assertion; execSync(...) will already fail the test by throwing if the command fails. Consider removing the dummy assertion (and the unnecessary async).

	test('check if publish dry-run works', async () => {
		const works = true;
		execSync(
			'npx figma connect publish --dry-run --exit-on-unreadable-files'
		);

		expect(works).toBeTruthy();
	});

figma-code-connect/angular-figma/test/publish.spec.ts:12

This test contains a redundant works variable and assertion; execSync(...) will already fail the test by throwing if the command fails. Consider removing the dummy assertion (and the unnecessary async).

	test('check if publish dry-run works', async () => {
		const works = true;
		execSync(
			'npx figma connect publish --dry-run --exit-on-unreadable-files'
		);

		expect(works).toBeTruthy();
	});

packages/components/docs/how-to-figma-connect.md:48

Typo: "When coping a link" should be "When copying a link" (and consider capitalizing "Figma").
packages/components/docs/how-to-figma-connect.md:103
Typo/grammar: "The generates files" should be "The generated files".
figma-code-connect/react-figma/test/publish.spec.ts:12
This test contains a redundant works variable and assertion; execSync(...) will already fail the test by throwing if the command fails. Consider removing the dummy assertion (and the unnecessary async).

	test('check if publish dry-run works', async () => {
		const works = true;
		execSync(
			'npx figma connect publish --dry-run --exit-on-unreadable-files'
		);

		expect(works).toBeTruthy();
	});

.github/workflows/default.yml

packages/components/configs/plugins/figma/index.cjs

packages/components/docs/how-to-figma-connect.md

.github/workflows/default.yml

# Conflicts: # .config/cspellignorewords.txt # package-lock.json # package.json

sarahbrng

I assume this will be available when the branch is merged?

sarahbrng · 2026-03-05T12:15:19Z

packages/components/src/components/button/figma/text.button.figma.lite.tsx

+			variant={props.variant}
+			showIconLeading={props.showIconLeading}
+			type="button">
+			{props.text}


ambiguous icon prop mapping
the leading icon state is passed twice through two different APIs:
generic API: icon + showIcon
explicit API: showIconLeading (but no iconLeading)

I suspect that a standardisation with figma will be adjusted in the future?

sarahbrng · 2026-03-05T12:21:57Z

packages/components/src/components/button/figma/button.figma.ts

+	iconLeading?: string;
+	iconTrailing?: string;
+	icon?: string;
+};


Strengthen typing:
size, width, variant, and icon props are plain string; using existing design-system types (SizeType, WidthType, ButtonVariantType, IconTypes) improves safety and autocomplete.

Either:
strict design-token enforcement, use only enum-like types or keep unions like ButtonVariantType | string

sarahbrng · 2026-03-05T12:26:15Z

packages/components/src/components/button/figma/button.figma.ts

+	size?: string;
+	width?: string;
+	disabled?: boolean;
+	noText?: boolean;


noText is defined in defaultButtonProps.
Both textButtonProps and noTextButtonProps spread defaultButtonProps, so both mappings expose noText.
textButtons is meant to represent “text button” variants, but it still allows toggling noText=true.
That creates a contradictory state: a “text” variant that can hide text.
Is this intentionally?

sarahbrng · 2026-03-05T13:14:31Z

packages/components/docs/how-to-figma-connect.md

+
+### 2.1 Add `FIGMA_FILE` inside `.env`
+
+When coping a link to a component you get the path for the figma file including the branch.


sarahbrng · 2026-03-05T13:15:13Z

packages/components/docs/how-to-figma-connect.md

+`npm run generate:figma --workspace=@db-ux/core-components`
+
+Next you can look at e.g. `figma-code-connect/react-figma`.
+The generates files should be inside `src` folder.


sarahbrng · 2026-03-05T13:16:11Z

packages/components/docs/how-to-figma-connect.md

+	urls: ["https://www.figma.com/design/FIGMA_FILE?node-id=..."],
+	props
+};
+```


Explicitly show expected node-id format and example full URL used in urls

sarahbrng · 2026-03-05T13:17:28Z

packages/components/docs/how-to-figma-connect.md

+When coping a link to a component you get the path for the figma file including the branch.
+
+You need to add this as `FIGMA_FILE=xxx/testing-branch` to `.env` see [.env.template](/.env.template) as reference.
+


Suggestion:
SECURITY NOTE: Never commit .env files or personal access tokens.

sarahbrng · 2026-03-05T13:18:31Z

packages/components/docs/how-to-figma-connect.md

+Next you need to create a new environment file like `figma-code-connect/react-figma/.env`.
+
+Add the token to the file `FIGMA_ACCESS_TOKEN="figd-XXX"`.
+


Suggestion:
SECURITY NOTE: Keep this token local/secret and do not commit it.

sarahbrng · 2026-03-05T13:25:02Z

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

+
+      - name: 🔨 Generate Figma Code Connect
+        env:
+          FIGMA_FILE: ${{ github.event_name == 'pull_request' && vars.FIGMA_FILE_DEV || vars.FIGMA_FILE_MAIN }}


Inside workflow_call, github.event_name is workflow_call, not pull_request, so this expression always resolves to vars.FIGMA_FILE_MAIN.

feat: add figma code connect

1ecab80

github-project-automation bot added this to UX Engineering Team Backlog Jan 28, 2026

github-project-automation bot moved this to 🏗 In progress in UX Engineering Team Backlog Jan 28, 2026

github-actions bot assigned nmerget Jan 28, 2026

github-actions bot added 🚢📀cicd Changes inside .github folder 🏘components labels Jan 28, 2026

nmerget added 3 commits January 28, 2026 09:46

chore: update snapshots for figma

fe35ff5

chore: update workflow for figma code connect

adc0e94

fix: issue with workflow

3c9d996

nmerget marked this pull request as ready for review January 28, 2026 15:17

nmerget moved this from 🏗 In progress to 🎁 Ready for review in UX Engineering Team Backlog Jan 28, 2026

nmerget moved this from 🎁 Ready for review to 🏗 In progress in UX Engineering Team Backlog Jan 28, 2026

nmerget marked this pull request as draft January 28, 2026 15:19

chore: add how to for figma-connect

5c60693

github-actions bot added 📕documentation Improvements or additions to documentation 🛠️configuration labels Jan 28, 2026

nmerget moved this from 🏗 In progress to 🎁 Ready for review in UX Engineering Team Backlog Jan 28, 2026

nmerget marked this pull request as ready for review January 28, 2026 16:12

mfranzke requested a review from Copilot February 26, 2026 19:37

Copilot started reviewing on behalf of mfranzke February 26, 2026 19:38 View session

Copilot AI reviewed Feb 26, 2026

View reviewed changes

.github/workflows/default.yml Show resolved Hide resolved

packages/components/configs/plugins/figma/index.cjs Show resolved Hide resolved

packages/components/docs/how-to-figma-connect.md Outdated Show resolved Hide resolved

.github/workflows/default.yml Show resolved Hide resolved

nmerget added 2 commits March 4, 2026 10:11

fix: issues from PR

497b70f

Merge remote-tracking branch 'origin/main' into feat-code-connect

9258649

# Conflicts: # .config/cspellignorewords.txt # package-lock.json # package.json

sarahbrng moved this from 🎁 Ready for review to 👀 Actively In Review in UX Engineering Team Backlog Mar 4, 2026

sarahbrng reviewed Mar 5, 2026

View reviewed changes

sarahbrng moved this from 👀 Actively In Review to 🎶 Waiting for feedback in UX Engineering Team Backlog Mar 5, 2026

mfranzke added this to the 4.6.0 milestone Mar 6, 2026

mfranzke added this to Roadmap Mar 6, 2026


		### 2.1 Add `FIGMA_FILE` inside `.env`

		When coping a link to a component you get the path for the figma file including the branch.

		When coping a link to a component you get the path for the figma file including the branch.

		You need to add this as `FIGMA_FILE=xxx/testing-branch` to `.env` see [.env.template](/.env.template) as reference.

		Next you need to create a new environment file like `figma-code-connect/react-figma/.env`.

		Add the token to the file `FIGMA_ACCESS_TOKEN="figd-XXX"`.

Conversation

nmerget commented Jan 28, 2026 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Types of changes

Further comments

Uh oh!

changeset-bot bot commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sarahbrng left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

nmerget commented Jan 28, 2026 •

edited by github-actions bot

Loading

changeset-bot bot commented Jan 28, 2026 •

edited

Loading