Creating Colors for Your Design System

Подписаться 9 тыс.

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

50% 1

Learn how to create a color ramp, check for accessibility, and then organize the colors for your design system.
Apply to join our Slack design community: www.uicollective.co
Download the free version of our design system:
resources.uicollective.co/che...
Pre-register for the UIC Design System Linter plugin: www.uicollective.co/design-sy...
Email me video suggestions: hello@uicollective.co
0:00 An Introduction
0:51 Building the Color Ramp
4:34 Checking for Accessibility
8:37 Mapping Your Colors to Tokens/Variables

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

31 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@mrair8259 10 месяцев назад

Thanks. Add increments of 10% black to get darker shades the same way you add 10% white to get lighter tones :)

@UICollectiveDesign 9 месяцев назад

Totally! Great call out

@tylerbeaty 9 месяцев назад

Great vid! Another great way to create a color ramp is to use HSL and adjust Lightness. I usually adjust saturation as I go lighter to maintain vibrancy.

@UICollectiveDesign 9 месяцев назад

Appreciate it! So true as well. You should join our slack! We need more color experts haha

@daviematcha 7 месяцев назад

Thanks for making this! I'm confused by the "Action" role. Since hovering affects the state of a button, which could be Primary, Secondary, etc., wouldn't the second color be Surface-Primary-Hover?

@UICollectiveDesign 7 месяцев назад

That overcomplicates things. You should ideally have defined the primary in your alias collection, thus, not needed in your mapped collection. Take a look at our 'Creating an Advanced Figma Color Variable Library' video and it might help. Otherwise, join our slack and I can send you a draft of our tokens naming convention video coming out soon which will definitely help :)

@d.g.567 Месяц назад

Why not just using HSL for the color ramp instead of working with opacity and eye drop the color?

@UICollectiveDesign Месяц назад

You can do this as well! I just like opacity honestly despite it being more time consuming

@d.g.567 Месяц назад

Hey, you do you! :) just wanted to point out a perhaps more efficient way for color coding definitions. Especially, when it „hopefully“ will be possible to use calculations and formulas with variables. 🤞 Thank you for the valuable content you are providing on your channel. You have definitely have a new subscriber.

@UICollectiveDesign Месяц назад

@@d.g.567 Appreciate the love!!