Stop Making Generic AI UI with Figma Make
In this video, I’ll show you how to use Figma Make to generate beautiful, intentional design layouts that actually match your reference — not random AI output.
⚡️ The first 500 people to use my link in the description or scan the QR code will receive a one month free trial of @Skillshare! Get started today! —
https://skl.sh/sergeichyrkov01261
📌 Tutorial and Related stuff:
Link to work file: https://buymeacoffee.com/sergeichyrko...
Design tokens video: • Figma Variables Explained! Build a Scalabl...
Design tokens file: https://buymeacoffee.com/sergeichyrko...
How to get better UI in Figma Make and Cursor:
Figma Make and MCP: • Figma Make or Figma MCP? — Design to Code ...
💌 Join my newsletter and learn more: https://sergeichyrkov.com/learn
______________________________
Check out my links ⬇️
▸ My website — https://sergeichyrkov.com
▸ My studio — https://chyrkov.studio
▸ My curated resources library — https://designsweets.co
▸ Twitter — / sergeichyrkov
▸ Instagram — / chyrkov
▸ Behance — https://www.behance.net/chyrkov
▸ Linkedin — / sergeichyrkov
______________________________
Useful stuff:
👉 Build websites in minutes with Framer — https://framer.link/chyrkov
👉 Record your screen like a Pro — https://screenstudio.lemonsqueezy.com...
👉 Best music for your videos (get 30 days for free) — https://www.epidemicsound.com/referra...
________________________
📘 About this video:
We’ll build a real product together: a Steps Tracker app, step by step. You’ll see my full workflow for starting a project in Figma Make, using design references the right way, and iterating on layouts until they feel polished and designer-approved.
This is not a one-prompt demo. You’ll learn how to:
Start a design project in Figma Make
Use visual references to control AI-generated layouts
Refine spacing, typography, and hierarchy
Update designs to closely match the original inspiration
Prepare Figma layouts for export into Cursor or Claude Code
Move from design to code faster using AI tools
By the end of the video, you’ll understand how to use Figma Make as part of a real, production-ready workflow — from idea to interface to code.
If you’re a designer, developer, or vibe coder who wants AI-assisted design without sacrificing quality, this video is for you.
📝 Chapters:
0:00 — introduction
1:09 — project setup
2:45 — use reference to create first screen
4:52 — how to level up your skills?
6:17 — update the AI design manually
7:45 — create next screens based on the updated UI
9:36 — create a bottom navigation
10:26 — how to get Figma Variable from other project
12:08 — create 3rd screen
14:00 — components
14:52 — 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/sergeich...
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 #figmamake #ai #webdesign