How I Build a Tailwind-Ready Color System in Figma (From Scratch)
字幕
选择会记住；翻译由 YouTube 自动生成

How I Build a Tailwind-Ready Color System in Figma (From Scratch)

Elizabeth Alli - DesignerUp 8.4万 位订阅者
1.4万 次观看 · 2025-05-21 UI 设计
In this video I show you—step by step—how to build a custom color system in Figma: pick a balanced palette, expand it into Tailwind’s 50-950 scale, and convert everything into styles and variables.

You’ll see the exact plugins and shortcuts I use and learn a quick trick for finding real-world palette inspo.

Try Mobbin 👉🏽 https://go.designerup.co/mobbin
💬 Comment to grab the Figma File

🎥 WHAT TO WATCH NEXT
→ Color in UI Design | https://www.youtube.com/playlist?list=PLl0Umi92CQzXzdGkynmhh-ZjpoZW1f1Mm
→ Design Systems Crash Course | https://www.youtube.com/playlist?list=PLl0Umi92CQzX39EDNB4FGZdgdoLeB-L_b

📖 CHAPTERS
00:00 - Intro
00:40 - Tailwind Colors Explained
01:54 - Step 1 - Choosing a color palette
03:34 - Creating a color scale
07:04 - Using a color scale generator
08:01 - Color naming and values
11:52 - Step 3 - Covert to Styles
12:42 - Step 4 - Turning Styles into Variables
13:34 Step 5 - Creating a Style Guide

📚 PRODUCT DESIGN (UX/UI) COURSE (⭐️ 500+ Happy Students!)
⊚ Enroll Now | https://designerup.co/product-design-ui-ux-course?utm_source=youtube&utm_medium=link

🧰 RECOMMENDED PRODUCT DESIGN TOOLS
⊚ Mobbin | https://go.designerup.co/mobbin
⊚ Figma | https://go.designerup.co/figma
⊚ ProtoPie | https://go.designerup.co/protopie
⊚ Miro | https://go.designerup.co/miro
⊚ Notion | https://go.designerup.co/notion
⊚ Framer | https://go.designerup.co/framer

📒 GET FREE DESIGN LESSONS
⊚ Free UI Design Crash Course | https://designerup.co/ui-design-crash-course
⊚ Newsletter | https://designerup.co/newsletter
⊚ Live Webinars | https://designerup.co/webinars

📖 READ THE BEST DESIGN ARTICLES
⊚ BLOG | https://designerup.co/blog

🥰 JOIN OUR NEWSLETTER COMMUNITY
⊚ DesignerUp Newsletter | https://designerup.co/newsletter

🙋🏽‍♀️ ABOUT ELIZABETH ALLI
⊚ Senior Product (UX/UI) Designer
⊚ Founder of DesignerUp the first Mindful Product Design (UX/UI) School
⊚ Trained teacher
⊚ Youtube creator
⊚ Author

💬 CONNECT WITH US
⊚ Twitter | https://twitter.com/designerupco
⊚ Instagram | https://www.instagram.com/designerupco
⊚ Facebook | https://www.facebook.com/designerupco
⊚ LinkedIn | https://www.linkedin.com/company/designerupco
⊚ Pinterest | https://www.pinterest.com/designerupco

*Some of the links listed in the description may be affiliate links through which we may earn a small commission. They are at no cost to you and often include discounts that we pass along! These help keep our free channel going and continue to create the highest quality content possible. So thanks for your clicks and your support! 💜

💻 SPONSORSHIP AND COLLAB INQUIRIES
⊚ Email | learn@designerup.co
#UI/UX design#UI design#how to design UI/UX#UI design tips#UI design tutorial#UX/UI#Product Design#UX Designer#Product Designer#Designerup#color theory#color system#color system figma#create color system#color design theory