- Discover the power of design tokens
- Create and maintain effective design tokens
- Communicate design tokens to designers and developers
Decisions. Decisions. Decisions. Faced with nearly infinite options, as a designer you make endless decisions through the design, development, and maintenance of every web site or application.
With design tokens, you can store those decisions and communicate them clearly to designers and developers on your team. You can design and ship products faster, more efficiently, and with greater confidence.
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes, such as values for margins and spacing, font sizes and families, or colors values.
With design tokens, you can capture low-level values and then use them to create the styles for your product or app. You can maintain a scalable and consistent visual system for UI development.
In this seminar, Jina tells you all you need to know to get started using design tokens.
Discover the power of design tokens
- Learn what design tokens are and how they relate to variables and constants
- Understand how they scale for web and native (iOS/Android/Windows)
- See code examples that show how design tokens move from decisions, to coding, to output for designers and developers: variables for Sass, Jason for iOS, or XML for Android
Create and maintain effective design tokens
- Name and organize design tokens effectively to increase their power and avoid the chaos of disorganization
- Use the tools that you already have to develop design tokens
- Learn tips to avoid some common pitfalls early on
Communicate design tokens to designers and developers
- Communicate design tokens to designers through style guides and swatches
- Distribute design tokens to developers to help improve communication and efficiency
- Explore the extra benefits of design tokens, including customization, theming, and user settings like night mode, cozy/compact
If you are a designer or developer who is looking for a way to scale design more effectively across your team or enterprise, come hear what Jina can tell you. After this seminar, you’ll have the resources you need to apply design tokens in your design system. You'll be better able to communicate your design decisions to designers and developers. And you’ll be ready for new features and unexpected changes.
Want to hear more from Jina on scaling design? Take a look at her article on "The Salesforce Team Model for Scaling a Design System."
Jina created her first style guide in 2004. She has grown to be a designer, developer, writer, and speaker on design systems ever since. At Salesforce, she is lead designer on the Lightning Design System. She also created the Design Systems Slack, which led her to start the newly formed San Francisco Design Systems Coalition. Recently, she organized Clarity, the first ever design systems conference.
She is active in the Sass community and leads the Sass brand and website. Jina was a tech editor for Dan Cederholm's Sass for Web Designers, organizes The Mixin (a front end meet up which has hosted talks by some of the most prominent members of the CSS/Sass community), and recently took ownership of Sass News. Follow @jina on Twitter.