Design Tokens and Theming
大连/UX设计师/1年前/38浏览
版权
Design Tokens and Theming
2023 Mar - 2024 Dec
How might we ensure consistency across different platforms and devices?
Disclaimer:Due to compliant restrictions, company details have been omitted. Let's connect for more details!
OVERVIEW
Our organization faces significant challenges in maintaining consistency and efficiency across multiple systems, platforms, and products due to disparate design assets and custom theming.Design tokens provide a single source of truth, ensuring that both design and engineering teams share a common specification language. This unified approach streamlines the handoff process, making collaboration more efficient and reducing misunderstandings.
- Timeline：MVP1 - 6 months, Post MVP1 - 12 months
- My role: UX Designer - Lead (sole mobile designer)
- Deliverables: Visual style language, design tokens, design themes
PROBLEMS AND CONSTRAINTS
Problems
- Visual inconsistencies in design and code
Various token pipelines make it difficult to maintain consistency across products.
- Manual token mapping
The lack of integration creates confusion, inefficiency, and manual errors.
Constraints
- Dependent on third-party tools
Tools like Token Studio and Style Dictionary are critical tools for syncing our token pipeline. Without them, we're at risk of not having an internal solution to scale in the short timeline we have to deliver.
- Figma feature limitation
At that time, Figma didn't support variables for singular typography attributes, such as font weight, line height, etc. A manual mapping is required when compound typography style doesn't fit actual needs.
APPROACH
Research and analysis
Based on what we learned from great practices of other design systems and different channels, we have the following findings and recommendations:
Our methodology
Token structure
As many design systems opt for a three-tier token structure (core-system component), we have chosen to implement a two-tier token structure (core-system). This decision is based on the specificity of component-tier tokens and the significant increase in maintenance effort that a large number of tokens would entail in the long run. Consequently, we have decided to apply system-tier tokens to all of our components.
To bridge business unit specific design decisions and accommodate custom values, we also created the concept of "Brand tokens", which is a sub-section of system tokens.
- Core tokens
Immutable definition of color, size, shape, or font attributes. Core tokens are the basis of all design specs. They are defined by FDS styles. All themes should have core tokens at their origin, via system tokens.
Core tokens are the actual values used by components, although should never be referenced directly. Always code and spec using system tokens. In the event a token doesn't exit, first ensure the system token is defined first. Only then should a core token be added if there's still a gap.
- System tokens
System tokens reflect the FDS Styles language via abstracted visual objects. Groups of components that share common attributes can be defined with system tokens.
The primary purpose is to ensure groups and categories of visual styles are common and uniform across components and channels. Component attributes are intentionally encapsulated. System tokens intentionally span across components as a compliment to that constraint.
We use system tokens in components and any other code related to rendering Ul. System tokens should be the only token found in this code.
- Brand tokens
Brand tokens are intended to be distinctions for experiences across this company that use brand colors throughout their user interfaces. In order to scale and support, flexibility is needed from our design language to not accrue tech debt in overrides of brand green.
Additional brand distinction include, but are not limited to secondary and tertiary color palettes as well as unique status indicators and data visualization across business units. By using brands, business units can distinct their color palette for their experience as well as typography scale and density modes.
Token naming
By classifying parts of token names we are able to scale our namespaces, properties, variants, attributes and modifiers as considerations for token creation and maintenance.
- Core tokens
- System tokens
Design theme
A theme is a conceptual way to describe a group of styles for any given brand, including:
- Brand
All themes are based on the core brand being expressed (mostly color).
Brand themes support our design efforts to connect sub-brands within this company, such as Charitable, Teen App. By utilizing these brand themes, business units can differentiate their color palettes for their respective experiences.
Applies to: the entire experience, not just single part or current view.
Examples: core, youth, wealth
- Mode
Each brand has light and dark modes.
Light and dark modes are a popular feature in modern digital experiences that allow users to switch between different color schemes based on their preferences or environment. In our design system, we use design tokens to make it easy to implement light and dark modes in our products.
Applies to: the entire experience, not just single part or current view.
Examples: light, dark, high contrast
- Accent
Accents render areas of Ul with different color treatment.
Accents are a way to create moments of personality and emphasis while remaining consistent with the overall design system. The system contains several accent options to use depending on the occasion.
Applies to: individual components or sub-sections of a Ul.
Examples: green, blue, purple
- Density
Ul is made visually smaller or larger using density modes.
Density relates to the amount of content that can fit on a screen based on the size and spacing of components and layout.
Applies to: individual components or sub-sections of a Ul.
Examples: comfortable, default, compact
Token creation process
Token update process
Token examples
IMPACT
TAKE AWAY
Lesson learned
- Design tools will continue to evolve. Remain focused on the intent of what your design system needs, not what it can do because of a design tool.
- Visual examples are critical for showing and not just telling stakeholders about the importance of design tokens and themes.
- Testing environments are critical in both design and code; they can help when reverting a defective publication with various breaking changes.
Some potential next steps
- Conduct discovery and analysis on desktop tools and apply them to benefit from a token pipeline.
- Tokenize motion properties to inform a motion principles playbook while providing reduced motion guidance as a requirement for accessibility.
- Explore data visualization with brand-theming support and color modes for color blindness.
0
举报
声明
收藏
分享
相关推荐
![[Pattern] Text wrapping and truncation](https://img.zcool.cn/community/674c2fa76f127sfj224iu54137.png?x-oss-process=image/resize,m_fill,w_520,h_390,limit_1/auto-orient,1/sharpen,100/quality,q_80)
评论你的想法~
表情
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
你可能喜欢
相关收藏夹
登录注册
推荐登录即可同步推荐记录哦
收藏登录即可加入我的收藏
评论登录即可评论想法
分享分享