How I increased the speed of design and implementation by creating a design system from scratch.
Creating a multi-level token based design system to support multiple products, themes, and modes.
Quick facts
Strategy
Cross-functional collaboration
Components
Tokens
Design system
Efficiency
Scalability
Communication
Product design
UX
UI
Creating a multi-level token based design system to support multiple products, themes, and modes.
3 min
🔙 Background
A lot of time, effort, and budget for both design and development was being spent in the back and forth of small details that were important to get right but could potentially be streamlined so energy could be better focused on creative tasks.
As the projects grew and patterns were being established on the UX side, the redundancy of development and design decisions grew as well. Instead of quickly being able to copy/paste the same component, everything was being built from scratch each time and was hindering agile iterations and scalability efforts
Without a central base and single source of truth for components UX debt began to grow and inconsistencies began to show up.
As the product design team grew it became crucial for onboarding and efficiency to have one place to look for the most recent components and patterns to maintain consistency and quality.
✅ Goal
💪 Challenge
Learning about a new space from the ground up and creating a framework that would be flexible enough to cover existing patterns and enable growth and iterations for new designs.
👩💻 My role
🤝 Worked with
Engineering team and brought the 2nd product designer into the project at different decision points.
⚡ The process in a nutshell
Mindset
Learning from others
Being a small team with many responsibilities and projects I knew I could learn a lot from analyzing what others have done. But I didn’t stop to copy and paste. Looking for references and knowledge that already existed, I committed to making it my own and the new world of design systems became clear.
To speed up the process, I built on top of and adapted open source resources to fit our needs.
Me engaging conversations with the design system community to clarify and understand different concepts.
Getting the details right
The future success and durability of the design system would stem from getting the details right in the beginning. It took series of conversations, experiments, and questions at every stage of the process until we felt confident moving to the next step.
Screenshots of some documentation and meeting notes.
Socializing and knowledge sharing
Conversations in a slack community I co-created and run.
Token sets
To create the ultimate flexibility and scalability across all themes (products) and modes (dark, light, and sepia) I used a 2 level token system and split tokens into set that could be configured into themes.
Each theme has its own light and dark base tokens that are combined with global base tokens. In turn those base tokens are mapped to a global, dark, and light semantic sets that automatically change by theme.
Base (right) and semantic (left) tokens
Semantic tokens in light (left) and dark (right) mode.
🎉 Making it real
Syncing with code
Form component
Utilizing real use cases and advanced Figma capabilities (this is before Figma variables were released) I created base components needed to created increasingly complex components that serve many use cases.
One example is that after seeing the similarities between many use cases such as a popup/modal, unsubscribe form, login/create account pages, it made sense to create a form component that combined all of those scenarios.
Form component displayed in two themes.
This deceptively simple form was built off of many base components and slots with the flexibility to be configured for various needs.
Child component and various configurations of the form component in two themes and modes.
Form component is a child component of the modal component.
The form component configured for full page and modal designs.
The same form component is being utilized across of these use cases and screens. (Screens showing were designed by another designer on the team)
It could be done!
Chabad.org hosts thousands of content pages across multiple themes. I created a sample of the simplicity and cohesion we could bring to the product thanks to using a multi-layered token system and components.
I showed the following clip of this page to the PM. This was his reaction.
Wow, this is awesome! I know you’ve been talking about this, but I didn’t think it could actually be done.
Light mode purple theme, light mode blue theme, sepia mode and dark mode purple theme - made in Figma.
📕 Reflections + impact
🔬 What I learned
If I were to go at it again, I’d start working with an established design system sooner. Transitioning my existing work into a newer framework was challenging and I had to let go of things that took me time to come up with in the first place, such as color and typography and how they were used.
🪜Next steps
Continue building out the design system, maintaining, and accommodating new patterns and product visual needs.
Have questions? Want to work together?
Or find me on LinkedIn + rochelpolter@gmail.com.
