Reference Figma Design File

[airtonix]

Amazing effort here. 🙏🏻 ❤️

I'm a developer motivated to close the dev/design loop, so I'm tying to wrap my head how best to organise variables/styles in figma and translate that to css.

I'm prototyping this workflow in https://github.com/zenobi-us/shadcn-figma-theemo

So some questions.

Sync

I'm using https://www.figma.com/community/file/1340017605248937608/myna-ui-tailwindcss-shadcn-ui-radix-premium-ui-kit

• It has both variables and styles.
• Some of the variables use other variables.
• The styles use values from the variables.

So my first impression is that I express these as core, primitive and usecase variables:

• core: are the raw values
  • example --color-red-100: red;
• primitive are any simple values that are aliases for core values
  • example --background: var(--color-red-100);
• use case are items that are used in specific places, most commonly components in a component library.
  • example --drawer-background: var(--background);

Other considerations needed would be :

• is it a colour? does it have modes? light / dark
  • core values wouldn't have modes, but primitives and usecase would

Build

But now here's where I'm floundering :

what are the specifics needed to successfully take all the above organisation and get Theemo to create something that Style Dictionary wants?

All of this is to say, it would be great if your documentation website could point to a Figma Document that we can clone and experiment with to fully realise the end to end workflow.

I personally would require a bit more concrete examples rather than abstract concepts.

even links to external documentation might be enough

[gossi]

Hey,

thanks for your interest and great comment. I looked at your repo (and I really like the github action sync).

Ad Sync

The data/properties of a token vary from system to system. It's up to the interpretation of its system, as such Theemo has hooks for you to express that, and I see you are already doing that 👍

From what I grasp, yes in your example, the palette might not have color schemes, but the others might have (I didn't open the Figma file). However, at this point this should already all be handled in Figma, Theemo translates them to json files with the metadata relevant to you.

Here is two samples from me (for some inspiration):

• https://github.com/theemo-tokens/theemo/tree/main/themes/super-theemo
• https://github.com/hokulea/hokulea/tree/main/themes/moana (this one is using an old version of Theemo, though the sync is at todays level, the build isn't)

Ad Build

Maybe you need to get familiar with Style Dictionary here ? But probably give it a go and dance with the config. What I noticed is the name of the token should follow the DTCG standard with either . or using nested objects (the / will probably cause you problems).

Docs / Example

That's a great idea, also for the Theemo Figma Plugin page. I will put it on my list, but will take some time to work it down.