Figma Design System 2025 - Colour Tokens [ Ep 1] | Figma Variables Colors
6.8万 次观看 · 2025-06-03
UI 设计
🚨Follow along with this Figma file -
https://www.figma.com/community/file/1510371943462152475
Thanks for watching, TD 💛
☕️ Buy me a tea → https://buymeacoffee.com/tdsunshine
🔎 Get 20% off Mobbin → https://mobbin.com/tdsunshine
👾 My gear & links → https://linktr.ee/tdsunshine
🍿 _WHAT TO WATCH NEXT_ :
1. *Components in UI3* - https://youtu.be/RYgz9qrRZRs
2. *Figma Grid* - https://youtu.be/hYu69kgxmLg
3. *Figma Draw* - https://youtu.be/Cx_kJUIM-wA
🌼 _CHAPTERS_ :
00:00 Welcome to the series
00:16 Choosing Our Rainbow
01:34 Creating Shades
02:35 Branded Greyscale
03:55 Dark Mode Colours
05:09 Variable Time
06:48 Edge Colours
07:15 Static Colours
08:05 Scoping Primitives Variables
09:00 Background Design Tokens
10:22 Assign Variables
10:46 Selecting Background Colours
12:33 Testing Dark Mode
12:59 Semantic Design Tokens
14:23 Selecting Semantic Colours
15:23 Scoping Semantic Variables
15:58 Text Design Tokens
16:37 Selecting Text Colours
18:45 Figma Contrast Checker
19:14 Scoping Text Variables
19:34 Icon Design Tokens
20:00 Border Design Tokens
21:16 Selecting Border Colours
22:24 Scoping Border Colours
22:36 Final Colours!
🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. 💛 This is at no additional cost to you.
#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figma #figmaupdate #config #config2025 #figma2025#designtokens #tokens #variables #variablemodes
https://www.figma.com/community/file/1510371943462152475
Thanks for watching, TD 💛
☕️ Buy me a tea → https://buymeacoffee.com/tdsunshine
🔎 Get 20% off Mobbin → https://mobbin.com/tdsunshine
👾 My gear & links → https://linktr.ee/tdsunshine
🍿 _WHAT TO WATCH NEXT_ :
1. *Components in UI3* - https://youtu.be/RYgz9qrRZRs
2. *Figma Grid* - https://youtu.be/hYu69kgxmLg
3. *Figma Draw* - https://youtu.be/Cx_kJUIM-wA
🌼 _CHAPTERS_ :
00:00 Welcome to the series
00:16 Choosing Our Rainbow
01:34 Creating Shades
02:35 Branded Greyscale
03:55 Dark Mode Colours
05:09 Variable Time
06:48 Edge Colours
07:15 Static Colours
08:05 Scoping Primitives Variables
09:00 Background Design Tokens
10:22 Assign Variables
10:46 Selecting Background Colours
12:33 Testing Dark Mode
12:59 Semantic Design Tokens
14:23 Selecting Semantic Colours
15:23 Scoping Semantic Variables
15:58 Text Design Tokens
16:37 Selecting Text Colours
18:45 Figma Contrast Checker
19:14 Scoping Text Variables
19:34 Icon Design Tokens
20:00 Border Design Tokens
21:16 Selecting Border Colours
22:24 Scoping Border Colours
22:36 Final Colours!
🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. 💛 This is at no additional cost to you.
#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figma #figmaupdate #config #config2025 #figma2025#designtokens #tokens #variables #variablemodes