Skip to content

Figma code connect #3921

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 39 commits into from
Sep 5, 2025
Merged

Figma code connect #3921

merged 39 commits into from
Sep 5, 2025

Conversation

gert-janvercauteren
Copy link
Contributor

@gert-janvercauteren gert-janvercauteren commented Aug 26, 2025 •
edited
Loading

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:
  • Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [Clover-123][BpkButton] Updating the colour
  • README.md (If you have created a new component)
  • Component README.md
  • Tests
  • Accessibility tests
    • The following checks were performed:
      • Ability to navigate using a keyboard only
      • Zoom functionality (Deque University explanation):
        • The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
        • Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
      • Ability to navigate using a screen reader only
  • Storybook examples created/updated
  • For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

Supremeyh and others added 9 commits July 17, 2025 19:11
@Supremeyh
[NO JIRA] Upgrade foundations dependecies
dfb762a
@Supremeyh
[CLOVER-450] Constraint for BpkText color prop
4cd0953
@Supremeyh
Merge branch 'main' into ez/clover-450_bump_foundations
44d74e8
@Supremeyh
add JSDoc comment
2497b07
@gert-janvercauteren
feat: trial code connect for Figma MCP
b0cba0c
@gert-janvercauteren
Merge branch 'main' into feature/mcp-code-connect
0eccc7b 
* 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)
@gert-janvercauteren
feat: add BpkCard, but based on local tests to showcase
057479c
@gert-janvercauteren
Merge branch 'main' into feature/mcp-code-connect
4d5fd0f 
* 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
@gert-janvercauteren
feat: setup badge
6af8206
@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

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 Copilot AI review requested due to automatic review settings September 3, 2025 12:27
Copilot
Copilot AI reviewed Sep 3, 2025
View reviewed changes
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@floracheng292
Copy link
Contributor

Hi @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.
image

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@gert-janvercauteren gert-janvercauteren merged commit 0e4df68 into main Sep 5, 2025
11 checks passed
@gert-janvercauteren gert-janvercauteren deleted the feature/mcp-code-connect branch September 5, 2025 03:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

Copilot code review Copilot Copilot left review comments

@floracheng292 floracheng292 floracheng292 approved these changes

Assignees
No one assigned
Labels
skip-changelog
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@gert-janvercauteren @floracheng292 @Supremeyh