Code Connect

Code Connect is the developer bridge from your component codebase to Figma. With Code Connect, bring your design system component code directly into Figma's Dev Mode. Preview example components that mirror the framework of your production code.

When using Code Connect, Dev Mode displays real world code snippets defined by your design system instead of the autogenerated code snippets that Dev Mode provides by default. In addition to connecting component definitions, Code Connect can also map properties from code to Figma, enabling dynamic and correct snippets.

Code Connect is especially useful when you have an existing design system and want to drive consistent and correct adoption of that design system across design and engineering.

Overview

The exact steps you take to set up Code Connect depend on the architecture of your design system and codebase. For example, if you use SwiftUI, you'll plan your approach to use the SwiftUI resources we provide.

Generally, your organization will follow these steps to get started:

1. Plan the implementation. Usually this includes:
   • Identifying the requirements of your front-end developers, such as whether you need support for React or SwiftUI.
   • Identifying the components in your codebase that you want to integrate with Dev Mode.
   • Planning the configuration of Code Connect and the mappings of your components.
2. Get the Code Connect repository. Code Connect supports:
   • React (or React Native)
   • HTML (Web Components, Angular, Vue, etc.)
   • SwiftUI
   • Jetpack Compose
3. Implement the component mappings. The exact way you build the mappings will depend on your codebase and design system, but broadly the process involves mapping properties from your design system components to properties in Figma. This allows Code Connect to generate snippets of code that map the values in Figma to the architecture of your components, and then surface those snippets inside Dev Mode.
4. Review in Dev Mode. In Dev Mode, review the Code Connect output with your developers and designers to ensure the practical usability of the component examples and that the representations are accurate.

To take full advantage of Code Connect, the developers responsible for your design system components should work with your designers to implement the mappings from your production codebase to Figma.

What's available?

To get started with Code Connect, check out the detailed steps we provide in the Code Connect developer documentation.

Code Connect supports:

• React (or React Native)
• HTML (Web Components, Angular, Vue, etc.)
• SwiftUI
• Jetpack Compose

Additionally, Code Connect provides some advanced features:

• Integration with Storybook
• Custom parsers
• Template API

The Code Connect repository is available on GitHub.

Privacy and Code Connect

Figma only collects the minimum data needed to enable Code Connect in the interface. When you run figma connect using the Code Connect command-line interface, Figma gets the following data: 

• The paths for components that are added
• The repository URL where the Code Connect components are implemented
• The properties and code in the .figma files

Figma logs only basic events for understanding Code Connect usage: when components are published or unpublished, and calls to get Figma data when using the command-line interface.

For more information about Figma's approach to privacy, see Figma's Privacy Policy.