Figma code connect #3921

Gert-Jan Vercauteren (gert-janvercauteren) · 2025-08-26T05:56:47Z

This pull request introduces Figma Code Connect integration to the project, enabling synchronization between Figma designs and React components. The main changes include adding configuration and workflow files for Code Connect, installing the required dependency, and connecting two components (BpkBadge and BpkButtonV2) to their respective Figma design files.

Figma Code Connect Integration

Added a new GitHub Actions workflow (.github/workflows/sync-figma-code-connect.yml) to automatically run Code Connect on pushes and pull requests affecting .figma.tsx files in the main branch.
Added and configured figma.config.json to specify which files to include, set the label to "React", and link the interactive Figma file for setup.
Installed the @figma/code-connect package as a dev dependency in package.json.

Component Figma Connections

Created BpkBadge.figma.tsx to connect the BpkBadge component to its Figma design, mapping badge styles to Figma variants.
Created BpkButton.figma.tsx for BpkButtonV2, connecting it to its Figma design and mapping button styles, sizes, states, and icon configurations.
Remember to include the following changes:

* main: [QUAR-991] [BpkInsetBannerSponsored] Add closeOnScrimClick prop to BpkBottomSheet (#3891) Revert "[BD-9759][BpkPopover] Add close button beside body (#3883)" (#3894) optimize cardlist style (#3893) [CLOV-402][BpkCardList] Fix cardlist initially shown cards change issue (#3892)

* main: Bump actions/download-artifact in the artifacts-actions group (#3907) Bump actions/checkout from 4 to 5 (#3913) Fix closeText style of BpkModal in dark mode (#3919) Bump the babel group across 1 directory with 5 updates (#3917) Bump @babel/runtime in the npm_and_yarn group across 1 directory (#3884) Bump actions/cache from 4.2.3 to 4.2.4 (#3905) Bump webpack from 5.99.8 to 5.101.2 (#3916) QUAR-1046 Fix CTA Button Alignment, Logo Sizing, and Logo Vertical Alignment in Inset Banner (#3912) chore: removed duplicate aria-label (#3911) [CAPY-1594][BpkNavigationTabGroup/BpkBubble] Create and integrate 'new' bubble tooltip in navigation tab bar (#3909) [CLOV-381][BpkBreakpoint] update bpk breakpoint readme (#3910) [CYB-3904][BpkGraphicPromo] Render wrapper as semantic anchor tag to improve SEO (#3904) [CLOVER-532][BpkText] Add BpkText color prop with leverage css classname (#3900) fix: A11y and icon issue for inset banner sponsored (#3901) # Conflicts: # packages/bpk-component-text/README.md # packages/bpk-component-text/src/BpkText-test.tsx # packages/bpk-component-text/src/BpkText.tsx

skyscanner-backpack-bot · 2025-08-26T06:02:38Z

Visit https://backpack.github.io/storybook-prs/3921 to see this build running in a browser.

skyscanner-backpack-bot · 2025-08-26T06:18:41Z

Visit https://backpack.github.io/storybook-prs/3921 to see this build running in a browser.

skyscanner-backpack-bot · 2025-08-26T06:35:37Z

Visit https://backpack.github.io/storybook-prs/3921 to see this build running in a browser.

skyscanner-backpack-bot · 2025-08-26T06:37:46Z

Visit https://backpack.github.io/storybook-prs/3921 to see this build running in a browser.

skyscanner-backpack-bot · 2025-08-26T06:41:44Z

Visit https://backpack.github.io/storybook-prs/3921 to see this build running in a browser.

skyscanner-backpack-bot · 2025-08-26T06:52:23Z

Visit https://backpack.github.io/storybook-prs/3921 to see this build running in a browser.

skyscanner-backpack-bot · 2025-08-26T06:56:36Z

Visit https://backpack.github.io/storybook-prs/3921 to see this build running in a browser.

skyscanner-backpack-bot · 2025-08-26T08:16:37Z

Visit https://backpack.github.io/storybook-prs/3921 to see this build running in a browser.

skyscanner-backpack-bot · 2025-08-26T08:18:19Z

	Warnings
⚠️	Package source files (e.g. `packages/package-name/src/Component.js`) were updated, but snapshots weren't. Have you checked that the tests still pass?

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against 6e4d9df

Copilot

Pull Request Overview

This PR introduces Figma Code Connect integration to synchronize Figma designs with React components. It adds the necessary configuration, workflow automation, and connects four components to their Figma counterparts.

Adds GitHub Actions workflow to automatically sync Code Connect files
Configures Figma Code Connect with project settings and file patterns
Creates Code Connect mappings for BpkBadge, BpkButtonV2, BpkPrice, and BpkImage components

Reviewed Changes

Copilot reviewed 7 out of 9 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
package.json	Adds @figma/code-connect dev dependency
figma.config.json	Configures Code Connect settings and file inclusion patterns
.github/workflows/sync-figma-code-connect.yml	Sets up automated workflow for syncing Code Connect on file changes
packages/bpk-component-badge/src/BpkBadge.figma.tsx	Maps BpkBadge component styles to Figma variants
packages/bpk-component-button/src/BpkButtonV2/BpkButton.figma.tsx	Maps BpkButtonV2 component properties to Figma design variants
packages/bpk-component-price/src/BpkPrice.figma.tsx	Maps BpkPrice component size and alignment properties to Figma
packages/bpk-component-image/src/BpkImage.figma.tsx	Basic Code Connect mapping for BpkImage component

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

packages/bpk-component-button/src/BpkButtonV2/BpkButton.figma.tsx

skyscanner-backpack-bot · 2025-09-03T12:30:22Z

Visit https://backpack.github.io/storybook-prs/3921 to see this build running in a browser.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

skyscanner-backpack-bot · 2025-09-03T12:49:47Z

Visit https://backpack.github.io/storybook-prs/3921 to see this build running in a browser.

skyscanner-backpack-bot · 2025-09-04T03:15:02Z

Visit https://backpack.github.io/storybook-prs/3921 to see this build running in a browser.

skyscanner-backpack-bot · 2025-09-04T06:51:22Z

Visit https://backpack.github.io/storybook-prs/3921 to see this build running in a browser.

skyscanner-backpack-bot · 2025-09-04T07:08:40Z

Visit https://backpack.github.io/storybook-prs/3921 to see this build running in a browser.

skyscanner-backpack-bot · 2025-09-04T08:31:34Z

Visit https://backpack.github.io/storybook-prs/3921 to see this build running in a browser.

Flora Cheng (floracheng292) · 2025-09-04T09:15:32Z

Hi Gert-Jan Vercauteren (@gert-janvercauteren) , Great work, I can’t wait to see how it’s going! However, when I transpiled locally, it failed. Perhaps we should also exclude packages/**/*.figma.tsx in tsconfig.declaration.json. I’m not sure why the transpile command hasn’t been added to the CI.

skyscanner-backpack-bot · 2025-09-04T09:20:56Z

Visit https://backpack.github.io/storybook-prs/3921 to see this build running in a browser.

skyscanner-backpack-bot · 2025-09-04T11:47:37Z

Visit https://backpack.github.io/storybook-prs/3921 to see this build running in a browser.

skyscanner-backpack-bot · 2025-09-05T02:39:35Z

Visit https://backpack.github.io/storybook-prs/3921 to see this build running in a browser.

skyscanner-backpack-bot · 2025-09-05T03:33:37Z

Visit https://backpack.github.io/storybook-prs/3921 to see this build running in a browser.

Ezreal Yang (Supremeyh) and others added 9 commits July 17, 2025 19:11

[NO JIRA] Upgrade foundations dependecies

dfb762a

[CLOVER-450] Constraint for BpkText color prop

4cd0953

Merge branch 'main' into ez/clover-450_bump_foundations

44d74e8

add JSDoc comment

2497b07

feat: trial code connect for Figma MCP

b0cba0c

feat: add BpkCard, but based on local tests to showcase

057479c

feat: setup badge

6af8206

Gert-Jan Vercauteren (gert-janvercauteren) added 2 commits August 26, 2025 14:09

chore: remove unconfigured code connect

60086e3

chore: remove card wrapper mapping

4381449

Gert-Jan Vercauteren (gert-janvercauteren) added the skip-changelog label Aug 26, 2025

chore: clean up samples

12caf9a

feat: add workflow

a6ba150

feat: try code connect on CI

ea8ccfd

fix: setup node

41c74d8

Gert-Jan Vercauteren (gert-janvercauteren) added 2 commits August 26, 2025 14:48

chore: adjust workflow

617ae62

fix: just install what we need

0286469

Gert-Jan Vercauteren (gert-janvercauteren) added 2 commits August 26, 2025 14:53

chore: adjust workflow

7a5b2f5

fix: can't rely on cache

93ecc75

fix: lint issues

0823dd3

Copilot AI review requested due to automatic review settings September 3, 2025 12:27

Copilot AI reviewed Sep 3, 2025

View reviewed changes

packages/bpk-component-button/src/BpkButtonV2/BpkButton.figma.tsx Outdated Show resolved Hide resolved

Gert-Jan Vercauteren (gert-janvercauteren) and others added 5 commits September 3, 2025 20:39

chore: revert and test figma run

01c9cbb

chore: revert back

04eb0b1

chore: adjust run trigger for figma workflow

f6768f6

feat: only run on push to main

d06302e

Apply suggestion from @Copilot

b0c5079

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

chore: ignore Figma files for typechecking

cf6051c

fix: linting issues

e675307

fix: copyright heading

bde37ba

chore: add .env to gitignore so we don't leak Figma code connect tokens

00d3ea6

fix: exclude figma files

21c0dcb

Gert-Jan Vercauteren (gert-janvercauteren) closed this Sep 4, 2025

Gert-Jan Vercauteren (gert-janvercauteren) reopened this Sep 4, 2025

fix: set up proper exclude for figma connect files

76a70f0

chore: add figma exclusion to babel

6e4d9df

floracheng292 approved these changes Sep 5, 2025

View reviewed changes

Gert-Jan Vercauteren (gert-janvercauteren) merged commit 0e4df68 into main Sep 5, 2025
11 checks passed

Gert-Jan Vercauteren (gert-janvercauteren) deleted the feature/mcp-code-connect branch September 5, 2025 03:53

Figma code connect #3921

Figma code connect #3921

Uh oh!

Conversation

Gert-Jan Vercauteren (gert-janvercauteren) commented Aug 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

skyscanner-backpack-bot bot commented Aug 26, 2025

Uh oh!

skyscanner-backpack-bot bot commented Aug 26, 2025

Uh oh!

skyscanner-backpack-bot bot commented Aug 26, 2025

Uh oh!

skyscanner-backpack-bot bot commented Aug 26, 2025

Uh oh!

skyscanner-backpack-bot bot commented Aug 26, 2025

Uh oh!

skyscanner-backpack-bot bot commented Aug 26, 2025

Uh oh!

skyscanner-backpack-bot bot commented Aug 26, 2025

Uh oh!

skyscanner-backpack-bot bot commented Aug 26, 2025

Uh oh!

skyscanner-backpack-bot bot commented Aug 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Browser support

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

skyscanner-backpack-bot bot commented Sep 3, 2025

Uh oh!

skyscanner-backpack-bot bot commented Sep 3, 2025

Uh oh!

skyscanner-backpack-bot bot commented Sep 4, 2025

Uh oh!

skyscanner-backpack-bot bot commented Sep 4, 2025

Uh oh!

skyscanner-backpack-bot bot commented Sep 4, 2025

Uh oh!

skyscanner-backpack-bot bot commented Sep 4, 2025

Uh oh!

Flora Cheng (floracheng292) commented Sep 4, 2025

Uh oh!

skyscanner-backpack-bot bot commented Sep 4, 2025

Uh oh!

skyscanner-backpack-bot bot commented Sep 4, 2025

Uh oh!

skyscanner-backpack-bot bot commented Sep 5, 2025

Uh oh!

skyscanner-backpack-bot bot commented Sep 5, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Gert-Jan Vercauteren (gert-janvercauteren) commented Aug 26, 2025 •

edited

Loading

skyscanner-backpack-bot bot commented Aug 26, 2025 •

edited

Loading