Transforming chaos: building a design system after launch
In just 30 days, I developed a comprehensive design system for Gadget, a serverless JavaScript platform designed to accelerate web app development and simplify maintenance. Like many startups, Gadget was moving fast, and efficiency was crucial.
gadget.dev
At the time, the sole designer had created over 30 Figma files while shipping out their MVP. Prototypes and designs were in production—but there was no design system in place. This resulted in inconsistent styling, disorganized files, and a cumbersome update process. My task was clear: sift through the existing files, establish a solid design system, and set up a process that would help improve consistency and efficiency. With more developers and designers joining soon, we had to move fast and get it right.
Here’s an example of the login screen in Figma —without connected components, each update had to be made individually, and there were no states in place.
Timeline Breakdown
Week 1: Research & Planning (30 hours)
Kickoff & Stakeholder Meetings (4 hours)
Met with key stakeholders to identify pain points, project goals, and set clear expectations.
Audit Existing Files (12 hours)
Reviewed over 30 Figma files, identified inconsistencies, and created a plan for standardizing components.
Define Design System Structure (14 hours)
Outlined the design system's core structure, including components, typography, color, spacing, and initial organization guidelines.
Week 2: Component Creation & System Structure (35 hours)
Set Up Design System Foundation (12 hours)
Organized Figma files, established project templates, and defined the components library.
Create Core Components (Icons, Buttons, Inputs) (15 hours)
Designed and organized key components, such as buttons, form fields, and icons, ensuring they could be reused consistently across the platform.
Rebuild with Auto Layout (8 hours)
Rebuilt groups and frames using Auto Layout to ensure the components were responsive and scalable.
Week 3: Refining & Implementing Updates (35 hours)
Test and Migrate Components (10 hours)
Moved components into the new system, ensuring they retained all connections and were ready for use in other designs.
Develop Documentation & Design Guidelines (15 hours)
Created clear documentation outlining the system's usage, design patterns, and naming conventions.
Stakeholder Review & Feedback (10 hours)
Conducted a review session with stakeholders to gather feedback and make necessary adjustments to components and guidelines.
Components sample
Week 4: Finalizing & Delivery (30 hours)
Refine and Finalize Components (12 hours)
Polished all components based on feedback, ensuring each element was refined and well-documented.
Prepare for Handoff (10 hours)
Organized all assets and documentation for a smooth handoff to the development team, ensuring clear communication on how to implement the design system.
Final Presentation & Review (8 hours)
Delivered a final presentation to showcase the design system, demonstrate key features, and walk through the documentation with the team.
Custom icons and color
Key Success Factors
Moving Components Without Breaking Connections: A useful Figma trick—cut and paste retains the component connections, which helped me reorganize files without disrupting existing work.
Rebuilding with Auto Layout: The first step to making the system scalable was rebuilding all groups and frames using Auto Layout, ensuring flexibility for all screen sizes.
Training & Documentation for Handoff: Before my departure, I made sure the team was fully equipped to manage the system. I conducted live workshops on Figma workflows, including using branches, approving library updates, and maintaining component hygiene.
