Establishing Design System
I created the company's first design system that is still used to this day.
ROLE
Product Designer
TIMELINE
3 Months
TEAMS INVOLVED
Product, Tech, Development
TOOLS / SKILLS
Token Management
Design Systems
[TEST]
TLDR;
No unified source = messy results
I created the company's first design system, it covers all the fundamentals any product designer needs while maintaining structured naming schemes for developers. The system included primitive and semantic tokens, components, and templates which totals over 200+ usable items.
While it was a personal side project in the beginning, it was fully adopted into the design-dev hand off process and used by 3 teams.
22%
Faster Hand-off
4
Teams Adopted
100+
Components made
CHALLENGES
Why do we need a Design System?
The major complaints I found from the app store and from fellow users of the app. The problems became clear:
Visual Inconsistency
Description info placed here.
Release Delays
Description info placed here.
No Guidance
Description info placed here.
We require to a unified and efficient system that is 100% modular to adapt to consistent updates across all of our products.
-Sr. Product Manager, Accessibility Lead
APPROACH
Aligning on the vision we have for the Design System
To ensure the pain points mentioned above are addressed, I created goals and shared them with my team. Transparency is important to ensure the team is aligned. The overall process for this design system was:
Research
Gather all existing brand items and software details into one repository.
Identify any issues with the ui and ux of the software.
Define
Organize and sort the simplest of items needed.
Define Product's Identity and principles.
Create
Build the library in Figma - starting off with creating variables.
Evolve simple tokens into components and modals.
Document
Label all naming conventions and highlight use cases for tokens and components.
Release updates with detailed notes to ensure consistency with company vision.
EARLY STEPS
I identified common UI and UX issues.
Once I gathered the majority of the assets we use in the software, there were many cases where the lack of a design system were apparent. Image below showcases the discrepancies between two different modules of the software.
To highlight a few of the issues labelled below:
Colours
Input Fields
Spacing
Interactions
DEFINE
Setting the Framework
With any system, I start off with laying out how it would be layered. I chose a mind map to visualize how the design system would be structured.
I also identified 3 guiding principles to lay the flow of the system:
Enabling Practitioners
What sets Ammar apart is his ability to bridge teams
Fueling Innovation
What sets Ammar apart is his ability to bridge teams
Safety Comes First
What sets Ammar apart is his ability to bridge teams
ACTION
With Foundation set - I started creating the variables that would make up our tokens
Primitive Tokens
Semantic Tokens
moving onto components, I created the ones most frequently used.
with these components, I created templates for screens to reduce time finding the correct screen for mock ups.
FINAL TOUCHES
Revolutionizing with Figma Slots
As of 2026, Figma released an update to their Component functionality with a new property called "Slots", this update changed the game as it reduced the amount of component variations needed, especially useful when it involves changes in minor details or fields.
I added slots into our components to improve the flexibility of our components. The most positive improvement seen was in the use of templates as before I could not make them components due to the highly-malleable functions they serve but with slots, I was able to add them into the component library. This reduced over 30+ repetitive components and increased mock up speeds by 12%!
RESULTS
after reviewing the system with the team, I received positive feedback.
👨🦱
Senior Full stack Developer
Your knowledge is always top notch and I can always rely on your creativity.
🧑🏻
Senior Product Manager
Thank you for creating this - it has not only significantly improved the consistency for the tech team but also made my life much easier. You are the goat 🐐.
🧑🏽
Data QA Engineer
"Ammar, what would i do without you?". With a design system in place it's also gonna be more pleasing to perform my test cases.
👩🏾
Front End Developer
I wish you were involved with the team from the beginning, we would've had a significantly stronger product with your expertise and amazing communication skills. You're gonna do great out there!
The positive feedback I received was very reassuring that this system will be of great help to our team. I was not going to just stop here though, a system needs to have documentation in place to ensure sustainability and ease-of-use. I got to creating the simple guide explaining how to best utilize the Design System (used Notion and ZeroHeight for this - they came in clutch).
FOR THE FUTRE
the lessons I learned here shaped my interest foundations for product design.
Structure allows growth
Design Systems at first sounded redundant to an accelerating start up - systems would only restrict our growth no? Completely wrong on this assumption and I'm glad I learnt first hand the importance of having structure - no foundation means flimsy architecture.
I look forward to my next project involving design systems and am more excited to see how they evolve with AI now in the picture!
Stay up to date!
While creating the design system, I found restrictions with patterns that were found during the design process. Initially I believed this would pose a problem when releasing the system. Thankfully though, there was an update from Figma which resolved this issue - I wouldn't have known about this without doing research!
© Built & Designed by Ammar Ul Haque, 2026