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

Author: krizoulokmane

.github/workflows/_build.yml

@@ -105,6 +105,18 @@ jobs:
       - name: Unit Tests
         run: ./gradlew test${{ env.flavour }}${{ env.config }}UnitTest -PdisablePreDex
 
+      - name: Validate Code Connect files
+        run: |
+          if find backpack-compose/src/main/kotlin -name "*.figma.kt" -type f | grep -q .; then
+            echo "🔍 Found Code Connect files, validating..."
+            npx @figma/code-connect parse --verbose
+            npx @figma/code-connect publish --dry-run
+          else
+            echo "No Code Connect files found, skipping validation"
+          fi
+        env:
+          FIGMA_ACCESS_TOKEN: ${{ secrets.FIGMA_ACCESS_TOKEN }}
+
   Android:
     name: Android tests
     runs-on: ubuntu-24.04-16cores-public

.github/workflows/release.yml

@@ -79,6 +79,11 @@ jobs:
       - name: Update Supernova docs
         run: npx @supernovaio/cli publish-documentation --apiKey=${{ secrets.SUPERNOVA_API_KEY }} --designSystemId=${{ secrets.SUPERNOVA_DESIGN_SYSTEM_ID }}
 
+      - name: Publish Code Connect to Figma
+        run: npx @figma/code-connect publish --exit-on-unreadable-files
+        env:
+          FIGMA_ACCESS_TOKEN: ${{ secrets.FIGMA_ACCESS_TOKEN }}
+
       - name: Publish release to Runway
         run: |
           set -e
@@ -87,3 +92,4 @@ jobs:
           RUNWAY_API_KEY: ${{ secrets.RUNWAY_API_KEY }}
           RUNWAY_APP_ID: ${{ secrets.RUNWAY_APP_ID }}
           RUNWAY_BUCKET_ID: ${{ secrets.RUNWAY_BUCKET_ID }}
+

figma-code-connect/README.md

@@ -1,61 +1,27 @@
-# Figma Code Connect Integration for Backpack Android
+# Figma Code Connect
 
-## Overview
+Generates code snippets from Figma designs for Backpack Android components.
 
-Figma Code Connect bridges the gap between design and development by automatically generating accurate code snippets from Figma designs. This guide walks you through integrating and using Figma Code Connect with Backpack Android components.
+## Quick Start
 
-## 📚 Documentation Structure
+1. Get [Figma access token](https://www.figma.com/settings)
+2. `export FIGMA_ACCESS_TOKEN="your_token"`
+3. Create `Component.figma.kt` with annotations
+4. Test: `npx @figma/code-connect parse --verbose`
+5. Publish: `npx @figma/code-connect publish`
 
-This guide is split into focused documents for easier navigation:
+## Documentation
 
-1. **[Getting Started](./getting-started.md)** - Initial setup and installation
-2. **[Component Integration](./component-integration.md)** - How to add Code Connect to components
-3. **[Annotations Guide](./annotations-guide.md)** - Complete reference for all annotations
-4. **[Testing & Publishing](./testing-publishing.md)** - Verification and deployment workflow
-5. **[Examples](./examples.md)** - Real-world implementation examples
-6. **[Quick Reference](./quick-reference.md)** - Essential commands and patterns
+- **[Getting Started](./getting-started.md)** - Setup and installation
+- **[Annotations Guide](./annotations-guide.md)** - Annotation reference
+- **[Component Integration](./component-integration.md)** - Adding to components
+- **[Examples](./examples.md)** - Real implementations
+- **[Testing & Publishing](./testing-publishing.md)** - Verification workflow
+- **[CI Integration](./ci-integration.md)** - CI/CD setup
+- **[Quick Reference](./quick-reference.md)** - Commands and patterns
 
-## 🚀 Quick Start
+## Current Components
 
-If you're already familiar with the setup, here's the essential workflow:
-
-1. **Add annotations** to your component
-2. **Test locally**: `figma connect parse --verbose`
-3. **Test publishing**: `figma connect publish --dry-run`
-4. **Publish**: `figma connect publish`
-
-## 🎯 What You'll Learn
-
-- ✅ How to set up Figma Code Connect in Backpack Android
-- ✅ When and how to use different annotations (`@FigmaConnect`, `@FigmaVariant`, `@FigmaProperty`)
-- ✅ Best practices for component integration
-- ✅ Testing and publishing workflow
-- ✅ Real examples from `BpkButton` and `BpkText`
-
-## 🔧 Prerequisites
-
-- Android Studio with Kotlin support
-- Node.js (for Figma CLI)
-- Access to Backpack Figma workspace
-- Figma personal access token
-
-## 📋 Current Integration Status
-
-### ✅ Integrated Components
-- **BpkButton** - 4 icon variants (None, Left, Right, Icon only)
-- **BpkText** - 18 typography variants (Hero1-5, Heading1-5, etc.)
+- **BpkButton** - 4 icon variants
+- **BpkText** - 18 typography variants
 - **BpkCard** - Basic example
-
-### 🔄 Integration Pattern
-Each component variant uses individual `@FigmaVariant` classes for clean, parser-friendly code generation.
-
-## 🆘 Need Help?
-
-- **Quick questions**: Check the [Annotations Guide](annotations-guide.md)
-- **Setup issues**: See [Getting Started](getting-started.md)
-- **Integration patterns**: Review [Examples](examples.md)
-- **Testing problems**: Visit [Testing & Publishing](testing-publishing.md)
-
----
-
-**Next Step**: Start with [Getting Started](getting-started.md) to set up your development environment.