Code Connect v1.0.3

Fixed

General

React

• Add support for hyphens in prop names (fixes #97)

SwiftUI

• Fixed checkouts folder resolution edge case

Compose

• Fixed issue with create command creating invalid code
• Added import resolution for components

Features

General

• Added support for SwiftUI and Compose in the CLI Assistant
• Added --skip-update-check flag
• Added --label flag to the publish and unpublish commands to publish or unpublish to a custom label
• We now print the label used when running the publish command
• Improved autolinking algorithm

Code Connect v1.0.2

Fixed

General

• Improvements to CLI Assistant

React

• Prevent rendering empty strings as prop values (Fixes: #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: #70)
• Fix boolean-like keys in enums (Fixes: #74)

SwiftUI

• Fix spaces in Xcode file path

Code Connect v1.0.1

Fixed

General

• The 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.

---

Full release notes for 1.0.0

Features

General

• Added documentUrlSubstitutions config option

Jetpack Compose

• Added support for Android Jetpack Compose. See the README to get started

React

• Interactive setup flow, launched by running figma connect, which guides you through the setup process and auto-connects your components

Fixed

General

• Automatic config migration (added in v0.2.0) now correctly preserves include/exclude config options
• Icon script helpers moved to a named export so they can be imported correctly (see README)

React

• Nested helpers within figma.nestedProps now work as expected
• Props can now be rendered in nested object props

SwiftUI

• create now outputs Swift files with the correct syntax

---

Full release notes for 0.2.1

Fixed

React

• 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

SwiftUI

• Fixed parsing of Code Connect files using @FigmaChildren annotations

---

Full release notes for 0.2.0

Breaking changes

• Since 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.

Features

General

• Added --outDir option to connect create to specify output directory for created files

React

• 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

SwiftUI

• Added a new API for prop mapping, using @FigmaString, @FigmaBoolean and @FigmaEnum instead of @FigmaProp. The old syntax is still supported, but we recommend using the new syntax going forward.
• Added support for nested children, using the @FigmaChildren property wrapper
• Added support for rendering single-statement nested Code Connect inline

Fixed

General

• Fixed detection of default git branch name
• Nested components now honour variant restrictions (fixes #54)

React

• Multiline JSX and strings are now supported in figma.enum values
• Added support for objects, JSX and functions in figma.boolean enums
• Imported values referenced from a figma.enum (e.g. values from an object or enum) now render correctly (fixes #55)

Code Connect v1.0.0

Features

General

• Added documentUrlSubstitutions config option

Jetpack Compose

• Added support for Android Jetpack Compose. See the README to get started

React

• Interactive setup flow, launched by running figma connect, which guides you through the setup process and auto-connects your components

Fixed

General

• Automatic config migration (added in v0.2.0) now correctly preserves include/exclude config options
• Icon script helpers moved to a named export so they can be imported correctly (see README)

React

• Nested helpers within figma.nestedProps now work as expected
• Props can now be rendered in nested object props

SwiftUI

• create now outputs Swift files with the correct syntax

---

Full release notes for 0.2.1

Fixed

React

• 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

SwiftUI

• Fixed parsing of Code Connect files using @FigmaChildren annotations

---

Full release notes for 0.2.0

Breaking changes

• Since 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.

Features

General

• Added --outDir option to connect create to specify output directory for created files

React

• 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

SwiftUI

• Added a new API for prop mapping, using @FigmaString, @FigmaBoolean and @FigmaEnum instead of @FigmaProp. The old syntax is still supported, but we recommend using the new syntax going forward.
• Added support for nested children, using the @FigmaChildren property wrapper
• Added support for rendering single-statement nested Code Connect inline

Fixed

General

• Fixed detection of default git branch name
• Nested components now honour variant restrictions (fixes #54)

React

• Multiline JSX and strings are now supported in figma.enum values
• Added support for objects, JSX and functions in figma.boolean enums
• Imported values referenced from a figma.enum (e.g. values from an object or enum) now render correctly (fixes #55)

Code Connect v0.2.1

Fixed

React

• 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

SwiftUI

• Fixed parsing of Code Connect files using @FigmaChildren annotations

---

Full release notes for 0.2.0

Breaking changes

• Since 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.

Features

General

• Added --outDir option to connect create to specify output directory for created files

React

• 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

SwiftUI

• Added a new API for prop mapping, using @FigmaString, @FigmaBoolean and @FigmaEnum instead of @FigmaProp. The old syntax is still supported, but we recommend using the new syntax going forward.
• Added support for nested children, using the @FigmaChildren property wrapper
• Added support for rendering single-statement nested Code Connect inline

Fixed

General

• Fixed detection of default git branch name
• Nested components now honour variant restrictions (fixes #54)

React

• Multiline JSX and strings are now supported in figma.enum values
• Added support for objects, JSX and functions in figma.boolean enums
• Imported values referenced from a figma.enum (e.g. values from an object or enum) now render correctly (fixes #55)

Code Connect v0.2.0

Breaking changes

• 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.

Features

General

• Added --outDir option to connect create to specify output directory for created files

React

• 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

SwiftUI

• Added a new API for prop mapping, using @FigmaString, @FigmaBoolean and @FigmaEnum instead of @FigmaProp. The old syntax is still supported, but we recommend using the new syntax going forward.
• Added support for nested children, using the @FigmaChildren property wrapper
• Added support for rendering single-statement nested Code Connect inline

Fixed

General

• Fixed detection of default git branch name
• Nested components now honour variant restrictions (fixes #54)

React

• Multiline JSX and strings are now supported in figma.enum values
• Added support for objects, JSX and functions in figma.boolean enums
• Imported values referenced from a figma.enum (e.g. values from an object or enum) now render correctly (fixes #55)

Code Connect 0.1.2

Fixed

• SwiftUI: Fix validation for boolean variants.
• React: Support for different types for each boolean value (Fixes #32).
• React: Allow props to be used as object values (Fixes #40).
• Storybook: Allow the Storybook meta default export to be a reference to another variable (Fixes #34).
• Documentation: Update README files to fix typos.

Added

• Storybook: Add source link to code snippets.
• React: Add a signature to figma.connect that excludes the component argument. This allows supporting code snippets that don't use React components, but rather native tags.
• React: Support numbers in enums.
• SwiftUI: Implement figmaApply: a helper function that allows for selective showing & hiding of code based on whether a boolean mapping.
• SwiftUI: Implement 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.

Changed

• React: Update the folder structure in preparation for some future changes.

Code Connect 0.1.1

Fixed

• SwiftUI: Fixed issue with boolean prop rendering.
• React: Added React import statements in files generated with figma create. Thanks @chsmc-stripe!

Added

• React: Added an option to override the imports by passing an 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.
• React: Added support for “partial” props spreading in the example, like example: ({ variant, ...props }) => <Button variant={variant} {...props} />.
• SwiftUI: Added new dry-run command to CLI.

Changed

• React: Moved path and importPath under the react key in the config file.
• SwiftUI: CLI now use --token instead of --access-token for the authentication token flag.
• SwiftUI: Updated config file format.
• Documentation: Updated README files to fix incorrect information and improving readability.
• Renamed some internal functions for consistency.

Code Connect 0.1.0

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.