[RFC]: Syncing Design Tokens Between Figma and UI Kit

[sashathor]

Summary

The Foundations in Figma include all the essential design tokens for our Design System, such as the color palette, spacing, shadows, typography, etc. We need to establish a reliable and efficient method to sync the Foundations with the UI Kit.

What's the problem?

The initial synchronization was completed manually, which proved to be unreliable, labor-intensive, and not very scalable. Fortunately, most of these tasks should be easy to automate.

What are the requirements?

• Export Design Tokens from Figma.
• Convert Design Tokens into UI Kit formats (CSS and TS).
• Compare existing UI Kit tokens with Design Tokens from Figma. Flag any mismatches with an error.

Detailed design

The sync process involves two main steps:

1. Exporting Design Tokens from Figma.
2. Parsing the tokens into UI Kit's format.

The export step can be achieved by using a free plugin to export variables from Figma as JSON We could implement the parsing step similarly to how we generated types. The script would parse the JSON, update the common design tokens SCSS, and refresh the type definitions.

Additionally, we could create a checker to scan all SCSS files in the codebase. This would detect any discrepancies between the token list from Figma and the current tokens in the codebase. For example, if --propel-border-color exists in the codebase but not in the JSON, it would throw an error.

Drawbacks

No response

Alternatives

The export step can also be achieved by using Figma's API, which requires a paid Enterprise subscription. For simplicity, I recommend starting with the JSON export and exploring a fully automated solution later.

Adoption strategy

No response

Unresolved questions

No response