Integrating Figma code connect + mapping first 10 components

.detekt-compose.yml

@@ -9,6 +9,7 @@ Compose:
     active: true
   ModifierMissing:
     active: true
+    excludes: ['**/*.figma.kt']
   ModifierNaming:
     active: true
   ModifierNotUsedAtRoot:

.github/workflows/_build.yml

@@ -2,9 +2,16 @@ name: Build
 
 on:
   workflow_call:
+    inputs:
+      figma_enabled:
+        required: false
+        type: boolean
+        default: false
     secrets:
       GH_APP_PRIVATE_KEY:
         required: true
+      FIGMA_ACCESS_TOKEN:
+        required: false
 
 
 defaults:
@@ -105,6 +112,31 @@ jobs:
       - name: Unit Tests
         run: ./gradlew test${{ env.flavour }}${{ env.config }}UnitTest -PdisablePreDex
 
+      - name: Check for Code Connect changes
+        id: code-connect-filter
+        if: ${{ inputs.figma_enabled }}
+        uses: dorny/paths-filter@v3
+        with:
+          filters: |
+            code_connect:
+              - 'app/src/main/java/net/skyscanner/backpack/demo/figma/**'
+              - 'figma.config.json'
+
+      - name: Install Figma Code Connect
+        if: ${{ inputs.figma_enabled && steps.code-connect-filter.outputs.code_connect == 'true' }}
+        continue-on-error: true
+        run: npm install -g @figma/code-connect@1.3.5
+
+      - name: Validate Code Connect files
+        if: ${{ inputs.figma_enabled && steps.code-connect-filter.outputs.code_connect == 'true' }}
+        continue-on-error: true
+        run: |
+          echo "🔍 Found Code Connect files, validating..."
+          npx figma connect parse
+          npx figma connect publish --dry-run
+        env:
+          FIGMA_ACCESS_TOKEN: ${{ secrets.FIGMA_ACCESS_TOKEN }}
+
   Android:
     name: Android tests
     runs-on: ubuntu-24.04-16cores-public

.github/workflows/pr.yml

@@ -21,8 +21,11 @@ jobs:
       pull-requests: write
       contents: write
     uses: ./.github/workflows/_build.yml
+    with:
+      figma_enabled: true
     secrets:
       GH_APP_PRIVATE_KEY: ${{ secrets.GH_APP_PRIVATE_KEY }}
+      FIGMA_ACCESS_TOKEN: ${{ secrets.FIGMA_ACCESS_TOKEN }}
 
   Dependabot:
     runs-on: ubuntu-24.04-16cores-public

.github/workflows/release.yml

@@ -20,8 +20,11 @@ jobs:
       pull-requests: write
       contents: write
     uses: ./.github/workflows/_build.yml
+    with:
+      figma_enabled: true
     secrets:
       GH_APP_PRIVATE_KEY: ${{ secrets.GH_APP_PRIVATE_KEY }}
+      FIGMA_ACCESS_TOKEN: ${{ secrets.FIGMA_ACCESS_TOKEN }}
 
   Deploy:
     name: Deploy
@@ -81,6 +84,38 @@ jobs:
       - name: Update Supernova docs
         run: npx @supernovaio/cli publish-documentation --apiKey=${{ secrets.SUPERNOVA_API_KEY }} --designSystemId=${{ secrets.SUPERNOVA_DESIGN_SYSTEM_ID }}
 
+      - name: Check for Code Connect changes
+        id: code-connect-filter
+        run: |
+          # Get the previous tag
+          PREVIOUS_TAG=$(git describe --tags --abbrev=0 HEAD^ 2>/dev/null || echo "")
+          if [ -z "$PREVIOUS_TAG" ]; then
+            echo "No previous tag found, will publish Code Connect"
+            echo "code_connect_changed=true" >> $GITHUB_OUTPUT
+          else
+            # Check if any Code Connect files changed since the previous tag
+            CHANGED=$(git diff --name-only $PREVIOUS_TAG HEAD -- 'app/src/main/java/net/skyscanner/backpack/demo/figma/' 'figma.config.json' | wc -l)
+            if [ "$CHANGED" -gt 0 ]; then
+              echo "Code Connect files changed since $PREVIOUS_TAG"
+              echo "code_connect_changed=true" >> $GITHUB_OUTPUT
+            else
+              echo "No Code Connect files changed since $PREVIOUS_TAG"
+              echo "code_connect_changed=false" >> $GITHUB_OUTPUT
+            fi
+          fi
+
+      - name: Install Figma Code Connect
+        if: steps.code-connect-filter.outputs.code_connect_changed == 'true'
+        continue-on-error: true
+        run: npm install -g @figma/code-connect@1.3.5
+
+      - name: Publish Code Connect to Figma
+        if: steps.code-connect-filter.outputs.code_connect_changed == 'true'
+        continue-on-error: true
+        run: npx figma connect publish --exit-on-unreadable-files
+        env:
+          FIGMA_ACCESS_TOKEN: ${{ secrets.FIGMA_ACCESS_TOKEN }}
+
       - name: Publish release to Runway
         run: |
           set -e
@@ -89,3 +124,4 @@ jobs:
           RUNWAY_API_KEY: ${{ secrets.RUNWAY_API_KEY }}
           RUNWAY_APP_ID: ${{ secrets.RUNWAY_APP_ID }}
           RUNWAY_BUCKET_ID: ${{ secrets.RUNWAY_BUCKET_ID }}
+

.gitignore

@@ -247,3 +247,4 @@ backpack-compose/src/main/res/raw/compose_components.txt
 /.idea/copilot.data.migration.ask2agent.xml
 /.idea/copilot.data.migration.edit.xml
 /.idea/markdown.xml
+/tmp/

app/build.gradle

@@ -18,6 +18,7 @@
 
 plugins {
     alias(libs.plugins.compose.compiler)
+    alias(libs.plugins.figma.code.connect)
 }
 
 apply plugin: 'com.android.application'
@@ -109,6 +110,7 @@ dependencies {
     implementation libs.compose.activity
     implementation libs.kotlin.reflection
     implementation libs.destinations.core
+    implementation libs.figma.code.connect
     testImplementation libs.test.junit
     testImplementation libs.roborazzi.compose
     testImplementation libs.roborazzi.core

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

@@ -0,0 +1,241 @@
+import androidx.compose.runtime.Composable
+import com.figma.code.connect.Figma
+import com.figma.code.connect.FigmaConnect
+import com.figma.code.connect.FigmaProperty
+import com.figma.code.connect.FigmaType
+import com.figma.code.connect.FigmaVariant
+import net.skyscanner.backpack.compose.button.BpkButton
+import net.skyscanner.backpack.compose.button.BpkButtonIconPosition
+import net.skyscanner.backpack.compose.button.BpkButtonSize
+import net.skyscanner.backpack.compose.button.BpkButtonType
+import net.skyscanner.backpack.compose.icon.BpkIcon
+import net.skyscanner.backpack.compose.tokens.ArrowRight
+
+@FigmaConnect("FIGMA_BUTTON")
+@FigmaVariant(key = "Icon", value = "None")
+class BpkButtonCodeConnect {
+
+    @FigmaProperty(FigmaType.Enum, "Style")
+    val type: BpkButtonType = Figma.mapping(
+        "Primary" to BpkButtonType.Primary,
+        "Secondary" to BpkButtonType.Secondary,
+        "Featured" to BpkButtonType.Featured,
+        "Destructive" to BpkButtonType.Destructive,
+        "Primary on Dark" to BpkButtonType.PrimaryOnDark,
+        "Primary on Light" to BpkButtonType.PrimaryOnLight,
+        "Secondary on Dark" to BpkButtonType.SecondaryOnDark,
+        "Link" to BpkButtonType.Link,
+        "Link on Dark" to BpkButtonType.LinkOnDark,
+    )
+
+    @FigmaProperty(FigmaType.Enum, "State")
+    val enabled: Boolean = Figma.mapping(
+        "Normal" to true,
+        "Disabled" to false,
+        "Loading" to true,
+        "Pressed" to true,
+        "Focused" to true,
+        "Hover" to true,
+    )
+
+    @FigmaProperty(FigmaType.Enum, "State")
+    val loading: Boolean = Figma.mapping(
+        "Normal" to false,
+        "Disabled" to false,
+        "Loading" to true,
+        "Pressed" to false,
+        "Focused" to false,
+        "Hover" to false,
+    )
+
+    @FigmaProperty(FigmaType.Enum, "Size")
+    val size: BpkButtonSize = Figma.mapping(
+        "Default" to BpkButtonSize.Default,
+        "Large" to BpkButtonSize.Large,
+    )
+
+    @Composable
+    fun ComponentExample() {
+        BpkButton(
+            text = "Label",
+            type = type,
+            size = size,
+            enabled = enabled,
+            loading = loading,
+            onClick = { },
+        )
+    }
+}
+
+@FigmaConnect("FIGMA_BUTTON")
+@FigmaVariant(key = "Icon", value = "Left")
+class BpkButtonLeftIconCodeConnect {
+
+    @FigmaProperty(FigmaType.Enum, "Style")
+    val type: BpkButtonType = Figma.mapping(
+        "Primary" to BpkButtonType.Primary,
+        "Secondary" to BpkButtonType.Secondary,
+        "Featured" to BpkButtonType.Featured,
+        "Destructive" to BpkButtonType.Destructive,
+        "Primary on Dark" to BpkButtonType.PrimaryOnDark,
+        "Primary on Light" to BpkButtonType.PrimaryOnLight,
+        "Secondary on Dark" to BpkButtonType.SecondaryOnDark,
+        "Link" to BpkButtonType.Link,
+        "Link on Dark" to BpkButtonType.LinkOnDark,
+    )
+
+    @FigmaProperty(FigmaType.Enum, "State")
+    val enabled: Boolean = Figma.mapping(
+        "Normal" to true,
+        "Disabled" to false,
+        "Loading" to true,
+        "Pressed" to true,
+        "Focused" to true,
+        "Hover" to true,
+    )
+
+    @FigmaProperty(FigmaType.Enum, "State")
+    val loading: Boolean = Figma.mapping(
+        "Normal" to false,
+        "Disabled" to false,
+        "Loading" to true,
+        "Pressed" to false,
+        "Focused" to false,
+        "Hover" to false,
+    )
+
+    @FigmaProperty(FigmaType.Enum, "Size")
+    val size: BpkButtonSize = Figma.mapping(
+        "Default" to BpkButtonSize.Default,
+        "Large" to BpkButtonSize.Large,
+    )
+
+    @Composable
+    fun ComponentExample() {
+        BpkButton(
+            text = "Label",
+            type = type,
+            size = size,
+            enabled = enabled,
+            loading = loading,
+            icon = BpkIcon.ArrowRight,
+            position = BpkButtonIconPosition.Start,
+            onClick = { },
+        )
+    }
+}
+
+@FigmaConnect("FIGMA_BUTTON")
+@FigmaVariant(key = "Icon", value = "Right")
+class BpkButtonRightIconCodeConnect {
+
+    @FigmaProperty(FigmaType.Enum, "Style")
+    val type: BpkButtonType = Figma.mapping(
+        "Primary" to BpkButtonType.Primary,
+        "Secondary" to BpkButtonType.Secondary,
+        "Featured" to BpkButtonType.Featured,
+        "Destructive" to BpkButtonType.Destructive,
+        "Primary on Dark" to BpkButtonType.PrimaryOnDark,
+        "Primary on Light" to BpkButtonType.PrimaryOnLight,
+        "Secondary on Dark" to BpkButtonType.SecondaryOnDark,
+        "Link" to BpkButtonType.Link,
+        "Link on Dark" to BpkButtonType.LinkOnDark,
+    )
+
+    @FigmaProperty(FigmaType.Enum, "State")
+    val enabled: Boolean = Figma.mapping(
+        "Normal" to true,
+        "Disabled" to false,
+        "Loading" to true,
+        "Pressed" to true,
+        "Focused" to true,
+        "Hover" to true,
+    )
+
+    @FigmaProperty(FigmaType.Enum, "State")
+    val loading: Boolean = Figma.mapping(
+        "Normal" to false,
+        "Disabled" to false,
+        "Loading" to true,
+        "Pressed" to false,
+        "Focused" to false,
+        "Hover" to false,
+    )
+
+    @FigmaProperty(FigmaType.Enum, "Size")
+    val size: BpkButtonSize = Figma.mapping(
+        "Default" to BpkButtonSize.Default,
+        "Large" to BpkButtonSize.Large,
+    )
+
+    @Composable
+    fun ComponentExample() {
+        BpkButton(
+            text = "Label",
+            type = type,
+            size = size,
+            enabled = enabled,
+            loading = loading,
+            icon = BpkIcon.ArrowRight,
+            position = BpkButtonIconPosition.End,
+            onClick = { },
+        )
+    }
+}
+
+@FigmaConnect("FIGMA_BUTTON")
+@FigmaVariant(key = "Icon", value = "Icon only")
+class BpkButtonIconOnlyCodeConnect {
+
+    @FigmaProperty(FigmaType.Enum, "Style")
+    val type: BpkButtonType = Figma.mapping(
+        "Primary" to BpkButtonType.Primary,
+        "Secondary" to BpkButtonType.Secondary,
+        "Featured" to BpkButtonType.Featured,
+        "Destructive" to BpkButtonType.Destructive,
+        "Primary on Dark" to BpkButtonType.PrimaryOnDark,
+        "Primary on Light" to BpkButtonType.PrimaryOnLight,
+        "Secondary on Dark" to BpkButtonType.SecondaryOnDark,
+        "Link" to BpkButtonType.Link,
+        "Link on Dark" to BpkButtonType.LinkOnDark,
+    )
+
+    @FigmaProperty(FigmaType.Enum, "State")
+    val enabled: Boolean = Figma.mapping(
+        "Normal" to true,
+        "Disabled" to false,
+        "Loading" to true,
+        "Pressed" to true,
+        "Focused" to true,
+        "Hover" to true,
+    )
+
+    @FigmaProperty(FigmaType.Enum, "State")
+    val loading: Boolean = Figma.mapping(
+        "Normal" to false,
+        "Disabled" to false,
+        "Loading" to true,
+        "Pressed" to false,
+        "Focused" to false,
+        "Hover" to false,
+    )
+
+    @FigmaProperty(FigmaType.Enum, "Size")
+    val size: BpkButtonSize = Figma.mapping(
+        "Default" to BpkButtonSize.Default,
+        "Large" to BpkButtonSize.Large,
+    )
+
+    @Composable
+    fun ComponentExample() {
+        BpkButton(
+            icon = BpkIcon.ArrowRight,
+            contentDescription = "Label",
+            type = type,
+            size = size,
+            enabled = enabled,
+            loading = loading,
+            onClick = { },
+        )
+    }
+}