Create a Color System in Figma using Variables & Tokens (Bonus: Project Files)

🔍 This detailed guide to creating an efficient color system using variables & tokens is perfect for designers looking to enhance their workflow in Figma!
🎨 In this detailed tutorial, we'll look at the nuances of Figma's powerful colour management features. Discover how to use color variables and tokenization effectively to streamline your design process, maintain consistency across your projects, and easily adapt to changes in design systems.
👩‍💻 Whether you're a beginner keen to master Figma or an experienced designer seeking to refine your skills, this video is packed with actionable insights. Learn to set up a robust color system.
Links/tools shown in the video:
* Tint & Shades: maketintsandshades.com/
* ChatGPT - Design Assistant: chat.openai.com/g/g-JQft8rEA1...
* FREE Project files: uxdan.gumroad.com/l/figma-col...
* Patreon: / uxdan
Key takeaways:
* Understanding the role of color variables and tokens in Figma.
* Step-by-step process of setting up and utilizing these features.
* Best practices for maintaining a scalable and adaptable color system.
📌 Subscribe for more in-depth tutorials and tips on Figma and design
💬 Excited about color systems in Figma? Share your experiences and any questions you have in the comments section below.

[@uxdanio]

I'm glad to see a lot of you found this useful, and are keen for my next video. I prepared a little something that I wrote in the past couple of months and just published. I want you to be the first to read it since it aligns closely with the topic of this video: medium.com/@uxdanio/ai-design-systems-guide-challenges-and-opportunities-uncovered-1218aab3eff5

[@boluwajiiiii]

I have been looking for a video or any material on this topic for a very long time. I just did not know what to search for. Like I knew what I wanted, I just don't know how to explain it. Thank you for this video, I am definitely going to subscribe to your channel and check out your other videos.

[@uxdanio]

Glad it was helpful!

[@saalimkhan1765]

You're tutorials are amazing. They help me a lot improve my design consistency ❤

[@uxdanio]

Glad to hear! Next Figma tutorial coming today or tomorrow 🤞

[@ossa4010]

Beautiful work, thank you

[@uxdanio]

Thank you! Cheers! 👋

[@uifry]

Awesome :)

[@deliciouspizza4405]

Thank you so much! It helped me a lot to understand the basic idea of variables.
While watching the video, I came up to think that how I could use variable feature for the design system.
When you already have your design system in one file in figma, and you set all the variable color tokens there, but you cannot publish the variables making it global. It means, you only can utilize color tokens in the file, and not with other files. Do you know how we can use this feature as a system? Should we import variable set to every single file to adjust it?
It will be awesome if I could get some advice on this. Thanks agian!

[@qubist.studio]

Very useful! Congrats! 🎉🤝

[@uxdanio]

thank you! 👊

[@boluwajiiiii]

I have a question. Do you already know all the components you plan on using before you start naming your color tokens?

[@uxdanio]

Not necessarily. I usually create more when needed, but I prefer to start with a good base and include main components such as buttons, input fields, cards, etc. Design systems are supposed to be evolving with time.

[@darrenstrange2244]

Hello, your tutorials re very helpful indeed. I am an XD user trying to migrate to Figma! I'm struggling with colours a bit. I have created a 'Design System' with a blue colour colour style (for buttons, subtitles and icons etc). So for my next website design project, I create a new design file, bring in my Design System with the blue colour style, and add all the components I need from the Design System to build the web site. But now I want to change all the blue elements in my new project to green - but it says the only way I can do that is by changing the blue colour style from within my Design System? I don't want to touch the design system, I just want to globally change the colour styles in every new project so each project has a different colour scheme./ Is there any way to do this, or am I looking at it incorrectly? Any help most appreciated.
Cheers! :)

[@uxdanio]

Hey Darren! Thanks a bunch!
What you're facing is that your new components in the latest project are still tied to the original design styles library. This could be due to a couple of reasons, but the simplest way to fix it is by ensuring you duplicate your entire Figma file (Right click > Duplicate), instead of just Copy/Paste for the components. When you duplicate the whole file, it clones everything, including styles, and links them to the new document automatically. Hope this helps!

[@champolot]

Can I ask designs must not be based on dribble?

[@uxdanio]

“The world’s destination for design” is Dribbble’s slogan, and it’s a good source of inspiration. But keep in mind that often people showcase their UI skills only, or they don’t explain their UX process and design thinking.

[@uxdanio]

To add to my point, have a look at my latest video where I break down one of those kind of designs. It might prove a thing or two - th-cam.com/video/Yc-VzsVHZKs/w-d-xo.htmlsi=lg7_YKZYRizTQzq2

[@sams32111]

Eden Hazard more talented than I remember