Design Systems with Pre-Populated Design Token Variables
Working with a design system, I want to figure out the best approach for designing variables. I want to know what is the latest standard, tools, and existing code. What works and why. So it can be solidified into a programatic design choice, and continue to add benefits.
There can be a big difference between a ui theme and a more immersive brand experience in a web browser. It helps to be able to work with all of it, give it specific definitions and a shared process. I also look for the things themes can do, and can’t to create visually appealing and interesting designs.
Design systems are essential for maintaining consistency and efficiency in modern web and app design projects. By using variables as design tokens, you can create a bridge between design and code, ensuring that the values for colors, typography, spacing, and other design decisions are consistent across platforms.
In this post, I’ll explore some of the best Figma design system resources in September 2024 that take the extra step, and include pre-populated design token variables already applied to the framework, so you can get a sense for what is working for others.
Web design is constantly evolving. Creating and maintaining a design system that can evolve as rapidly means not reinventing the wheel for commonly used patterns and components. Leveraging well structured and supported frameworks that have already solved for the modern web, are widely adopted, supported, and have a thriving community can help keep pace with the requirements of the ever changing modern web.
These tools make it easier for designers to create robust and scalable design systems that align with brand guidelines and technical requirements. These design systems are some that can also save time designing a strategy and naming convention for the design tokens as well, because these particular Figma design system files already have not only the components and styles, but also the design token variables implemented.
Once a design system has variable values associated with design decisions in the form of design tokens, it can be programmatically translated across platforms, and used for a number of different outputs. If it’s programatic, like JSON, it can be input data for design tools for print, dev tools for web, and used to create plugins, scripts.
I’ve been interested in the latest benchmarks for the taxonomy of complex design token structures lately - the design systems variable structures and theming that support multiple brands and sub brands, multiple product release versions, multiple platforms, as well as all the nuances that come with working with them. I’ve discovered a lot that I would love to share, but I’m starting with a simple list.
Here’s a useful list of Figma files for designers who don’t want ti go that deep with forming a strong pov about design token variables, and who work in Figma. These are design systems that have the variables already included. Useful for benchmarking as you create the variables structure, and that part of the design and development process:
https://www.figma.com/community/file/1052575036916494414/tailwindcss-v3-4-4-design-system
Tailwind CSS is a popular utility-first CSS framework that offers a highly customizable approach to styling. This Figma file provides a design system aligned with Tailwind’s utility classes, pre-populated with design tokens for colors, typography, spacing, and more. It's for designers and developers who prefer using Tailwind for rapid UI development.
2. Material Design System and Material Theme Builder
https://www.figma.com/community/plugin/1034969338659738588
https://www.figma.com/community/file/1035203688168086460
Google's Material Theme Builder allows you to generate and customize Material Design themes using design tokens. It's a robust solution for those building apps with Material Design principles, providing tokens for color, typography, shape, and elevation.
https://www.figma.com/community/file/1078092050664989246
Relume Figma Kit is the UI kit that accompanies their AI website wireframe and components design tool. It provides a comprehensive style guide and component library pre-populated with design tokens that are also provided as variables in the Figma variable palette. Relume emphasizes accessibility and scalability. The Relume Figma kit can be cloned and themed. You can stop with basic theme changes to color and font, and see changes automatically applied to the rest of the Figma kit, or, take it much farther.
https://www.figma.com/design/YbRMuy7SRGuMpgxFqRMcAw/Primer-Web-(Community)
Primer is GitHub's open-source design system. This Figma community file includes design tokens and components that align with GitHub’s style guide, making it easy to maintain consistency when designing tools and apps for developers.
5. Shadcn UI
https://www.figma.com/community/file/1383203902908551058
https://www.figma.com/community/file/1314057472629730742/shadcn-ui-design-system-variables-theming
https://www.figma.com/community/file/1380975771508404648/new-2024-shadcn-ui-v1-2
Shadcn UI is the design system used with v0.dev, and also has a command line option which is interesting. It’s a Tailwind and Radix UI design system and has a theme designer. V0 is used for generating components with prompts, and getting popular.
https://www.figma.com/@atlassian
https://www.figma.com/design/fbAOlyzFBPcotJ2bkeHA4v/ADS%3A-Design-Tokens-(Community)
Atlassian’s design system offers a library of components and design tokens. It’s tailored for teams using Atlassian products and tools, providing a cohesive experience across platforms like Jira and Confluence. This is a comprehensive design system, and the design tokens are structured and incorporated into the Figma file. Useful for benchmarking for multi sub brand design systems.
Separate variables guidance info (although no Figma variables included):
https://www.figma.com/community/file/1182078880306369227/ads-components
https://www.figma.com/community/file/1256556188597365443
Radix is a design system that focuses on accessibility and usability. Shadcn UI is a customized version, and they are both interesting use cases. This Figma Radix resource includes pre-populated design tokens variables, making it a useful resource.
8. Finsweet Webflow Style Guide
https://webflow.com/made-in-webflow/website/client-first-cloneable
This style guide by Finsweet is optimized for Webflow users and comes with design tokens for colors, typography, and spacing, all within the Webflow environment. It’s useful for Webflow developers looking to maintain a client-first styling approach.
9. Microsoft Fluent Design System
https://www.figma.com/community/file/836828295772957889
Microsoft Fluent is designed to create apps that are fully integrated with the Microsoft ecosystem. It includes style variables.
10. Polaris Design System by Shopify
https://www.figma.com/community/file/1293614121185734569/polaris-styles
Polaris is Shopify’s design system. It provides a cohesive and consistent user experience for Shopify’s admin and merchant-facing products, complete with design token styles present as variables in the Figma file. This is another useful tool for benchmarking variable structures and syntax of design token systems.
Wrapping up…
These are just a few examples as I survey the latest design systems and their variable and syntax choices. There are many more.
Design systems are useful for creating consistent, scalable, and efficient design processes. Design systems with design token style choices pre-populated as variables in their Figma design system kit, make it easier to map out and learn from existing structures.
Choosing tools and frameworks is an ongoing process in the world of web design and development. They continually evolve. Whether you’re working with a specific framework like Tailwind, Material, or Polaris, or using a tool like Webflow, or building with React, having a system pre set up with the right variables applied to the design system has become one method that can potentially plus the Figma design workflow and ensure that designs are more easily translatable into code.
These resources are just a few I have found that provide a solid foundation to start building or enhancing your own design systems. There’s a lot that goes into ensuring that your projects are both visually cohesive and technically sound. By studying the different ways these design systems structure variables into design tokens, styles, themes, and syncing systems, these tools can help provide a benchmark, and enable designers to create a system, focus on creativity, maintain consistency across the designs, and speak a common language with development.
More Useful Examples, Tools, Resources:
https://storybook.js.org/showcase
https://zeroheight.com/showcase/
https://github.com/design-tokens/community-group?tab=readme-ov-file
https://www.youtube.com/tailwindlabs
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
https://webflow.com/blog/theming-design-tokens
https://help.figma.com/hc/en-us/articles/14506821864087-Overview-of-variables-collections-and-modes
https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables
https://www.figma.com/community/plugin/1222415071406554904/tokens-to-tailwind-css
