- Added support to create Custom parsers. Those allow users to add support for languages which aren't natively supported by Code Connect. Check the documentation for more details.
- Only show AI question for React
- Fix error in autolinking in reduce function
- Added a
--exit-on-unreadable-filesflag to all commands to exit if any Code Connect files cannot be parsed. We recommend using this option for CI/CD.
- Fixed a bug introduced in 1.2.0 where
nestedPropsreferencing a hidden layer would result in an error rendering Code Connect
- Fixed potential "index is out of bounds" error.
- Changed how the extension makes HTTP requests to resolve issues when connecting through a proxy. Please submit a support ticket if you continue to have connection issues after this update.
- Fixed some parsing errors when running the
createandpublishcommands
-
The 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
- Added support for returning strings or React components from the
examplefunction, in addition to JSX - Added
getPropsonfigma.instance()which can be used to access props of a nested connected component - Added
renderonfigma.instance()which can be used to render a nested connected component dynamically - Added support for including any custom props in the
propsobject, that can be accessed withgetPropsin a parent component
- Case of attribute names is now preserved to support Angular (fixes figma#172)
- Fixed a bug with
nestedProps(fixes figma#176)
- Fixed a Prettier bug with the interactive setup
- Removed empty enum mappings from generated Code Connect in interactive setup
- Fixed an issue with props not rendering correctly in the Figma UI if used in the body of a component (e.g. as a hook argument). Any Code Connect with this issue will need republishing to be fixed. (fixes figma#167)
- Support mapping from an enum value to a boolean prop in CLI Assistant
- The dependencies required to author Code Connect files now live in a separate module from the plugin and are hosted on Maven Central. Refer to the documentation for updated instructions on adding Code Connect to your project.
- Updated the swift-syntax dependency to include 600.0.0 (Swift 6)
- Fixed an issue where
importswas incorrectly not included in the TypeScript interface - Added a note in the documentation that HTML support requires
moduleResolution: "NodeNext"
- Fixed an issue where
importswas incorrectly not included in the TypeScript interface (fixes figma#159)
- Code Connect files created in the CLI assistant will now start try to use auto-generated prop mappings in the component props. This is an early feature and support for different types is limited.
- Fixed an issue with
clientexport used by the icon script (fixes figma#156)
- Fixed an issue where the
@figma/code-connect@1.1.0npm package had an incorrect README
-
Added support for documenting HTML-based frameworks (including Web Components, Angular and Vue), using the new
htmlparser. 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.
- Added a
swiftPackagePathconfiguration option to specify a custom path to aPackage.swiftfile to run Code Connect from.
- Code Connect files created in the CLI assistant will now start including some auto-generated prop mappings between Figma properties and linked code props. This is an early feature and support for different prop types is limited.
- Restructured the Code Connect documentation. All documentation can now be found in the docs directory.
figma.nestedPropscan now be used in conjunction withfigma.booleanfor conditionally hidden nested instances (fixes figma#118, figma#89)- Fixed an issue where backticks could not be used in the example code (fixes figma#139)
- Fixed an issue with wildcard paths in import mappings
- Fixed an error when trying to use the icon script with component sets
- Fixed issue where props with special characters such as hyphens would not render properly. (figma#116)
- figma.enum now supports floating point numbers
- Update the dependency for Code Connect to use Kotlin 2.0 libraries
- Fixed an issue around creation of Code Connect files from the CLI assistant (fixes figma#125)
- Fixed rendering of identifiers, functions and objects when used as children
- Updated the
componentdefinition in FigmaConnect protocol to be optional and have a default implementation.
- Added a more helpful error message when the JDK version is too low.
- Added error message to suggest splitting publish when request too large
- CLI assistant support for selecting file exports to use in Code Connect template
- New --batch-size argument for publish command in order to split uploading into smaller "batches". This will allow for large uploads without having to split running the publish command with different directories.
- Add support for hyphens in prop names (fixes figma#97)
- Fixed
checkoutsfolder resolution edge case
- Fixed issue with
createcommand creating invalid code - Added import resolution for components
- Added support for SwiftUI and Compose in the CLI Assistant
- Added
--skip-update-checkflag - Added
--labelflag to thepublishandunpublishcommands to publish or unpublish to a custom label - We now print the label used when running the
publishcommand - Improved autolinking algorithm
- Improvements to CLI Assistant
- Prevent rendering empty strings as prop values (Fixes: figma#67)
- Fix output when there are multiple return statements
- Fix wildcard importPaths mappings with nested folders
- Fix boolean mappings for lowercase boolean-like strings (Fixes: figma#70)
- Fix boolean-like keys in enums (Fixes: figma#74)
- Fix spaces in Xcode file path
-
The automatic update check introduced in v1.0.0 did not show the correct update command for React users with the
@figma/code-connectpackage installed locally – it always showed the command for globally updating the package.We now show both
npm install @figma/code-connect@latestandnpm install -g @figma/code-connect@latestas options. React users with the package installed locally should usenpm install @figma/code-connect@latest, and users of other targets (or with the package installed globally) should usenpm install -g @figma/code-connect@latest.We have temporarily removed the
updatecommand added in v1.0.0.
- Added documentUrlSubstitutions config option
- Added support for Android Jetpack Compose. See the README to get started
- Interactive setup flow, launched by running
figma connect, which guides you through the setup process and auto-connects your components
- Automatic config migration (added in v0.2.0) now correctly preserves
include/excludeconfig options - Icon script helpers moved to a named export so they can be imported correctly (see README)
- Nested helpers within
figma.nestedPropsnow work as expected - Props can now be rendered in nested object props
createnow outputs Swift files with the correct syntax
- Fixed a bug in v0.2.0 where source paths for components could be incorrect
- Fixed a bug in v0.2.0 where Code Connect files using the new prop types failed to validate
- Fixed parsing of Code Connect files using
@FigmaChildrenannotations
-
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.0by 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.jsonor.xcodeprojfile), and you will need to update it to remove the top levelreactorswiftuikey. 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.
- Added
--outDiroption toconnect createto specify output directory for created files
- Added support for nested properties, using
figma.nestedProps - Added support for concatenating strings for CSS class names, using
figma.className - Added support for text content from layers, using
figma.textContent - Added support for wildcards with
figma.children
- Added a new API for prop mapping, using
@FigmaString,@FigmaBooleanand@FigmaEnuminstead of@FigmaProp. The old syntax is still supported, but we recommend using the new syntax going forward. - Added support for nested children, using the
@FigmaChildrenproperty wrapper - Added support for rendering single-statement nested Code Connect inline
- Fixed detection of default git branch name
- Nested components now honour variant restrictions (fixes figma#54)
- Multiline JSX and strings are now supported in
figma.enumvalues - Added support for objects, JSX and functions in
figma.booleanenums - Imported values referenced from a
figma.enum(e.g. values from an object orenum) now render correctly (fixes figma#55)