Most design systems include some basic color palettes that everything else is built from. Design tokens should inform how you communicate as a cross-functional team, how you approach design decisions, and how you scale those decisions to your entire product suite. When an engineer looks at your design files, they know exactly which tokens to use, because they have the same names as they do in code.ĭesign tokens as a system or approach though are much more than this however. Now, when a rebrand rolls around, you change your brand color in one place, and everything else changes. In your design tool of choice, you’d have a style defined with the same name, which is shared across your whole team or company. In CSS, they may look something like: h1 These colors will be scattered throughout your design files, and through the code your engineers are working with. You use this color in a variety of places across products, back-end systems, and your website: Heading text, primary button backgrounds, secondary button text, link text, etc. You have a brand color which is a bright blue color ( #3640F5). You’re a product designer, working on a smallish new product, without an existing design system in place. ![]() But first, let’s start with a quick story. Here you’ll learn the basics of what design tokens are, how they’re used, their benefits, and some tools and resources that can help.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |