Create a Design System with Turborepo, React, Tailwind — connect it to Figma variables (2/3)

Figma Design

Set up a new Figma Design for our freshly creates Design System of Part 1. We will give new Variables in Figma a chance to become the backbone of of our Token ehm. variables workflow. I must admit I haven’t work that much with Figma variables and use this tutorial to skill me up. Same to Turborepo, Tailwind. I have a DS up an running on Figma, Token Studio, NX as Monorepo, Radix UI and SCSS. And love NX, Radix/headless approach much over MUI and lerna/yarn workspaces.
We fall back to SCSS due to the update in React 18 and problems with CSSinJS for SSR/Streams. Maybe I will give PandaCSS a try in a later attempt and promise will post it here or on my youtube channel. Back to Figma.

As normal in my current workflow for DS Components I create a hidden Base Component (. or _ prefix named ). Add all features to this base component and use the feature of properties delegation in Figma much.To keep it simple create a new frame for our button component.

Base Button component (.Base)

Give it auto layout and add padding a text frame and create a text property for the label.

Button label text property

Variables

Now start to create core (global/base) like brand colors, dimension variables. In a new Collection I named it base. Core, global is also fine.

Base variable Collection

Next I create the Semantic level for our Design System. On this level I try to link everything up to the base variables. Due to the fact Variables is still in beta I miss a lot of features that we use in Figma Token Studio much; just to name some W3C structure, Font, Typography, color transforms (in paid version), mathematics…. So quite some. Hey Figma, make some W3C compliant Tokens! But give it a try is the idea. Maybe we leave this train and fall back to Token Studio. We’ll see. So here are my Semantic Tokens we will use in this tutorial.

Semantic variables.

As you might see, everything is linked to our base variables.

Now we use one instance of our .Base Button to create the actual design. Create the different variants (Ghost, Solid, Link in 3 T-Shirt sizes s, m, l)

Button variant

Here you can see how to connect the Semantics with a particular Button variant. e.g the Large Button Height is conneted with the dimension-l Variable which is uplinked to one base variable dim.48

Start with one variant, connect the semantic for color, border, fill, height and spacing. Doing its easier to change the values for the next variant.
Don’t forget to set autolayout and hug for the other frame.

Now we have, name it, a popper design. Woohoo.

Exporting Variables

As promised we want to use this variables in our tailwind config. Normally Ipush my tokens to git and use Style Dictionary as transformer to convert it to CSS variables. This time I need something else. Figma now provides the dev Tools and a VS Code plugin to archive this. So I installed the VS Code plugin and to me… useless stuff. no bulk export. Just an embedded mixture of Chrome Dev Tools and the actual design in figma.. stealing space in my IDE. Minmal maximal useless. Sorry! So try another way. I stumbled upon a plugin. Variables Import Export by Magic Grass and give it a shot.

Import Export Variables Plugin by Magic Grass

I am not able to export it to disk, just able to copy&paste it out of the plugins UI. but it looks more usable than the Figma API provides as JSON export. Reminds me of Figma Token Studio export JSON and is maybe usable in Style Dictionary

Thats it for today. Next time we try to convert it to something we might use in Tailwinds config file.

Part 1: Turborepo
Part 3: Tailwind