Beginner's Guide to DESIGN TOKENS - Basics of DESIGN SYSTEMS!
3.4万 次观看 · 2022-07-28
UI 设计
🚀 Book 1:1 Tutoring Sessions with me and take your Product Design journey to the next level: https://www.learnproduct.design/sessions
In this tutorial, we will look at the Basics of Design Tokens. What are they? What are they used for? Why is it helpful? I will explain the concept with a real-life example and then show you how to practically implement it with your design system.
🔗 Updated video with Variables - https://youtu.be/r4t5FlcRPg8
🔗 Creating Color Styles in your Design System - https://youtu.be/sdC8rCOfOIM
00:00 Introduction
00:40 Real-life example to understand Design Tokens
02:27 Understanding Design Tokens with an actual color
08:46 How Design Tokens work in Dark Mode - Example 1
12:16 How Design Tokens work in Dark Mode - Example 2
17:06 True Example of Design Tokens
22:07 How you can assign Design Tokens to your colors
28:20 Creating and Naming Color Styles
-------------------------------------------
Mega Product Design (UI/UX) Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1_kDOXCrEGmB58IsLOiIc3
Webflow Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1N4PxzGE_ywogtBeeOaqc8
Photoshop Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ372RTmi1rQmfqbIqXr3opi
Illustrator Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ0pK595gwPLmcVF-P_jx0V1
After Effects Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ23p3SZD49unrbkh_F8q9Dk
UI Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1uHAE-_rAxeDMBnhzzmYuW
Design Resources, Tools and Softwares:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1-qY3TQToZWn3vYWVo6EA9
Adobe XD CC Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ11D_9_jX80GDenpMUWjTtv
eSports Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ3lLdkQmG-Ebw90KdChq56P
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: https://chethankvs.design
Twitter: https://twitter.com/kvschethan
Instagram: https://instagram.com/design_pilot
Mail: designpilot21@gmail.com
Behance: https://behance.net/chethankvs
Dribbble: https://dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#designsystems #uiuxdesign #designtokens
In this tutorial, we will look at the Basics of Design Tokens. What are they? What are they used for? Why is it helpful? I will explain the concept with a real-life example and then show you how to practically implement it with your design system.
🔗 Updated video with Variables - https://youtu.be/r4t5FlcRPg8
🔗 Creating Color Styles in your Design System - https://youtu.be/sdC8rCOfOIM
00:00 Introduction
00:40 Real-life example to understand Design Tokens
02:27 Understanding Design Tokens with an actual color
08:46 How Design Tokens work in Dark Mode - Example 1
12:16 How Design Tokens work in Dark Mode - Example 2
17:06 True Example of Design Tokens
22:07 How you can assign Design Tokens to your colors
28:20 Creating and Naming Color Styles
-------------------------------------------
Mega Product Design (UI/UX) Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1_kDOXCrEGmB58IsLOiIc3
Webflow Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1N4PxzGE_ywogtBeeOaqc8
Photoshop Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ372RTmi1rQmfqbIqXr3opi
Illustrator Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ0pK595gwPLmcVF-P_jx0V1
After Effects Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ23p3SZD49unrbkh_F8q9Dk
UI Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1uHAE-_rAxeDMBnhzzmYuW
Design Resources, Tools and Softwares:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1-qY3TQToZWn3vYWVo6EA9
Adobe XD CC Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ11D_9_jX80GDenpMUWjTtv
eSports Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ3lLdkQmG-Ebw90KdChq56P
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: https://chethankvs.design
Twitter: https://twitter.com/kvschethan
Instagram: https://instagram.com/design_pilot
Mail: designpilot21@gmail.com
Behance: https://behance.net/chethankvs
Dribbble: https://dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#designsystems #uiuxdesign #designtokens