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

Подписаться 997

Просмотров 9 тыс.

50% 1

🔍 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.

Хобби

Опубликовано:

15 янв 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 16

@uxdanio 14 дней назад

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 4 месяца назад

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 4 месяца назад

Glad it was helpful!

@saalimkhan1765 22 дня назад

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

@uxdanio 22 дня назад

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

@ossa4010 4 месяца назад

Beautiful work, thank you

@uxdanio 4 месяца назад

Thank you! Cheers! 👋

@uifry 2 месяца назад

Awesome :)

@boluwajiiiii 4 месяца назад

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

@uxdanio 4 месяца назад

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 15 дней назад

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 13 дней назад

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!

@sams32111 18 дней назад

Eden Hazard more talented than I remember

@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 8 часов назад

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 - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Yc-VzsVHZKs.htmlsi=lg7_YKZYRizTQzq2