Syncing variables with Figma

[nekitk]

Another part of the project could be Figma page with color and size variables. We could either sync from config to Figma or read variables from Figma into config. Seems like it could be achived via Figma plugins.

References:

• https://github.com/react-figma/react-figma
• https://github.com/builderio/figma-html
• https://github.com/LekoArts/figma-theme-ui
• https://github.com/ecklf/tailwindcss-figma-plugin

[nekitk]

Options if we want code to be the source of truth:

1. Utilize Figma Tokens plugin Convert dsgen config to a JSON file compatible with Figma Tokens. We'll need to manually update this JSON in Figma or sync it via jsonbin.io integration.
2. Selfmade plugin
   • We can make our own plugin similar to Tailwind and Theme UI ones. We'll accept dsgen config as json as an input and create color styles from it.
   • We may create type styles too but Figma's type styles include font, weight size, line height altogether so we'll need to create a style for each combination

[nekitk]

Seems convenient to write dsgen config looking at design tokens page in Figma: https://www.figma.com/file/VDUpuf2P6uHwUkEaFVTChsch/CSSSR.Tracker?node-id=2864%3A51194

Maybe we should consider design as the source of truth also.

[nekitk]

It could be beneficial to not only import variables into Figma, but also autochange absolute values to variables (as we do with CSS). E.g. if text node has color #000 we can change it to use style Light/Text/Default