Enterprise Design System
Modernizing components for cross-functional teams using Figma variables.
What are we trying to solve?
- How might our design system better support 30+ products across multiple tech stacks, including React, Salesforce, and Native Mobile?
- How might we reconcile substantial change since the design system’s original design 4-5 years ago?
- How might design in Figma catch up to development, who in some cases has a better definition of use cases?
- How might our design system fundamentals (like responsiveness and accessibility) get reprioritized to modernize our components?
Research & Discovery
- We evaluated the best platforms for building and maintain design tokens, landing on Figma variables feature and the Design Tokens plugin for Figma.
- We spent our first sprint using the 3rd party plugin, Tokens Studio, and found that it did meet the requirements for tokenization and theme support.
- We replicated our existing design tokens and button component work into the new Figma variables feature to determine if it could support our goals.
- While there are some style properties not yet supported (like typography) by the Figma variables feature, we felt the native feature stability, improved token workflow, and the integration with the new developer mode were well worth the switch in our toolsets.
What are the Outcomes?
- We reorganized our design system team into cross-functional groups where designers and developers can better collaborate in the same workstreams.
- We established a proper Figma variables structure with primitive, semantic, functional, and component collections and began work to tokenize each component in our design system.
- We tested for contrast and assigned interaction state colors within the functional variables, setting up the system for proper theming.
- We rebuilt many components from the ground up in Figma, standardizing component properties, updating for responsiveness, and using boolean and instance swap properties to build a leaner component library.
Figma Variables Structure
Library Components
Figma Plugin Published
As our variable collections got larger and more complicated, we needed a way to see how references were used throughout the variable collections. This plugin allowed us to search across the local collections and count the results. In trace mode, we could select a component and view variables associated with it.
The plugin is published and available for use from the Figma community here: Variables Count Find Trace plugin