Code Connect
$
npx @buildinternet/releases get figma-code-connectMon
Wed
Fri
SepOctNovDecJanFebMarAprMayJunJulAugSep
LessMore
Releases7Avg2/moVersionsv1.4.8 to v2.0.1
Last Checked
15h ago
npx @buildinternet/releases get figma-code-connectfigma connect preview now accepts the template file of a component declared in a .figma.batch.json file. Previously it rejected the template path with "Not a valid Code Connect file", so the only way to preview a batch component was to preview every component in the batch file at once.Warning
Framework-specific parsers will no longer receive updates or support. Template files are now the only actively maintained way of using Code Connect. See our migration guide for more information and instructions on migrating parser-based Code Connect: https://developers.figma.com/docs/code-connect/templates-migration-guide/
figma connect migrate and figma connect unpublish. Other commands exit with guidance to migrate parser-based Code Connect to template files. If you wish to continue using framework-specific parsers, install Code Connect v1 with npm install --save-dev @figma/code-connect@1.figma connect previewfigma connect preview <file> --unique, which is similar to --all but hides duplicate outputs.id to InstanceHandle to expose the instance's Figma node ID. It matches the Plugin API's SceneNode.id, including stable paths for nested instance sublayers.import figma from 'figma' publishing an unexecutable import.Warning
Framework-specific parsers will no longer receive updates or support from August 17th, 2026. Template files will be the only actively maintained way of using Code Connect. See our migration guide for more information and instructions on migrating parser-based Code Connect: https://developers.figma.com/docs/code-connect/templates-migration-guide/
--delete option to figma connect migrate that deletes source Code Connect files after they are successfully migrated../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.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.parserCommand referencing a path with spaces)..figma.ts/.figma.js), the CLI no longer invokes the Swift or Compose parser — which is slow at best and can fail outright (for example a Swift package targeting macOS 12 whose Figma dependency requires macOS 13, producing "the library '...' requires macos 12.0, but depends on the product 'Figma' which requires macos 13.0"). Projects that also contain native source files are unaffected and still run the parser.swift-syntax upper bound to allow the 603.x release. Previously the cap below 603 could silently downgrade swift-syntax in projects that depend on both Code Connect and swift-syntax (directly or transitively) on a Swift 6.3 toolchain. Older toolchains remain supported.@figma/code-connect/figma-types-no-require, a variant of the template type definitions for projects that have @types/node installed. The default @figma/code-connect/figma-types entry declares a global require (so const figma = require('figma') works without @types/node), but that declaration overrides Node's own require type and causes errors like Property 'resolve' does not exist on require.resolve(...) elsewhere in projects that use @types/node. Such projects can now use "@figma/code-connect/figma-types-no-require" in their types array instead, adding it to their main tsconfig.json without a separate config. The default entry is unchanged, so no existing setup needs to change.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).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 }.@figma/code-connect in Storybook or webpack environments would fail with "Can't resolve 'child_process'" or "Console is not a constructor" errors. Node.js-only modules (child_process, console) are now imported dynamically only when needed by CLI commands, making the package safe to use in browser environments.getInstanceSwap(...)?.executeTemplate is not a function" error that could break a template when getInstanceSwap('prop') referenced an instance-swap property that isn't present on the selected node (for example a property that is conditionally hidden by a boolean). The missing property now renders an inline error, consistent with the other accessors, instead of failing the whole template.figma.textContent('...') helper) producing a TypeScript error and silently rendering nothing when the layer was missing. Migration now preserves the original behavior — the text renders when the layer is found, and a clear error is shown when it isn't.figma connect migrate command now uses the same --dir and --file filtering behavior as publish, parse, and unpublish. The migrate-only positional glob argument has been removed.figma connect migrate command can now migrate compatible large source files into batch template files. Files with 10 or more Code Connect docs are attempted automatically, --batch all forces a batch attempt, and --batch none disables batch migration.--file (-f) option on figma connect publish, unpublish, and parse now accepts multiple files, so you can target several Code Connect files in one command (e.g. figma connect publish --file a.figma.ts b.figma.ts). Previously only a single file path was accepted.publish command to reduce 429s errors--verbose, --token, --config, --dir, --file, --out-file, --out-dir, --api-url, --skip-update-check, --exit-on-unreadable-files, --dry-run) now work whether you write them before or after the subcommand name. Previously, only figma connect publish -v toggled verbose mode; figma connect -v publish was silently ignored.parseCodeConnect / createCodeConnect failing in multi-module Gradle projects when the plugin is applied to more than one subproject. The task now resolves the -PfilePath/-PoutputDir arguments against the root project so every subproject finds the input the CLI wrote at the build root.--configuration-cache caused an opaque serialization error; the tasks now store and reuse the configuration cache entry as expected.preview command now prints a clearer single-line message if the preview service is temporarily unavailable, instead of repeating a per-file error.figma connect preview now splits requests into smaller chunks when previewing many components at once, so previews of large component libraries no longer fail with “Payload Too Large” errors..ts, .jsx, or .js extensions (e.g. Button.stories.jsx) are now discovered by the CLI. Previously only .stories.tsx files were picked up.--exit-on-unreadable-files is now respected for template files (.figma.ts / .figma.js)--force flag to figma connect publish. When Figma already has UI-created Code Connect mappings for one or more nodes, publishing will now show a warning instead of failing silently. Use --force to overwrite those existing mappings with the Code Connect files from your codebase.connect create command can now generates template files.preview command: you can now run npx figma connect preview {fileUrl} to locally preview a Code Connect file without having to publish it..figma.batch.json + .figma.batch.ts). A batch file defines a shared template and an array of component entries, allowing hundreds of similar components (e.g. icons) to be Code Connected without individual template files. Per-entry data is available in the template via figma.batch.getBoolean() returning undefined instead of false when a boolean property is set to false in a template file.figma.* API in template files--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).migrate command now outputs TypeScript (.figma.ts) files by default. Pass --javascript to output JavaScript (.figma.js) files instead.migrate command now outputs import figma from "figma" (ESM syntax) when using the --typescript flagmigrate command now removes __props metadata blocks by default. Pass --include-props to preserve them.documentUrlSubstitutions when one key is a prefix of another (e.g. SearchInput and SearchInputMenu). The CLI now processes longer keys first so the correct substitution is applied.--batch-size now retries automatically on rate-limit (429) and server error (5xx) responses, respecting the Retry-After header when present, rather than failing immediately.figma.js/.figma.ts files being incorrectly treated as template files--include-template-files flag now shows a deprecation warning instead of causing an error. The flag is no longer necessary as template files are automatically included by default.master/main. For cases where it can't be detected automatically, you can set defaultBranch in your figma.config.json.migrate script. These are inlined into one template file with if/else blocks..figma.template.ts / .figma.ts).
import figma from 'figma'import type) are supportedfigma API, add "@figma/code-connect/figma-types" to the types array in your tsconfig.json.migrate command. Can pass --javascript to output JavaScript (.figma.js) files instead.source valuefigma.slot() to map Figma slot layer properties in Code Connect files.figma connect migrate..figma.js instead of .figma.template.js. The old .figma.template.js extension is still fully supported for backwards compatibility.--include-template-files flag. Template files (.figma.js and .figma.template.js) are now always included when detected.instance.getSlot(name) in templates to reference "slot" properties.component and source comment fields (e.g., // component=Button)apiUrl fieldlanguage config option to override syntax highlighting language in figma.config.jsoncreate commandlibs.versions.toml Kotlin version to 2.2.21.unpublish command showing success message in certain cases where the action didn't complete properlty.swift-syntax dependency to include support for 602.0.0. Thanks to @luispadron for the PRnpx connect unpublish --node to require a --label param so it can unpublish any label type.swift-syntax to support 602.0.0. Thanks to @luispadron for the PR--verbose is enabled for improved debugging.swift-syntax to support 601.0.1.--verbose command to output detailed stacktrace.interactiveSetupFigmaFileUrl to the interactive setup, allowing you to specify the Figma file to use for connecting components in your figma.config.json file.--include-raw-templates flag to --include-template-files. Further details of this feature can be found in the documentation.swift-syntax to point to the new URL. Thanks to @pontusJPaf for the PR.@FigmaEnum declarations in SwiftUIfigma.booleanlinks and imports (fixes https://github.com/figma/code-connect/issues/142)props would serialize to strings when accessed with getProps()figma.boolean and getProps--exit-on-unreadable-files flag to all commands to exit if any Code Connect files cannot be parsed. We recommend using this option for CI/CD.nestedProps referencing a hidden layer would result in an error rendering Code Connectcreate and publish commandsThe interactive setup now offers AI support for accurate prop mapping between Figma and code components. Users will now be given the option to use AI during the setup process, which if chosen will assist in creating Code Connect files and attempting to accurately map your code to Figma properties.
Data is used only for mapping and is not stored or used for training. To learn more, visit https://help.figma.com/hc/en-us/articles/23920389749655-Code-Connect
example function, in addition to JSXgetProps on figma.instance() which can be used to access props of a nested connected componentrender on figma.instance() which can be used to render a nested connected component dynamicallyprops object, that can be accessed with getProps in a parent componentnestedProps (fixes https://github.com/figma/code-connect/issues/176)imports was incorrectly not included in the TypeScript interfacemoduleResolution: "NodeNext"imports was incorrectly not included in the TypeScript interface (fixes https://github.com/figma/code-connect/issues/159)client export used by the icon script (fixes https://github.com/figma/code-connect/issues/156)@figma/code-connect@1.1.0 npm package had an incorrect READMEAdded support for documenting HTML-based frameworks (including Web Components, Angular and Vue), using the new html parser. See the documentation for more information.
HTML support for Code Connect is in preview, and the API is liable to change during this period. Please let us know your feedback via GitHub Issues.
swiftPackagePath configuration option to specify a custom path to a Package.swift file to run Code Connect from.figma.nestedProps can now be used in conjunction with figma.boolean for conditionally hidden nested instances (fixes https://github.com/figma/code-connect/issues/118, https://github.com/figma/code-connect/issues/89)component definition in FigmaConnect protocol to be optional and have a default implementation.checkouts folder resolution edge casecreate command creating invalid code--skip-update-check flag--label flag to the publish and unpublish commands to publish or unpublish to a custom labelpublish commandThe automatic update check introduced in v1.0.0 did not show the correct update command for React users with the @figma/code-connect package installed locally – it always showed the command for globally updating the package.
We now show both npm install @figma/code-connect@latest and npm install -g @figma/code-connect@latest as options. React users with the package installed locally should use npm install @figma/code-connect@latest, and users of other targets (or with the package installed globally) should use npm install -g @figma/code-connect@latest.
We have temporarily removed the update command added in v1.0.0.
figma connect, which guides you through the setup process and auto-connects your componentsinclude/exclude config optionsfigma.nestedProps now work as expectedcreate now outputs Swift files with the correct syntax@FigmaChildren annotationsCode Connect now uses a single CLI tool for all supported targets. This ensures consistency and feature parity, and provides the foundations for our upcoming Android Compose and extensibility support.
For Code Connect Swift users, you should follow the updated CLI installation instructions to install the new CLI version, and update your Code Connect Swift package to v0.2.0 by following the Swift installation instructions.
For Code Connect React users, no change to installation is necessary, and you can simply update the npm dependency to v0.2.0.
If you have a Code Connect configuration file, you will need to ensure it is located in your React or SwiftUI project root (e.g. alongside your package.json or .xcodeproj file), and you will need to update it to remove the top level react or swiftui key. The Code Connect CLI will offer to update your config file for you, but in unusual cases a manual migration may be necessary. This allows us to simplify configuration going forward, as each target now has its own configuration file, situated in the project root.
Please let us know via GitHub Issues if you encounter any problems.
--outDir option to connect create to specify output directory for created filesfigma.nestedPropsfigma.classNamefigma.textContentfigma.children@FigmaString, @FigmaBoolean and @FigmaEnum instead of @FigmaProp. The old syntax is still supported, but we recommend using the new syntax going forward.@FigmaChildren property wrapperfigma.enum valuesfigma.boolean enumsfigma.enum (e.g. values from an object or enum) now render correctly (fixes https://github.com/figma/code-connect/issues/55)