[Meta] Code Connect

[weronikaolejniczak]

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.

Source: https://github.com/figma/code-connect?tab=readme-ov-file#code-connect

A PoC has been conducted. See: #8068.

Demo

Short video demo here.
Figma file here.

Benefits

• Easier hand-off of product designs between designers and developers.
• The possibility to encourage best practices with EUI components usage.

Tradeoffs

• Code Connect requires significant maintenance. In case any control is changed in Figma, it needs to be reflected in the code.
• For fully-fledged connection, a new file has to be added and maintained.
• Not everything can be reflected in the code snippets, especially if its technical and / or functional that Figma controls don't cover.

Limitations

• It's not possible to map design tokens.
• It's hard to implement icon mapping.
• It's not possible to easily map typography components (assuming Figma uses typography styles).

Blockers

Currently, the initiative is blocked because of the new component library in Figma. Code Connect works on mapping to main components ids. We need to assure those ids are stable, in other words the designs for a specific component are finalized, to implement the connection.

To make the connection easier, the controls in Figma should be consulted with a developer. Some type of controls are harder to map to. See the PoC for details.

The Code Connect coverage will grow as the usage of the new component library grows.