Code Connect v1.4.0

Author: figma-bot

CHANGELOG.md

@@ -1,3 +1,19 @@
+# Code Connect v1.4.0 (18th February 2026)
+
+## Features
+
+### React
+
+- Add support for `figma.slot()` to map Figma slot layer properties in Code Connect files.
+
+### Parserless
+
+- Added a beta migration script to migrate parser-based Code Connect files to parserless templates under `figma connect migrate`.
+- The default extension for parserless/template files is now `.figma.js` instead of `.figma.template.js`. The old `.figma.template.js` extension is still fully supported for backwards compatibility.
+- Removed `--include-template-files` flag. Template files (`.figma.js` and `.figma.template.js`) are now always included when detected.
+- Add support for `instance.getSlot(name)` in templates to reference "slot" properties.
+- Parserless templates now support optional `component` and `source` comment fields (e.g., `// component=Button`)
+
 # Code Connect v1.3.13 (29th January 2026)
 
 ## Features

cli/npm_catalog.toml

@@ -171,6 +171,8 @@
 "@tailwindcss/postcss" = "4.1.3"
 "@tailwindcss/vite" = "4.1.3"
 "tailwindcss" = "4.1.3"
+"@tanstack/react-router" = "1.130.0"
+"@tanstack/react-router-devtools" = "1.130.0"
 "@vitejs/plugin-react" = "4.4.1"
 "vite" = "6.3.6"
 "webpack" = "5.91.0"
@@ -181,7 +183,7 @@
 "@figma/plugin-typings" = "1.121.0"
 "@figma/widget-typings" = "1.12.1"
 "@formatjs/icu-messageformat-parser" = "^2.11.2"
-"@modelcontextprotocol/ext-apps" = "0.4.0"
+"@modelcontextprotocol/ext-apps" = "1.0.1"
 "@modelcontextprotocol/sdk" = "1.24.0"
 "@opentelemetry/api" = "^1.9.0"
 "@sentry/cli" = "2.58.3"
@@ -209,6 +211,7 @@
 "mocha-junit-reporter" = "2.2.1"
 "postcss" = "8.5.2"
 "prettier" = "3.6.2"
+"puppeteer" = "24.36.1"
 "react-dom" = "18.3.1"
 "react-redux" = "8.0.5"
 "react" = "18.3.1"
@@ -218,6 +221,7 @@
 "ts-node" = "^10.9.2"
 "typescript" = "5.9.3"
 "yaml" = "2.8.0"
+"@zip.js/zip.js" = "2.8.19"
 "zod-to-json-schema" = "^3.23.5"
 "zod" = "3.25.58"
 "ai" = "4.1.62"

cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@figma/code-connect",
-  "version": "1.3.13",
+  "version": "1.4.0",
   "description": "A tool for connecting your design system components in code with your design system in Figma",
   "keywords": [],
   "author": "Figma",
@@ -81,7 +81,6 @@
     "jest": "^29.7.0",
     "patch-package": "^8.0.0",
     "pkg": "^5.8.1",
-    "react": "18.3.1",
     "ts-jest": "^29.2.5",
     "ts-loader": "^9.5.1",
     "tsx": "^4.11.0",
@@ -92,6 +91,8 @@
 
 
     "boxen": "5.1.1",
+    
+    
     "chalk": "^4.1.2",
     "commander": "^11.1.0",
     "compare-versions": "^6.1.0",
@@ -110,6 +111,7 @@
     "strip-ansi": "^6.0.0",
     "ts-morph": "^27.0.0",
     "typescript": "5.9.3",
+    
     "undici": "^7.19.1",
     "zod": "3.25.58",
     "zod-validation-error": "^3.2.0"

cli/src/commands/__test__/parseRawFile.test.ts

@@ -1,5 +1,6 @@
 import { parseRawFile } from '../connect'
 import { CodeConnectConfig } from '../../connect/project'
+import { SyntaxHighlightLanguage } from '../../connect/label_language_mapping'
 import fs from 'fs'
 import path from 'path'
 import os from 'os'
@@ -125,12 +126,89 @@ export default figma.code\`<Button />\``
 
     const config: CodeConnectConfig = {
       parser: 'react',
-      language: 'kotlin',
+      language: SyntaxHighlightLanguage.Kotlin,
     }
 
     const result = parseRawFile(tempFilePath, 'React', config)
 
-    expect(result.language).toBe('kotlin')
+    expect(result.language).toBe(SyntaxHighlightLanguage.Kotlin)
     expect(result.label).toBe('React')
   })
+
+  it('parses component field from comment', () => {
+    const fileContent = `// component=Button
+// url=https://figma.com/design/abc123?node-id=1:1
+const figma = require('figma')
+export default figma.code\`<Button />\``
+
+    fs.writeFileSync(tempFilePath, fileContent)
+    const result = parseRawFile(tempFilePath, undefined)
+
+    expect(result.component).toBe('Button')
+    expect(result.figmaNode).toBe('https://figma.com/design/abc123?node-id=1:1')
+  })
+
+  it('parses source field from comment', () => {
+    const fileContent = `// source=src/button.tsx
+// url=https://figma.com/design/abc123?node-id=1:1
+const figma = require('figma')
+export default figma.code\`<Button />\``
+
+    fs.writeFileSync(tempFilePath, fileContent)
+    const result = parseRawFile(tempFilePath, undefined)
+
+    expect(result.source).toBe('src/button.tsx')
+  })
+
+  it('parses fields in any order', () => {
+    const fileContent = `// url=https://figma.com/design/abc123?node-id=1:1
+// component=Button
+// source=src/button.tsx
+const figma = require('figma')
+export default figma.code\`<Button />\``
+
+    fs.writeFileSync(tempFilePath, fileContent)
+    const result = parseRawFile(tempFilePath, undefined)
+
+    expect(result.figmaNode).toBe('https://figma.com/design/abc123?node-id=1:1')
+    expect(result.component).toBe('Button')
+    expect(result.source).toBe('src/button.tsx')
+  })
+
+  it('handles missing optional fields', () => {
+    const fileContent = `// url=https://figma.com/design/abc123?node-id=1:1
+const figma = require('figma')
+export default figma.code\`<Button />\``
+
+    fs.writeFileSync(tempFilePath, fileContent)
+    const result = parseRawFile(tempFilePath, undefined)
+
+    expect(result.figmaNode).toBe('https://figma.com/design/abc123?node-id=1:1')
+    expect(result.component).toBeUndefined()
+  })
+
+  it('throws error when url field is missing', () => {
+    const fileContent = `// component=Button
+const figma = require('figma')
+export default figma.code\`<Button />\``
+
+    fs.writeFileSync(tempFilePath, fileContent)
+
+    expect(() => parseRawFile(tempFilePath, undefined)).toThrow('Missing required url field')
+  })
+
+  it('trims whitespace from field values', () => {
+    const fileContent = `// component=  Button
+// source=  src/button.tsx
+// url=  https://figma.com/design/abc123?node-id=1:1
+const figma = require('figma')
+export default figma.code\`<Button />\``
+
+    fs.writeFileSync(tempFilePath, fileContent)
+    const result = parseRawFile(tempFilePath, undefined)
+
+    expect(result.component).toBe('Button')
+    expect(result.source).toBe('src/button.tsx')
+    expect(result.figmaNode).toBe('https://figma.com/design/abc123?node-id=1:1')
+  })
 })