Timeline
6 months
Role
Lead Designer in the team of 3 designers. Leading strategy, planning, building and maintaining design system.
Tools
Figma, Figma Tokens, Github
Challenge
How might we build a flexible design system to bring order & consistency to design and save time for front-end development?
Context
We were in the process of redesigning the app from the ground up. As part of that big project, we also started working on design system.
Back then, there were only separate unorganised design libraries mostly for web editor. We needed system and order.
Through communication with Dev leads we figured out what their problems, expectations, requirements and suggestions are.
Key Problems
Problem
Inconsistent design & absence of one and only source of truth
Problem
Impossible to scale the design
Problem
Elements in design libraries did not match actual components in code
Problem
Developers spent too much time on front-end tasks
Research
We conducted research & analysis of existing solutions. It allowed us to understand the scale of the project, best approach that would work for us and make a rough time estimate as well.
Focus on the relationship between design and development
Identify the values the design system will be built upon
Emphasize intentional handoff processes
Allow other teams to create sub-design systems that contribute to the whole
Accept the bumps in the road
I detailed the architecture of the future design system, prepared slides to communicate it to the team so they can understand it better, align and follow along.
After that was done, we’ve put together an Inventory list with all the essential libraries and components, I created and assigned tasks for my team.
We reviewed existing design libraries, reorganised and expanded them into Foundation libraries, which consisted of:
Colors
Icons
Icons library included around 140 unique custom made icons, each in 4 weights, 8 sizes and most in 2 styles (filled, stroke). So, 1120 icons in total.
Tokens
We implemented 3-fold structure for design tokens. First level, Base token, represented raw design decision. Second level – Appearance token – described a property or appearance of specific element (where and how the color is used, for example).
Finally, third level – Functional token – defined function of specific design element, so designers & devs did’t need to guess what color to pick in a specific state of a button, for example.
With Foundations & essential Tokens in place we continued to creating Component libraries.
For every feature we shipped we prepared a detailed specification on each component, describing all states, behaviour, which tokens were used, as well as hard values.
It helped designers to keep things in perfect order, and developers to see all the info they need and simply pull required design tokens from Github.
We integrated Figma Tokens plugin in order to store, organize and then export the tokens to Github.
Results
We managed to build and embed into our design process a new system, which significantly improved design quality and consistency and saved lots of time for developers and designers.
6 days
3 days
Average time for front-end tasks for new UI-screen with 5-10 new components significantly decreased.
Increased efficiency
Streamlined design workflow, increasing efficiency while decreasing time spent to design new screens, flows or features.
Improved handoff
Our detailed Documentation reduced friction between design and dev teams significantly.
