Design to Code: Figma Variables to React JS Design System

In this quick tutorial, I want to show you how you can export your Figma variables to JSON file and then create a design system file in uh cursor and

create a web app using your design system to show all your components in React. Hi, my name is Sergey and welcome

React. Hi, my name is Sergey and welcome to my channel. I'm a creative director.

I teach Figma, framer, and AI vibe coding. So, don't forget to subscribe to

coding. So, don't forget to subscribe to my channel if you haven't already and like the video if you like it. And now

let's go do some vibe coding. So I have a project opened already. As you can see this is a simple design system. Uh

actually I have a separate video on my channel about how to set it up, how to use variables. Uh very detailed. So be

use variables. Uh very detailed. So be

sure to check it out. I'll leave uh the link to it in the description below. And

also I will leave uh the link to this file. So um get it right now so you can

file. So um get it right now so you can follow along with me. uh and um uh let's get started. All right. So first of all

get started. All right. So first of all uh what we need to understand is that this file is has variables already and if you copy this file or if you go to

the link uh please duplicate it to your drafts uh and you will see the file in your drafts here. So basically I even have this uh little tutorial uh in the

file. So you just duplicate it. After

file. So you just duplicate it. After

this, you will be able to see old variables and you will be able to use them. Let's check them out. So, we go to

them. Let's check them out. So, we go to variables on the right and we'll see what I have done here. I did like a huge job. So, I saved you a lot of time,

job. So, I saved you a lot of time, guys. You don't you can't even believe

guys. You don't you can't even believe how much time you I have saved you. Uh

so, basically I have three collections here. One is for typography. And here we

here. One is for typography. And here we can see I have like different groups and this is super important. And so I have a group for body fonts, for headings, uh

and uh this is for font sizes. Uh this

is for line height. Uh and it is all different. So for body

different. So for body uh for font size, body I have small, medium, large. Uh also I have three H's.

medium, large. Uh also I have three H's.

This is three um headings. So basically

this is H1, H2 or three. You you can have more. You can add more if you want.

have more. You can add more if you want.

uh and um I've separated everything uh by these groups so it's easier for me to use and here you can see that I'm using scales right so uh I use specific

numbers for my headings and for my fonts and these come from my base collection so in base collection I have this thing called scale and here I've added all the

numbers I'll be using in my design system so basically from zero to 200 100 and where I can also use this. If I go

back to aliases, you can see that I have like colors here for my texts and also what I have here I have sizes and in sizes I have spacing, radius and border

and here I use my scales. So basically

for spacing I have for example spacing SP 16 I have the scale 16. Right? So

this is similar to Tailwind but sometimes you don't need a Tailwind file because it has a lot of stuff inside. Uh

you need to build your own design system for your particular project. So maybe

you don't even need all of these numbers. Maybe you will use only four.

numbers. Maybe you will use only four.

But in any case um you need to use variables for your design system. This

is crucial right now because we're using we'll be using AI uh and uh it's easier just for even developers like to use variables um to understand um how your

uh components and how your design is made up. Um you probably heard of design

made up. Um you probably heard of design tokens. Uh so basically this is the same

tokens. Uh so basically this is the same thing. So design tokens are it's it's

thing. So design tokens are it's it's like variables that are used in in the file.

Uh so again uh going back to bass I have also color and here I have colors uh similar to tailwind uh from 100 to 900 where the 100 is the lightest one and

900 is the darkest one and uh this is like the base again base colors and if I go back to aliases I have uh colors here

and here exactly I um show what colors is used for what. So basically I have a group text and in group text I have headings, I have a body, I have link and

I show what kind of uh variables and color variables I used for uh particular case like for link color for the

information for warnings and for errors and I have like three states light, dark and default. So um this is uh one thing

and default. So um this is uh one thing and another thing is that what colors are going to be used in my design system for icons. So I have the same thing

for icons. So I have the same thing here. So I have main error disabled

here. So I have main error disabled information and I show colors here. So

this thing is set up. Uh the only probably uh thing that left is to show you like the color spacing, color

spacing, radiuses. I have everything set

spacing, radiuses. I have everything set up. And even if you go to um scope, you

up. And even if you go to um scope, you can see like what kind of scope is used.

For example, in my border, of course, I use only uh border. I use only stroke for this uh for this alias. All right.

Um yeah. So this is ready. So basically

we have everything here. Um this is just like the colors that I have used in the project and uh I used this to build this design system. So you can check this out

design system. So you can check this out in the other video. Right. Um and here you can see that I'm using all the variables for all these uh colors. And

here it's just like a structure. Uh we

don't need it right now. So

I hope you understand how this project is made up. And here just one more thing. I'm just showing how it looks in

thing. I'm just showing how it looks in terms of um typography. Here are the headings, three headings. And here is the text paragraph. And also I have

styles. Text styles and text styles are

styles. Text styles and text styles are using variables as well. But check out the other video and where I go into details how to do this. All right. So

now is the time to build our design system um for developers. So previously

to get your design tokens uh and to to export your variables, you need to use a special plugin uh from the marketplace Figma marketplace. But now uh you can

Figma marketplace. But now uh you can actually export them right straight from Figma. Uh let me show you how to do

Figma. Uh let me show you how to do that. So um basically what we need to do

that. So um basically what we need to do we need to go to the dev mode again right uh we need to open our open variables uh table and here you will see

my collections and in the collections uh you need to click rightclick and you will see export

modes and when I click export now I can download the zip file for each collection. Yeah, it's uh uh kind of you

collection. Yeah, it's uh uh kind of you know takes a bit of time to to export all the collections. So if you have everything in one collection, it's going to be much easier. But for me, it's

better to use different collections in my design system. Uh especially while I still uh work with uh with design.

All right. Now we need to um export uh the zip files and get the the files uh from them and organize everything in

cursor. All right. So I have uh a folder

cursor. All right. So I have uh a folder for my project and here I have all the zip files. Now I need to open them and

zip files. Now I need to open them and uh I can after that I can delete all the zip files and I will leave JSON um

tokens here. So I have like three of

tokens here. So I have like three of them, right? Uh and when I go to the

them, right? Uh and when I go to the cursor, you will see that I already have the files here. Um and they're different. So in the first one, I'll

different. So in the first one, I'll have the my typography stuff. Uh and uh in this third one, I will have colors.

And the first one, I don't know what this is. Oh, probably this is the base

this is. Oh, probably this is the base um uh the base um collection that I had. All right. Uh

so what what I need to do now um since I have three different files uh I want to combine them right so well I will go to

my agent mode um sonet 4.5 is fine and I will tell them combine all three um JSON files into one uh to get all the tokens

there. All right so combine all three

there. All right so combine all three JSON files to create one master design system file. Let's check it out. JSON or

system file. Let's check it out. JSON or

JavaScript object uh notation is a lightweight format used to store and exchange data. Uh it represents data as

exchange data. Uh it represents data as a key value pairs in a text format that is easy for both humans and machines to

read and write. Basically uh it looks like a list of parameters as you can see it on the screen right now. And while

cursor is working, I just want to remind you that if you want to learn more about how to transfer your designs into code without a developer uh and want to learn

how to uh create websites in framer or how to use Figma like a pro, um don't forget to subscribe to my newsletter and sign up for my courses. The link will be

in the description below. All right. So

we can see that it is finishing the job and we can see that the file is already created over here. Um it that is doing

some final uh touches and uh I guess in like couple of seconds we'll we'll be able to check out the results. Perfect.

So it finishes and it shows what it did uh inside of the file. So we can see that the new file is created. Let's

check it out. that's over here. And we

can see that it combined all of the variables that we had in three different u files, right? Uh right now we can delete all of them. Uh we don't need

them anymore. Uh so I deleted them and

them anymore. Uh so I deleted them and we'll only use this file for our next uh step. All right. So the next step is I

step. All right. So the next step is I want to build a website basically or just a web page showing all possible

components uh that can be created using our uh design system. Uh and u this can be like um uh you know um like a review

or uh actually a website or landing page for this design system showing all the possible uh variations and different components. Um so let's um paste in the

components. Um so let's um paste in the prompt that I have already created. But

before that we need to create a new agent. And here I will use again uh I

agent. And here I will use again uh I will use agent mode uh with sunonnet 4.5. And here I'll paste in uh the

4.5. And here I'll paste in uh the prompt that I already created uh telling it to build a UI kit with all possible

components for SAS service web app using master uh design system JSON file. So

basically this is the file uh and use reactjs and nextjs for this these are frameworks

create a page showing all the components uh of the UI kit with description use minimal and clean design uh from the design system file. So basically we'll

create a web app uh using because it it is uh it's going to be in ReactJS and nextJS. Uh it's not just regular HTML.

nextJS. Uh it's not just regular HTML.

Uh so we'll create this app uh showing all the possible uh components. So let's

run the prompt and let's wait for it. Uh

what and see what's going to happen.

A ReactJS is a JavaScript library used to build user interfaces especially for web apps. uh and um different

web apps. uh and um different applications. It allows developers to

applications. It allows developers to create um reusable components just like in Figma uh to manage their own state making it easier to build um different

dynamic and interactive applications. So

think of it as um uh Figma components for developers and Nex.js JS is a framework built on

React that helps developers to create uh fast and efficient web applications. Uh

it simplifies tasks uh like server side rendering uh and static site generation making it easier to build websites that

load quickly and perform well uh in search engines. Uh so we can see um that

search engines. Uh so we can see um that cursor created all of these component files already over here and now I need

to run uh npm uh and install it in the project uh and this will allow cursor to install dependencies to start the development server uh because we

need to run it somewhere. So we'll run this web app on the local server. Uh

it's called local host. Uh and you'll see it in a couple of seconds how it's going to work. Uh later you can of course um deploy it to your server or to

your hosting and run it on your website.

Cursor finishes uh the job it is writing um like a readme file that can be used for other people who will work on this project. for example, like developers uh

project. for example, like developers uh or um other designers or engineers. Uh

and um this is a pretty useful thing that can be used uh for uh GitHub. Uh

and later on we'll publish this project uh on the GitHub as well. So you will be able also to check it out and download it if you want.

Right now we see that cursor is finishing the job. It says that it's almost done. It gives me a list of all

almost done. It gives me a list of all the files that it's created and I just need to click keep all to save it. All

right. So this is the project file and we get the readme and quick start. So here it tells us how to start the project and it's going to

be live on localhost for now. Uh and

it's going to be localhost 3000. So I

can open uh a browser here uh like browser tab. uh and I can paste uh in

browser tab. uh and I can paste uh in this link. You can see that nothing is

this link. You can see that nothing is working right now because the server is not running. So we need to open our

not running. So we need to open our terminal. Uh or we can do it inside the

terminal. Uh or we can do it inside the cursor. Just open the bottom panel. And

cursor. Just open the bottom panel. And

if you go to quick start uh that cursor has created uh it says that the project is already created and installed. You

need to reinstall uh the npm. So we just paste here this uh thing over here that uh cursor tell us and just click run. It

adds uh the some packages. And now what we need to do we need to run npm npm rundev and click here. Okay. So it says

open in cursor browser. Yeah this is what I want to do. And now let's wait.

And here it is. Yep. So we have our uh um SAS kit ready. Uh actually we can even uh check it out in our browser. So

I can go to home and I can paste it here. Uh here it is. So actually it it

here. Uh here it is. So actually it it runs on uh localhost 2010 because I have other projects running. Uh but it doesn't really matter. Here are our

components and uh yeah as we can see that everything is here is ready is ready to use. So we see like different sides of avatars, different alerts and

the variables that are used here are all from our design system that was in the JSON file. So this is very important to

JSON file. So this is very important to understand. All the colors and all the

understand. All the colors and all the uh paddings and everything is here and this is super cool.

um because now uh developers can get get this file and use it to um to build other projects.

Cool thing is that with latest updates with cursor here in this um uh preview inside of the cursor you can have this

right uh panel open uh this is where I'm looking at this is like the uh internal browser and if I open it here I can have

uh the regular um developers tools like in Chrome but the cool thing is that uh I can uh use uh pointer over here like to to see and to check all of the uh

things that are made inside of my design. Uh and if I open this right

design. Uh and if I open this right panel, it looks exactly like Figma.

Check it out. And when I click on some of the um elements, uh I can check everything that it uses uh the colors

from my design system, what kind of um for example, cornering radius it uses.

Uh then it uses the fonts. This is 400.

You see the pixels. And the cool thing is that uh when I click on it, I can change the value. For example, I can change to 900 uh to 600 or whatever. So

I can uh do this inside of my cursor. So

I don't need to go back to Figma or anything like that. So I can even change the values right away right over here.

You see? Uh and um when I change it, I can just hit apply and it will save um these this uh corrections uh and these

updates.

And uh since we're uh designers who want to be engineers and want to be real developers uh after this or look like real developers, let's publish uh our

design system to GitHub. Uh so now we go on the left panel and of course we go to this uh two little things and we need to

click uh initialize repository and now um what I need to do I want to comment this so uh let's let's call it the design system

design system file or just uh yep system

and uh let's click comment and it will save. Yes. And now we need to select the

save. Yes. And now we need to select the uh publish branch and we need to create a public or private repository. So I

will create a public repository for you uh to get access to it uh from the link that I will um put in the description below. So I will create a public

below. So I will create a public repository and I'll click publish. And

that's it guys. So now I can open it in the web. Yep, here it is. Uh here's the

the web. Yep, here it is. Uh here's the uh design system file that was created um with using cursor and our um design

system tokens from Figma. And as you can see uh the kit is here with all the files everything is right here published

in our um repository. So now you're becoming a real developer. Thank you so much for watching this video. I hope you like it and I hope now you understand

how you can export your Figma variables and use them to build real projects.

Don't forget to subscribe to my channel if you haven't already to see other interesting videos on bip coding design framer and Figma. And like the video if

you like it and I'll see you in the next one. Bye-bye.

one. Bye-bye.