Code Connect v1.5.0

Author: figma-bot

CHANGELOG.md

@@ -1,3 +1,30 @@
+# Code Connect v1.5.0 (29 July 2026)
+
+> [!WARNING]
+> Previously, Code Connect required framework-specific parsers for React, iOS, Android and Web Components. Late in 2025, we introduced a new [template API](https://developers.figma.com/docs/code-connect/template-api/) that removed framework requirements and allows users to more flexibly control how code snippets are rendered inside of Figma. Going forward, new users should opt for this template format and we recommend existing users to follow our [migration guide](https://developers.figma.com/docs/code-connect/templates-migration-guide/) to move to the new format. Following August 17th, 2026, we will no longer be updating or actively maintaining the legacy parsers.
+
+
+## Fixed
+
+### Template files
+
+- Fixed nested rendered examples being dropped or formatted incorrectly when interpolated directly or passed to the React, Swift, and Kotlin child-rendering helpers.
+- Migrated template files no longer include unused generated prop constants.
+
+## Features
+
+### Template files
+
+- Added a `--delete` option to `figma connect migrate` that deletes source Code Connect files after they are successfully migrated.
+- Template files (TypeScript and JavaScript) now support importing local helper modules via relative paths (for example, `./shared-helpers`) to promote reuse of shared formatting and utility logic. Helper code is bundled into the published template so it can run standalone, and helpers may import other local helpers to organize shared logic across multiple files. Only relative imports within the project are supported (external packages are not), and helpers must be brought in with `import` syntax — `require` remains available for the Figma API itself. Helper code you don't actually use is left out of the published template, and if the bundled output exceeds the maximum template size, the CLI fails before publishing.
+
+### General
+
+- `figma connect preview` can now render a component in states beyond its default, and inspect its properties:
+  - `figma connect preview <file> --inspect` prints the component's properties and variants — name, type, variant options, and default — without rendering a snippet.
+  - `figma connect preview <file> --props Name=Value …` renders a single specific property combination. Pairs are space-separated arguments (quote a pair only when its name or value contains spaces, e.g. `"Has Icon Start=true"`). Property names and variant values are matched case-insensitively, unspecified properties keep their defaults, and an invalid variant value is reported along with the valid options. To target a property when two properties share a name but differ in type, prefix the pair with the type, e.g. `"BOOLEAN:textMsg=false" "TEXT:textMsg=Hello"`; the prefix is optional and only needed to disambiguate.
+  - `figma connect preview <file> --all` renders every property combination of the component — the cartesian product of its variant and boolean properties. Requires a specific component file argument. Use `--max-combinations <number>` to render fewer combinations when the full set is large.
+
 # Code Connect v1.4.9 (6 July 2026)
 
 ## Fixed
@@ -25,6 +52,7 @@
 - Augmented the `getSlot` API: `getSlot('SlotName')` still renders the same way, and the returned value now also exposes `connectedInstances` (the connected instances directly in the slot). This lets you render a slot's connected children inline. For example `getSlot('body').connectedInstances.map((c) => c.executeTemplate().example)`.
 
 ### React & HTML
+
 - Augmented the `figma.slot` API: `figma.slot('SlotName')` still maps the slot the same way, and you can now also write `figma.slot('SlotName').connectedInstances` in a `props` object to render the slot's code-connected instances inline. For example `props: { content: figma.slot('Content').connectedInstances }`.
 
 # Code Connect v1.4.8 (8 June 2026)

README.md

@@ -1,5 +1,8 @@
 # Code Connect
 
+> [!WARNING]
+> Previously, Code Connect required framework-specific parsers for React, iOS, Android and Web Components. Late in 2025, we introduced a new [template API](https://developers.figma.com/docs/code-connect/template-api/) that removed framework requirements and allows users to more flexibly control how code snippets are rendered inside of Figma. Going forward, new users should opt for this template format and we recommend existing users to follow our [migration guide](https://developers.figma.com/docs/code-connect/templates-migration-guide/) to move to the new format. Following August 17th, 2026, we will no longer be updating or actively maintaining the legacy parsers.
+
 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. 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.

cli/figma-types-no-require.d.ts

@@ -23,6 +23,7 @@ declare module 'figma' {
   export type SlotSection = { type: 'SLOT'; guid?: string; propertyName: string }
   export type ErrorSection = { type: 'ERROR'; message: string; errorObject?: unknown }
   export type ResultSection = CodeSection | InstanceSection | SlotSection | ErrorSection
+  export type ResultSectionList = Array<ResultSection | ResultSectionList>
 
   export interface TemplateStringResult {
     sections: ResultSection[]
@@ -99,6 +100,7 @@ declare module 'figma' {
       name: string
     }): InstanceHandle | TextHandle | ErrorHandle | null
     __getPropertyValue__(name: string): string | boolean | ErrorHandle
+    __getPropertyValueByType__(name: string, type: string): string | boolean | ErrorHandle
     __render__(): ResultSection[]
     __getProps__(): ResultSection[] | Record<string, unknown> | undefined
     __renderWithFn__(
@@ -192,12 +194,12 @@ declare module 'figma' {
 
     helpers: {
       react: {
-        renderProp(name: string, prop: FCCValue | ResultSection[]): TemplateStringResult | string
+        renderProp(name: string, prop: FCCValue | ResultSectionList): TemplateStringResult | string
         renderChildren(
-          prop: FCCValue | ResultSection[],
+          prop: FCCValue | ResultSectionList,
         ): ResultSection[] | string | number | boolean | TemplateStringResult
         renderPropValue(
-          prop: FCCValue | ResultSection[],
+          prop: FCCValue | ResultSectionList,
         ): string | number | boolean | ResultSection[]
         stringifyObject(obj: unknown): string
         jsxElement(value: string): { $value: string; $type: 'jsx-element' }
@@ -207,17 +209,17 @@ declare module 'figma' {
         templateString(value: string): { $value: string; $type: 'template-string' }
         reactComponent(value: string): { $value: string; $type: 'react-component' }
         array(value: FCCValue[]): { $value: FCCValue[]; $type: 'array' }
-        isReactComponentArray(prop: unknown): boolean
+        isReactComponentArray(prop: unknown): prop is ResultSectionList
       }
       swift: {
         renderChildren(
-          children: ResultSection[] | string | undefined,
+          children: ResultSectionList | string | undefined,
           prefix: string,
         ): ResultSection[]
       }
       kotlin: {
         renderChildren(
-          children: ResultSection[] | string | undefined,
+          children: ResultSectionList | string | undefined,
           prefix: string,
         ): ResultSection[]
       }

cli/figma-types.d.ts

@@ -20,6 +20,7 @@ declare module 'figma' {
   export type SlotSection = { type: 'SLOT'; guid?: string; propertyName: string }
   export type ErrorSection = { type: 'ERROR'; message: string; errorObject?: unknown }
   export type ResultSection = CodeSection | InstanceSection | SlotSection | ErrorSection
+  export type ResultSectionList = Array<ResultSection | ResultSectionList>
 
   export interface TemplateStringResult {
     sections: ResultSection[]
@@ -96,6 +97,7 @@ declare module 'figma' {
       name: string
     }): InstanceHandle | TextHandle | ErrorHandle | null
     __getPropertyValue__(name: string): string | boolean | ErrorHandle
+    __getPropertyValueByType__(name: string, type: string): string | boolean | ErrorHandle
     __render__(): ResultSection[]
     __getProps__(): ResultSection[] | Record<string, unknown> | undefined
     __renderWithFn__(
@@ -189,12 +191,12 @@ declare module 'figma' {
 
     helpers: {
       react: {
-        renderProp(name: string, prop: FCCValue | ResultSection[]): TemplateStringResult | string
+        renderProp(name: string, prop: FCCValue | ResultSectionList): TemplateStringResult | string
         renderChildren(
-          prop: FCCValue | ResultSection[],
+          prop: FCCValue | ResultSectionList,
         ): ResultSection[] | string | number | boolean | TemplateStringResult
         renderPropValue(
-          prop: FCCValue | ResultSection[],
+          prop: FCCValue | ResultSectionList,
         ): string | number | boolean | ResultSection[]
         stringifyObject(obj: unknown): string
         jsxElement(value: string): { $value: string; $type: 'jsx-element' }
@@ -204,17 +206,17 @@ declare module 'figma' {
         templateString(value: string): { $value: string; $type: 'template-string' }
         reactComponent(value: string): { $value: string; $type: 'react-component' }
         array(value: FCCValue[]): { $value: FCCValue[]; $type: 'array' }
-        isReactComponentArray(prop: unknown): boolean
+        isReactComponentArray(prop: unknown): prop is ResultSectionList
       }
       swift: {
         renderChildren(
-          children: ResultSection[] | string | undefined,
+          children: ResultSectionList | string | undefined,
           prefix: string,
         ): ResultSection[]
       }
       kotlin: {
         renderChildren(
-          children: ResultSection[] | string | undefined,
+          children: ResultSectionList | string | undefined,
           prefix: string,
         ): ResultSection[]
       }

cli/npm_catalog.toml

@@ -100,15 +100,17 @@
 "@babel/template" = "7.28.5"
 "@babel/traverse" = "7.28.5"
 "@babel/types" = "7.28.5"
-"oxlint" = "1.67.0"
-"oxlint-tsgolint" = "0.23.0"
+"oxlint" = "1.72.0"
+"oxlint-tsgolint" = "0.24.0"
+"oxlint-plugin-eslint" = "1.72.0"
 "eslint" = "9.37.0"
 "eslint-config-prettier" = "^9.1.0"
 "eslint-plugin-clsx" = "^0.0.12"
 "eslint-plugin-import" = "^2.32.0"
 "eslint-plugin-jest" = "^28.8.3"
 "eslint-plugin-react" = "^7.37.5"
 "eslint-plugin-react-hooks" = "^5.2.0"
+"eslint-plugin-react-perf" = "^3.3.3"
 "eslint-plugin-simple-import-sort" = "^12.1.1"
 "eslint-plugin-unused-imports" = "^4.1.4"
 "eslint-import-resolver-typescript" = "^4.4.4"
@@ -117,7 +119,7 @@
 "@eslint/js" = "9.37.0"
 "@eslint/config-helpers" = "^0.4.0"
 "@vitest/eslint-plugin" = "^1.6.16"
-"electron" = "42.4.1"
+"electron" = "43.1.1"
 "@typescript-eslint/eslint-plugin" = "8.59.1"
 "@typescript-eslint/parser" = "8.59.1"
 "@typescript-eslint/project-service" = "8.59.1"
@@ -141,6 +143,9 @@
 "jest-cli" = "^29.7.0"
 "jest-junit" = "16.0.0"
 "ts-jest" = "^29.4.9"
+"@testing-library/dom" = "10.4.1"
+"@testing-library/jest-dom" = "6.9.1"
+"@testing-library/react" = "16.3.2"
 "@testing-library/user-event" = "14.6.1"
 "c8" = "^11.0.0"
 "just-bash" = "^2.10.2"
@@ -175,6 +180,7 @@
 "@storybook/components" = "8.5.1"
 "@storybook/core" = "8.5.1"
 "@storybook/core-events" = "8.5.1"
+"@storybook/csf" = "0.1.12"
 "@storybook/csf-tools" = "8.5.1"
 "@storybook/experimental-addon-test" = "8.5.1"
 "@storybook/instrumenter" = "8.5.1"
@@ -194,24 +200,30 @@
 "@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"
+"@tanstack/history" = "^1.162.0"
+"@tanstack/react-router" = "^1.170.16"
+"@tanstack/react-router-devtools" = "^1.167.0"
+"@tanstack/react-virtual" = "3.13.18"
+"@tanstack/router-generator" = "^1.167.0"
+"@tanstack/virtual-file-routes" = "^1.162.0"
 "@terrazzo/cli" = "2.1.0"
+"@terrazzo/parser" = "2.1.0"
 "@terrazzo/plugin-css" = "2.1.0"
 "@terrazzo/plugin-tailwind" = "2.1.0"
 "webpack" = "5.91.0"
 "webpack-cli" = "5.1.4"
 "modal" = "0.7.2"
 "@axe-core/playwright" = "4.11.0"
 "@bazel/runfiles" = "^6.3.1"
-"@figma/plugin-typings" = "1.121.0"
+"@figma/plugin-typings" = "1.130.0"
 "@figma/widget-typings" = "1.12.1"
 "@formatjs/icu-messageformat-parser" = "^2.11.2"
 "@modelcontextprotocol/ext-apps" = "1.0.1"
+"@modelcontextprotocol/node" = "2.0.0-beta.2"
 "@modelcontextprotocol/sdk" = "1.27.0"
+"@modelcontextprotocol/server" = "2.0.0-beta.2"
 "@opentelemetry/api" = "^1.9.0"
 "@sentry/cli" = "2.58.3"
-"@tanstack/react-virtual" = "3.13.18"
 "@types/jsdom" = "^21.1.7"
 "@types/mocha" = "10.0.10"
 "@types/node" = "22.19.21"
@@ -233,15 +245,18 @@
 "jsdom" = "27.4.0"
 "knip" = "^5.27.3"
 "lightningcss" = "1.32.0"
-"mediabunny" = "1.34.4"
+"mediabunny" = "1.50.3"
 "mocha" = "10.8.2"
 "mocha-junit-reporter" = "2.2.1"
 "postcss" = "8.5.2"
-"prettier" = "3.6.2"
+"prettier" = "3.9.3"
 "puppeteer" = "24.36.1"
 "react-dom" = "18.3.1"
-"react-redux" = "8.0.5"
+"react-redux" = "8.1.3"
 "react" = "18.3.1"
+"redux" = "4.0.4"
+"redux-optimist" = "0.0.2"
+"redux-thunk" = "2.4.2"
 "sharp" = "0.34.5"
 "@img/sharp-darwin-arm64" = "0.34.5"
 "@img/sharp-linux-x64" = "0.34.5"

cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@figma/code-connect",
-  "version": "1.4.9",
+  "version": "1.5.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 @@
     "@babel/types": "7.28.5",
 
 
-    
     "@storybook/csf-tools": "8.5.1",
     "@types/cross-spawn": "^6.0.6",
     "@types/jest": "^29.5.13",
@@ -110,6 +109,7 @@
     "compare-versions": "^6.1.0",
     "cross-spawn": "^7.0.3",
     "dotenv": "^16.3.1",
+    "esbuild-wasm": "0.27.3",
     "fast-fuzzy": "^1.12.0",
     "find-up": "^5.0.0",
     "glob": "^11.0.4",