Figma code connect

.github/workflows/pr.yml

@@ -12,7 +12,7 @@ defaults:
   run:
     shell: bash -l {0}
 
-env: 
+env:
   CACHE_NAME: node-modules-cache
   BUILD_CACHE_NAME: build-cache
 
@@ -59,7 +59,7 @@ jobs:
             node_modules/
             packages/node_modules/
           key: ${{ env.CACHE_NAME }}-${{ hashFiles('package-lock.json', 'packages/package-lock.json') }}
-      
+
       - name: Upload dist-storybook to Cache
         uses: actions/cache@v4.2.4
         id: storybook-dist-cache

.github/workflows/sync-figma-code-connect.yml

@@ -0,0 +1,15 @@
+on:
+  push:
+    paths:
+      - packages/**/*.figma.tsx
+    branches: [main]
+
+jobs:
+  code-connect:
+    name: Code Connect
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - run: npx --package @figma/code-connect figma connect publish
+        env:
+          FIGMA_ACCESS_TOKEN: ${{ secrets.FIGMA_TOKEN }}

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 .idea
 .vscode
+.env
 .sass-cache
 /dist
 /dist-sassdoc

babel.config.js

@@ -61,7 +61,8 @@ module.exports = {
             fileName.includes('-test') ||
             fileName.includes('-Test') ||
             /\/node_modules\//.test(fileName) ||
-            fileName.includes('.d.ts')
+            fileName.includes('.d.ts') ||
+            fileName.includes('.figma.tsx')
           ),
       ],
     },

figma.config.json

@@ -0,0 +1,7 @@
+{
+  "codeConnect": {
+    "include": ["/**/*.{tsx,jsx}"],
+    "label": "React",
+    "interactiveSetupFigmaFileUrl": "https://www.figma.com/design/irZ3YBx8vOm16ICkAr7mB3/Backpack-Components?node-id=100-1682&p=f&t=dyMLItX3JduHpAEJ-0"
+  }
+}