Strengthened design and developer communication - Designers and developers manage the design layer together, digitally and conceptually.Controlled change - Designers can iterate with confidence knowing design decisions cascade across all digital teams from a single location.It's a simple, yet powerful concept with a list of advantages: Essentially, it serves to dry up the visual language to a single location. Design tokens bridge the gap by moving a design language to its own layer where designers and developers can draw from and contribute iterations to. This is often the root cause of design inconsistencies, tangled CSS files, and expensive iterations. Unfortunately, many products define their visual language across a wide gap from design mocks to CSS files, these elements are defined and redefined over again. In a design system, this is referred to as the visual language. Background: The visual language of your productĪ product's visual design, at it's core, is defined by basic visual elements.Īll components and layouts of any digital design system fit into those categories. The final output will be a collection of SCSS mixins that map to design tokens and can help to reel in messy CSS inconsistencies amongst dev teams and close the gap between designers and developers with great success. In this blog post, I'll demonstrate how you can leverage design tokens and SCSS mixins to capture a system's design language. These decisions are stored in a config-like format to support the needs of any platform (Web, mobile OS, etc). Design tokens manage and store User Interface (UI) decisions such as spacing, color, typography, and motion.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |