Every component has a name and a value given to it that represents a certain design decision. When building a design system we use tokens to symbolize an interchangeable design value in code - so that it can be switched and changed without having to refactor the code. Here’s an example from Material UI, the world’s most popular open-source component library which implements material design in React. The key to component design systemsįor those reasons, most modern design systems have adopted Design Tokens. In this post, we’ll cover the basics of design tokens and how they can be combined with composable components to unlock the ultimate design system workflow in React - where you can create modular and flexible theme components that can be plugged in and out of any application. This is a critical point for larger organizations that struggle with the adoption of their design system and collaboration/adoption. Tokens can streamline the work of building, maintaining, and scaling products with a design system. The second is to ensure consistency across pages and products. Design tokens help designers become active contributors to the development process. The important thing to remember is that ultimately users get code, no Figma, and so React is the source of truth. This is a HUGE problem as the two speak completely different languages one speaks Figma, and the other speaks code. The first is designer and developer collaboration. A composable theming component with design tokens Share and reuseĭesign tokens help to solve two of the biggest problems in Design Systems and application development today.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |