Code Connect v1.4.3

Author: figma-bot

CHANGELOG.md

@@ -1,3 +1,30 @@
+# Code Connect v1.4.3 (1st April 2026)
+
+## Fixed
+
+### Template files
+
+- Fixed `getBoolean()` returning `undefined` instead of `false` when a boolean property is set to `false` in a template file.
+- Fixed some TS discrepancies in the `figma.*` API in template files
+- Some fixes for the migration script
+
+### Swift & Compose
+
+- Fixed args inconsistency in Swift and Compose helpers that could cause errors during template rendering.
+
+## Features
+
+### CLI
+
+- Added `--file` (`-f`) option to `parse`, `publish`, and `unpublish` commands to process a single Code Connect file instead of the entire project (e.g. `figma connect parse --file=src/Button.figma.tsx`).
+
+### Template files
+
+- The `migrate` command now outputs TypeScript (`.figma.ts`) files by default. Pass `--javascript` to output JavaScript (`.figma.js`) files instead.
+- The `migrate` command now outputs `import figma from "figma"` (ESM syntax) when using the `--typescript` flag
+- The `migrate` command now removes `__props` metadata blocks by default. Pass `--include-props` to preserve them.
+- Storybook connections can now be migrated by the template migration script
+
 # Code Connect v1.4.2 (16th March 2026)
 
 ## Fixed
@@ -26,7 +53,7 @@
   - Type-only imports (`import type`) are supported
   - Other module imports are not yet supported
   - To enable types for the `figma` API, add `"@figma/code-connect/figma-types"` to the `types` array in your `tsconfig.json`.
-  - JavaScript files are the default output of the `migrate` command. Can pass `--typescript` to output TypeScript (`.figma.ts`) files instead.
+  - TypeScript files are the default output of the `migrate` command. Can pass `--javascript` to output JavaScript (`.figma.js`) files instead.
 
 # Code Connect v1.4.1 (20th February 2026)
 

README.md

@@ -2,7 +2,7 @@
 
 Code Connect is a tool for connecting your design system components in code with your design system in Figma. When using Code Connect, Figma's Dev Mode will display true-to-production code snippets from your design system instead of autogenerated code examples. In addition to connecting component definitions, Code Connect also supports mapping properties from code to Figma enabling dynamic and correct examples. This can be useful for when you have an existing design system and are looking to drive consistent and correct adoption of that design system across design and engineering.
 
-Code Connect is easy to set up, easy to maintain, type-safe, and extensible. Out of the box Code Connect comes with support for React (and React Native), Storybook, HTML (e.g. Web Components, Angular and Vue), SwiftUI and Jetpack Compose.
+Code Connect is easy to set up, easy to maintain, type-safe, and extensible. The easiest way to get started is using **template files** — a framework-agnostic way to represent any code snippet, giving you full control over how components appear in Dev Mode. Code Connect also includes framework-specific integrations for React (and React Native), Storybook, HTML (e.g. Web Components, Angular and Vue), SwiftUI and Jetpack Compose.
 
 ![image](https://static.figma.com/uploads/d98e747613e01685d6a0f9dd3e2dcd022ff289c0.png)
 
@@ -13,11 +13,11 @@ Code Connect is easy to set up, easy to maintain, type-safe, and extensible. Out
 
 Use Figma’s Code Connect to make your design system easily accessible to your developers and create a shared source of truth for both the design and code elements.
 
-Our Getting Started guide will walk you through the process of setting up Code Connect, using our interactive setup to automatically map components, and publishing your first components. **[Code Connect Documentation →](https://developers.figma.com/docs/code-connect/)**
+Our Getting Started guide will walk you through setting up Code Connect and publishing your first components using template files. **[Code Connect Documentation →](https://developers.figma.com/docs/code-connect/)**
 
-Code Connect comes with support for different frameworks and languages. Our integration guides will walk you through the process of refining your components by mapping props and variants for:
+For framework-specific prop mapping and variant support, see the integration guides for:
 
 - **[React (and React Native) →](https://www.figma.com/code-connect-docs/react)**
 - **[HTML (e.g. Web Components, Angular and Vue) →](https://www.figma.com/code-connect-docs/html)**
 - **[SwiftUI →](https://www.figma.com/code-connect-docs/swiftui)**
-- **[Jetpack Compose →](https://www.figma.com/code-connect-docs/compose)**.
+- **[Jetpack Compose →](https://www.figma.com/code-connect-docs/compose)**

cli/figma-module.d.ts cli/figma-types.d.tscli/figma-module.d.ts renamed to cli/figma-types.d.ts

@@ -50,6 +50,7 @@ declare module 'figma' {
   export interface TextHandle {
     readonly type: 'TEXT'
     readonly name: string
+    readonly textContent: string
     __render__(): string
   }
 
@@ -117,7 +118,7 @@ declare module 'figma' {
       opts?: SelectorOptions,
     ): (InstanceHandle | ErrorHandle)[]
     findLayers(
-      selectorFn: (node: InstanceHandle) => boolean,
+      selectorFn: (node: InstanceHandle | TextHandle) => boolean,
       opts?: SelectorOptions,
     ): (InstanceHandle | TextHandle | ErrorHandle)[]
     executeTemplate(): {
@@ -194,10 +195,16 @@ declare module 'figma' {
         isReactComponentArray(prop: unknown): boolean
       }
       swift: {
-        renderChildren(children: ResultSection[], prefix: string): ResultSection[]
+        renderChildren(
+          children: ResultSection[] | string | undefined,
+          prefix: string,
+        ): ResultSection[]
       }
       kotlin: {
-        renderChildren(children: ResultSection[], prefix: string): ResultSection[]
+        renderChildren(
+          children: ResultSection[] | string | undefined,
+          prefix: string,
+        ): ResultSection[]
       }
     }
   }

cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@figma/code-connect",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "A tool for connecting your design system components in code with your design system in Figma",
   "keywords": [],
   "author": "Figma",
@@ -20,7 +20,7 @@
       "default": "./dist/react/index_react.js"
     },
     "./figma-types": {
-      "types": "./figma-module.d.ts"
+      "types": "./figma-types.d.ts"
     }
   },
   "repository": {
@@ -33,7 +33,7 @@
   },
   "files": [
     "dist/**/*",
-    "figma-module.d.ts"
+    "figma-types.d.ts"
   ],
   "engines": {
     "node": ">=18"

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

@@ -0,0 +1,60 @@
+jest.mock('fs', () => ({ existsSync: jest.fn() }))
+jest.mock('../../common/logging', () => ({ exitWithError: jest.fn() }))
+
+import path from 'path'
+import { filterProjectInfoByFile } from '../filter_project_info'
+
+const { exitWithError } = jest.requireMock('../../common/logging')
+const { existsSync } = jest.requireMock('fs')
+
+function makeProjectInfo(files: string[]) {
+  return {
+    absPath: '/project',
+    files,
+    remoteUrl: 'https://github.com/test/repo',
+    config: {} as any,
+  }
+}
+
+describe('filterProjectInfoByFile', () => {
+  beforeEach(() => jest.clearAllMocks())
+
+  it('returns projectInfo unchanged when --file is not specified', () => {
+    const info = makeProjectInfo(['/a.ts', '/b.ts'])
+    expect(filterProjectInfoByFile(info, undefined)).toBe(info)
+    expect(existsSync).not.toHaveBeenCalled()
+  })
+
+  it('returns projectInfo unchanged when file is empty string', () => {
+    const info = makeProjectInfo(['/a.ts'])
+    expect(filterProjectInfoByFile(info, '')).toBe(info)
+  })
+
+  it('filters files to only the specified file', () => {
+    const absFile = path.resolve('/project/a.ts')
+    const info = makeProjectInfo([absFile, '/project/b.ts'])
+    existsSync.mockReturnValue(true)
+
+    const result = filterProjectInfoByFile(info, '/project/a.ts')
+
+    expect(result.files).toEqual([absFile])
+    expect(result.absPath).toBe(info.absPath)
+    expect(result.remoteUrl).toBe(info.remoteUrl)
+    expect(result).not.toBe(info)
+  })
+
+  it('exits with error when the file does not exist on disk', () => {
+    existsSync.mockReturnValue(false)
+    filterProjectInfoByFile(makeProjectInfo([]), '/project/missing.ts')
+    expect(exitWithError).toHaveBeenCalledWith(expect.stringContaining('File not found:'))
+  })
+
+  it('exits with error when the file is not in the project file list', () => {
+    existsSync.mockReturnValue(true)
+    const absFile = path.resolve('/project/unlisted.ts')
+    filterProjectInfoByFile(makeProjectInfo(['/other.ts']), '/project/unlisted.ts')
+    expect(exitWithError).toHaveBeenCalledWith(
+      expect.stringContaining(`File ${absFile} was not found in the project's file list`),
+    )
+  })
+})