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)Added 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)@figma/code-connect@1.1.0 npm package had an incorrect READMEcomponent 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 annotationsSince 0.2.0 Code 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)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 annotationsSince 0.2.0 Code 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)@FigmaChildren annotationsSince 0.2.0 Code 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)Code 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)figma.connect that excludes the component argument. This allows supporting code snippets that don't use React components, but rather native tags.figmaApply: a helper function that allows for selective showing & hiding of code based on whether a boolean mapping.hideDefault: allows a user to specify properties in which the default values should be hidden. This can be seen as being used to represent a subset of what's provided by figmaApply.figma create. Thanks @chsmc-stripe!imports key in the object argument to figma.connect. This just takes an array of strings, and is intended as an escape hatch for cases where we can’t determine the imports properly yet.example: ({ variant, ...props }) => <Button variant={variant} {...props} />.dry-run command to CLI.path and importPath under the react key in the config file.--token instead of --access-token for the authentication token flag.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, Storybook and SwiftUI.