Design to Code: Figma Variables to React JS Design System
8.1K views · 2025-12-12
UI Design
👉 Design tokens file (full version): https://chyrkov.lemonsqueezy.com/checkout/buy/1dbeefbe-6925-4a43-a7e5-18d2d3affc57 (Use FANS10 for 10% off)
▶️ View code on Github: https://github.com/chyrkov/DS-JSON-tutorial-2
👉 Get Cursor: https://cursor.com/referral?code=MTHGL6DQYDUR
👉 Figma MCP configuration: https://www.figma.com/mcp-catalog/
💌 Join my newsletter and learn more: https://sergeichyrkov.com/learn
In this tutorial I will show you how to create a design system web app from your Figma Variables. First, we'll export our design tokens to JSON from Figma, then we'll create a master design system file in Cursor. After that we'll create a web app using React JS and Next JS to show all possible design components made using our Figma variable. In the end we'll publish the project to Github.
📺 Design tokens explained: https://youtu.be/tvObuIcAooE
______________________________
Check out my links ⬇️
▸ My website — https://sergeichyrkov.com
▸ My studio — https://chyrkov.studio
▸ My curated resources library — https://designsweets.co
▸ Twitter — https://twitter.com/sergeichyrkov
▸ Instagram — https://instagram.com/chyrkov
▸ Behance — https://www.behance.net/chyrkov
▸ Linkedin — https://linkedin.com/in/sergeichyrkov
______________________________
Useful stuff:
👉 Build websites in minutes with Framer — https://framer.link/chyrkov
👉 Record your screen like a Pro — https://screenstudio.lemonsqueezy.com?aff=GO290
👉 Best music for your videos (get 30 days for free) — https://www.epidemicsound.com/referral/am81qn
______________________________
📝 Chapters:
0:00 — introduction
0:31 — Figma variable file overview
6:25 — export Figma variable to JSON
8:30 — create a design system JSON file in Cursor
10:30 — build a design system web app
14:35 — how to launch a web app on localhost
16:00 — design system web app overview
16:40 — modify design with visual editor in Cursor
18:12 — how to publish your project to Github
19:47 — final thoughts
______________________________
😍 Monetarily Supporting The Channel:
If you like what I do and wish to support the channel monetarily, you can donate me with some coffee here: https://www.buymeacoffee.com/sergeichyrkov
This is appreciated and helps the channel, but please don't feel that it is necessary to enjoy my content.
______________________________
📃 Disclaimer:
Some of the links in my video descriptions are affiliate links, which means at no extra cost to you, I will make a small commission if you click them and make a qualifying purchase.
______________________________
#figma #cursor #ai
▶️ View code on Github: https://github.com/chyrkov/DS-JSON-tutorial-2
👉 Get Cursor: https://cursor.com/referral?code=MTHGL6DQYDUR
👉 Figma MCP configuration: https://www.figma.com/mcp-catalog/
💌 Join my newsletter and learn more: https://sergeichyrkov.com/learn
In this tutorial I will show you how to create a design system web app from your Figma Variables. First, we'll export our design tokens to JSON from Figma, then we'll create a master design system file in Cursor. After that we'll create a web app using React JS and Next JS to show all possible design components made using our Figma variable. In the end we'll publish the project to Github.
📺 Design tokens explained: https://youtu.be/tvObuIcAooE
______________________________
Check out my links ⬇️
▸ My website — https://sergeichyrkov.com
▸ My studio — https://chyrkov.studio
▸ My curated resources library — https://designsweets.co
▸ Twitter — https://twitter.com/sergeichyrkov
▸ Instagram — https://instagram.com/chyrkov
▸ Behance — https://www.behance.net/chyrkov
▸ Linkedin — https://linkedin.com/in/sergeichyrkov
______________________________
Useful stuff:
👉 Build websites in minutes with Framer — https://framer.link/chyrkov
👉 Record your screen like a Pro — https://screenstudio.lemonsqueezy.com?aff=GO290
👉 Best music for your videos (get 30 days for free) — https://www.epidemicsound.com/referral/am81qn
______________________________
📝 Chapters:
0:00 — introduction
0:31 — Figma variable file overview
6:25 — export Figma variable to JSON
8:30 — create a design system JSON file in Cursor
10:30 — build a design system web app
14:35 — how to launch a web app on localhost
16:00 — design system web app overview
16:40 — modify design with visual editor in Cursor
18:12 — how to publish your project to Github
19:47 — final thoughts
______________________________
😍 Monetarily Supporting The Channel:
If you like what I do and wish to support the channel monetarily, you can donate me with some coffee here: https://www.buymeacoffee.com/sergeichyrkov
This is appreciated and helps the channel, but please don't feel that it is necessary to enjoy my content.
______________________________
📃 Disclaimer:
Some of the links in my video descriptions are affiliate links, which means at no extra cost to you, I will make a small commission if you click them and make a qualifying purchase.
______________________________
#figma #cursor #ai