Integrating Figma code connect + mapping first 10 components by LokmaneKrizou · Pull Request #2369 · Skyscanner/backpack-android

Lokmane Krizou (LokmaneKrizou) · 2025-08-04T08:54:11Z

This pull request introduces integration with Figma Code Connect for several Backpack Compose components, enabling automated documentation and validation workflows. It adds Figma Code Connect configuration, updates CI/CD workflows to support Figma-related checks and publishing, and implements .figma.kt files for multiple UI components. The changes are grouped into build system/workflow updates and new component documentation files.

Build System and Workflow Integration:

Added Figma Code Connect plugin and dependency to the project via app/build.gradle to enable Figma integration. [1] [2]
Updated .detekt-compose.yml to exclude .figma.kt files from the ModifierMissing rule, preventing unnecessary linting errors.
Enhanced the _build.yml, pr.yml, and release.yml GitHub Actions workflows to support Figma Code Connect:
- Added support for a figma_enabled input and FIGMA_ACCESS_TOKEN secret.
- Implemented steps to detect changes in Figma-related files, install Figma Code Connect, and validate or publish Code Connect files as needed during PRs and releases. [1] [2] [3] [4] [5] [6]

Component Documentation and Figma Integration:

Introduced .figma.kt files for several Backpack Compose components, each annotated for Figma Code Connect. These files provide Figma-compatible documentation and mapping for properties and variants:
- BpkButton with multiple icon and style variants.
- BpkCard and BpkCardWrapper. [1] [2]
- BpkCarousel.
- BpkDividedCard.
- BpkDivider.
- BpkGraphicPromo with overlay, kicker, sponsor, and alignment properties.
- BpkLink with text and style mapping.

Check this if you have read and followed the contributing guidelines

Remember to include the following changes:

Component README.md
Tests

If you are curious about how we review, please read through the code review guidelines

Copilot

Pull Request Overview

This PR introduces Figma Code Connect integration for Backpack Android components to bridge the gap between design and development. The integration enables automatic generation of accurate code snippets from Figma designs, improving the design-to-development handoff process.

Updates Kotlin version from 2.1.20 to 2.0.0 for Figma Code Connect compatibility
Adds comprehensive documentation for Figma Code Connect integration
Implements Code Connect annotations for BpkButton, BpkText, and BpkCard components

Reviewed Changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`gradle/libs.versions.toml`	Updates Kotlin/KSP versions and adds Figma Code Connect dependencies
`figma.config.json`	Configures Figma Code Connect parser settings for Compose
`figma-code-connect/*.md`	Comprehensive documentation covering setup, integration, examples, and best practices
`backpack-compose/src/main/kotlin/*/BpkTextCodeConnect.kt`	Implements 18 typography variant classes for text component
`backpack-compose/src/main/kotlin/*/BpkCardCodeConnect.kt`	Basic card component integration example
`backpack-compose/src/main/kotlin/*/BpkButtonCodeConnect.kt`	Four button variants (None, Left, Right, Icon only) with comprehensive property mapping
`backpack-compose/build.gradle`	Adds Figma Code Connect plugin and dependency

Comments suppressed due to low confidence (1)

gradle/libs.versions.toml:2

Kotlin version 2.0.0 is an older version that has known issues and has been superseded by more stable releases. Consider using a more recent stable version like 2.1.20 or the latest stable release.

kotlin = "2.0.0"

backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/card/BpkCard.figma.kt

app/src/main/java/net/skyscanner/backpack/demo/figma/button/BpkButton.figma.kt

skyscanner-backpack-bot · 2025-08-05T16:56:10Z

	Warnings
⚠️	One or more component files were updated, but the tests weren't updated. If your change is not covered by existing tests please add snapshot tests.
⚠️	One or more component files were updated, but the docs screenshots weren't updated. If the changes are visual or it is a new component please regenerate the screenshots via `./gradlew recordScreenshots`.
⚠️	One or more component files were updated, but `README.md` wasn't updated. If your change contains API changes/additions or a new component please update the relevant component README.
⚠️	One or more package files were created, but `BpkComposeComponentUsageDetector.kt` wasn't updated. If your component is an equivalent of a core component please add it to the detector.

Generated by 🚫 Danger Kotlin against d37edc1

skyscanner-backpack-bot · 2025-08-06T11:45:20Z

	Warnings
⚠️	One or more component files were updated, but the tests weren't updated. If your change is not covered by existing tests please add snapshot tests.
⚠️	One or more component files were updated, but the docs screenshots weren't updated. If the changes are visual or it is a new component please regenerate the screenshots via `./gradlew recordScreenshots`.
⚠️	One or more component files were updated, but `README.md` wasn't updated. If your change contains API changes/additions or a new component please update the relevant component README.
⚠️	One or more package files were created, but `BpkComposeComponentUsageDetector.kt` wasn't updated. If your component is an equivalent of a core component please add it to the detector.

Generated by 🚫 Danger Kotlin against 7036a5b

skyscanner-backpack-bot · 2025-08-06T11:51:24Z

	Warnings
⚠️	One or more component files were updated, but the tests weren't updated. If your change is not covered by existing tests please add snapshot tests.
⚠️	One or more component files were updated, but the docs screenshots weren't updated. If the changes are visual or it is a new component please regenerate the screenshots via `./gradlew recordScreenshots`.
⚠️	One or more component files were updated, but `README.md` wasn't updated. If your change contains API changes/additions or a new component please update the relevant component README.
⚠️	One or more package files were created, but `BpkComposeComponentUsageDetector.kt` wasn't updated. If your component is an equivalent of a core component please add it to the detector.

Generated by 🚫 Danger Kotlin against e269d9f

skyscanner-backpack-bot · 2025-09-24T17:52:57Z

	Warnings
⚠️	One or more component files were updated, but the tests weren't updated. If your change is not covered by existing tests please add snapshot tests.
⚠️	One or more component files were updated, but the docs screenshots weren't updated. If the changes are visual or it is a new component please regenerate the screenshots via `./gradlew recordScreenshots`.
⚠️	One or more component files were updated, but `README.md` wasn't updated. If your change contains API changes/additions or a new component please update the relevant component README.
⚠️	One or more package files were created, but `BpkComposeComponentUsageDetector.kt` wasn't updated. If your component is an equivalent of a core component please add it to the detector.

Generated by 🚫 Danger Kotlin against 1034659

skyscanner-backpack-bot · 2025-09-24T18:15:53Z

	Warnings
⚠️	One or more component files were updated, but the tests weren't updated. If your change is not covered by existing tests please add snapshot tests.
⚠️	One or more component files were updated, but the docs screenshots weren't updated. If the changes are visual or it is a new component please regenerate the screenshots via `./gradlew recordScreenshots`.
⚠️	One or more component files were updated, but `README.md` wasn't updated. If your change contains API changes/additions or a new component please update the relevant component README.
⚠️	One or more package files were created, but `BpkComposeComponentUsageDetector.kt` wasn't updated. If your component is an equivalent of a core component please add it to the detector.

Generated by 🚫 Danger Kotlin against 4b50e3b

skyscanner-backpack-bot · 2025-09-24T18:44:30Z

	Warnings
⚠️	One or more component files were updated, but the tests weren't updated. If your change is not covered by existing tests please add snapshot tests.
⚠️	One or more component files were updated, but the docs screenshots weren't updated. If the changes are visual or it is a new component please regenerate the screenshots via `./gradlew recordScreenshots`.
⚠️	One or more component files were updated, but `README.md` wasn't updated. If your change contains API changes/additions or a new component please update the relevant component README.
⚠️	One or more package files were created, but `BpkComposeComponentUsageDetector.kt` wasn't updated. If your component is an equivalent of a core component please add it to the detector.

Generated by 🚫 Danger Kotlin against fa89564

skyscanner-backpack-bot · 2025-09-24T19:20:48Z

	Warnings
⚠️	One or more component files were updated, but the tests weren't updated. If your change is not covered by existing tests please add snapshot tests.
⚠️	One or more component files were updated, but the docs screenshots weren't updated. If the changes are visual or it is a new component please regenerate the screenshots via `./gradlew recordScreenshots`.
⚠️	One or more component files were updated, but `README.md` wasn't updated. If your change contains API changes/additions or a new component please update the relevant component README.
⚠️	One or more package files were created, but `BpkComposeComponentUsageDetector.kt` wasn't updated. If your component is an equivalent of a core component please add it to the detector.

Generated by 🚫 Danger Kotlin against 2496c15

skyscanner-backpack-bot · 2025-09-26T07:56:05Z

	Warnings
⚠️	One or more component files were updated, but the tests weren't updated. If your change is not covered by existing tests please add snapshot tests.
⚠️	One or more component files were updated, but the docs screenshots weren't updated. If the changes are visual or it is a new component please regenerate the screenshots via `./gradlew recordScreenshots`.
⚠️	One or more component files were updated, but `README.md` wasn't updated. If your change contains API changes/additions or a new component please update the relevant component README.
⚠️	One or more package files were created, but `BpkComposeComponentUsageDetector.kt` wasn't updated. If your component is an equivalent of a core component please add it to the detector.

Generated by 🚫 Danger Kotlin against 20cd6ec

Co-authored-by: Copilot <Copilot@github.com>

…t components

Co-authored-by: Claude <noreply@anthropic.com>

Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Copilot <Copilot@github.com>

skyscanner-backpack-bot · 2025-12-09T14:48:18Z

	Fails
🚫	These new files do not include the license heading: app/src/main/java/net/skyscanner/backpack/demo/figma/button/BpkButton.figma.kt, app/src/main/java/net/skyscanner/backpack/demo/figma/cardwrapper/BpkCardWrapper.figma.kt, app/src/main/java/net/skyscanner/backpack/demo/figma/carousel/BpkCarousel.figma.kt, app/src/main/java/net/skyscanner/backpack/demo/figma/dividedcard/BpkDividedCard.figma.kt, app/src/main/java/net/skyscanner/backpack/demo/figma/divider/BpkDivider.figma.kt, app/src/main/java/net/skyscanner/backpack/demo/figma/graphicpromo/BpkGraphicPromo.figma.kt, app/src/main/java/net/skyscanner/backpack/demo/figma/link/BpkLink.figma.kt, app/src/main/java/net/skyscanner/backpack/demo/figma/panel/BpkPanel.figma.kt, app/src/main/java/net/skyscanner/backpack/demo/figma/savebutton/BpkSaveButton.figma.kt, app/src/main/java/net/skyscanner/backpack/demo/figma/sharebutton/BpkShareButton.figma.kt

Generated by 🚫 Danger Kotlin against 1e19046

Lokmane Krizou (LokmaneKrizou) · 2025-12-09T14:49:42Z

.detekt-compose.yml

    active: true
  ModifierMissing:
    active: true
+    excludes: ['**/*.figma.kt']


those compostables are place holders to display snippet code in figma

compost 😆

.github/workflows/_build.yml

Henrik Sym (henrik-sky) · 2025-12-10T10:27:09Z

.github/workflows/_build.yml

    secrets:
      GH_APP_PRIVATE_KEY:
        required: true
+      FIGMA_ACCESS_TOKEN:


Has this been added to the secrets? Who owns it?

its in the backpack android Github secretes yes

Yes but whose figma account generated it?

Henrik Sym (henrik-sky) · 2025-12-10T10:32:34Z

app/src/main/java/net/skyscanner/backpack/demo/figma/button/BpkButton.figma.kt

+
+    @FigmaProperty(FigmaType.Enum, "Style")
+    val type: BpkButtonType = Figma.mapping(
+        "Primary" to BpkButtonType.Primary,


I feel like we're missing a single source of truth for this, would that be something Supernova could do?

Henrik Sym (henrik-sky) · 2025-12-10T10:38:21Z

figma.config.json

+            "app/src/main/java/net/skyscanner/backpack/demo/figma/**/*.figma.kt"
+        ],
+        "documentUrlSubstitutions": {
+            "FIGMA_BUTTON": "https://www.figma.com/design/KXf2gHNLDe2cXWUoHl4cTX/Backpack%E2%80%A8Foundations---Components?node-id=10858-8677",


This doesn't look fragile at all! 🙀

Lokmane Krizou (LokmaneKrizou) · 2026-01-12T13:34:00Z

Closing this as we need to have proper setup for Figma integration other than using personal Key

Lokmane Krizou (LokmaneKrizou) self-assigned this Aug 4, 2025

Copilot AI review requested due to automatic review settings August 4, 2025 08:54

Lokmane Krizou (LokmaneKrizou) added the DON'T MERGE label Aug 4, 2025

Lokmane Krizou (LokmaneKrizou) changed the title ~~Figma code connect~~ PoC Figma code connect Aug 4, 2025

Copilot AI reviewed Aug 4, 2025

View reviewed changes

Lokmane Krizou (LokmaneKrizou) force-pushed the donburi/figma_connect branch from 27c1d40 to d37edc1 Compare August 5, 2025 16:54

Lokmane Krizou (LokmaneKrizou) added the minor A new & backwards compatible feature/component label Aug 5, 2025

Lokmane Krizou (LokmaneKrizou) closed this Sep 1, 2025

Lokmane Krizou (LokmaneKrizou) reopened this Sep 24, 2025

Lokmane Krizou (LokmaneKrizou) force-pushed the donburi/figma_connect branch from e269d9f to 1034659 Compare September 24, 2025 17:51

Lokmane Krizou (LokmaneKrizou) removed the DON'T MERGE label Dec 8, 2025

krizoulokmane and others added 11 commits December 8, 2025 15:38

figma code connect

c5a047b

Co-authored-by: Copilot <Copilot@github.com>

upgrade to kotlin 2.2

c8f647c

Update file naming conventions for Figma Code Connect integration

3efed85

Add Figma Code Connect integration for BpkButton, BpkCard, and BpkTex…

de1316f

…t components

Add CI/CD integration for Figma Code Connect validation and publishing

947015e

Co-authored-by: Claude <noreply@anthropic.com>

Refactor Figma Code Connect commands to use updated syntax

83b4e5d

Co-authored-by: Claude <noreply@anthropic.com>

test publish

7bd7a63

Co-authored-by: Claude <noreply@anthropic.com>

add dependency

cdfd4b8

Co-authored-by: Claude <noreply@anthropic.com>

add dependency

db367e4

Co-authored-by: Claude <noreply@anthropic.com>

add dependency

e2a976c

Co-authored-by: Claude <noreply@anthropic.com>

update position of figma files

3e0f565

Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Copilot <Copilot@github.com>

Update Backpack Card node link

d7dc382

Lokmane Krizou (LokmaneKrizou) force-pushed the donburi/figma_connect branch from c685eab to d7dc382 Compare December 8, 2025 15:46

skyscanner-backpack-bot bot added the ai: copilot used to indicate involvement of copilot in writing code in this PR label Dec 8, 2025

krizoulokmane added 2 commits December 8, 2025 23:03

Refactor Figma Code Connect integration and update configuration

30bf96e

add reminder of components

1e19046

Lokmane Krizou (LokmaneKrizou) commented Dec 9, 2025

View reviewed changes

Lokmane Krizou (LokmaneKrizou) changed the title ~~PoC Figma code connect~~ Integrating Figma code connect + mapping first 10 components Dec 9, 2025

krizoulokmane and others added 3 commits December 9, 2025 14:52

add reminder of components

8f69aff

Merge branch 'main' into donburi/figma_connect

3cdd55d

Lokmane Krizou (LokmaneKrizou) added the ai: claude label Dec 9, 2025

fix screenshott testing failure

e6d8ae2

Henrik Sym (henrik-sky) reviewed Dec 10, 2025

View reviewed changes

.github/workflows/_build.yml Outdated Show resolved Hide resolved

Henrik Sym (henrik-sky) reviewed Dec 10, 2025

View reviewed changes

krizoulokmane and others added 4 commits December 11, 2025 13:25

fix ci and add chip group and cardlist

f863118

Merge branch 'main' into donburi/figma_connect

78e1494

use most up to date version

4a60a41

rename

b5280a3

Lokmane Krizou (LokmaneKrizou) closed this Jan 12, 2026

Conversation

Lokmane Krizou (LokmaneKrizou) commented Aug 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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!

skyscanner-backpack-bot bot commented Aug 5, 2025

Uh oh!

skyscanner-backpack-bot bot commented Aug 6, 2025

Uh oh!

skyscanner-backpack-bot bot commented Aug 6, 2025

Uh oh!

skyscanner-backpack-bot bot commented Sep 24, 2025

Uh oh!

skyscanner-backpack-bot bot commented Sep 24, 2025

Uh oh!

skyscanner-backpack-bot bot commented Sep 24, 2025

Uh oh!

skyscanner-backpack-bot bot commented Sep 24, 2025

Uh oh!

skyscanner-backpack-bot bot commented Sep 26, 2025

Uh oh!

skyscanner-backpack-bot bot commented Dec 9, 2025

Uh oh!

Lokmane Krizou (LokmaneKrizou) Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Henrik Sym (henrik-sky) Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Henrik Sym (henrik-sky) Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Lokmane Krizou (LokmaneKrizou) Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Henrik Sym (henrik-sky) Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Henrik Sym (henrik-sky) Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Henrik Sym (henrik-sky) Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Lokmane Krizou (LokmaneKrizou) commented Jan 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Lokmane Krizou (LokmaneKrizou) commented Aug 4, 2025 •

edited

Loading