Design System
I was the sole designer responsible for rebuilding the company’s design system during the transition from Sketch to Figma. The old system was inconsistent across applications and incompatible with Figma, so I created a new system from the ground up. I defined the color palette, text styles, and core components, then applied them to new product pages and apps. I also built full dark mode support by designing all colors and styles for it. This work provided a consistent, modern foundation for the company’s design ecosystem.
Problem & Context
The old design system in Sketch was outdated and fragmented. Many components were unused or inconsistent, while some actively used ones were missing from the library. This caused apps and even individual pages to look different, creating a poor and inconsistent user experience.
With the transition to Figma, the Sketch symbols were not compatible, and there was no migration path. Existing assets were largely unusable, requiring a complete rebuild. Time was limited and I was the only designer, so prioritization was critical.
Goals
Build a new design system in Figma with styles and components we can use again.
Make the UI the same across apps with buttons, inputs, tables, text, and colors.
Make sure new components can be used fast in product updates.
Execution
1. Foundations
Colors
Defined a palette with states for default, hover, active, and disabled. Ensured accessibility by checking contrast and designed the system to work seamlessly in both light and dark modes.
Typography
Established text styles for headings, body, and labels, creating a clear and consistent type scale.
Spacing & Layout
Applied a unified spacing system across all components, improving visual rhythm and creating cleaner, more consistent page layouts.
2. Components
Common Components
Built core components in Figma using auto-layout and variants to handle states and sizes.
Buttons
Primary, secondary, and icon-only buttons, with hover, active, and disabled states.
Form Inputs
Text fields, dropdowns, date pickers, and checkboxes, with consistent labels, spacing, and error states.
Tables
Headers, rows, pagination, and empty states, with variants for density and bulk actions.
Text Styles
Defined headings, body text, and captions with clear line height and spacing rules.
Other Components
Hierarchy lists, filter panels, modals, and navigation. Structured as smaller parts to simplify updates.
3.
File Structure
Components in Figma were grouped by type, such as buttons, inputs, and tables.
Simple names were applied to make them easy to search.
Multiple states and variants were created for each component. Although this required more time to build, it made the components much easier and more efficient to use in design. It also allowed developers and PMs to clearly see how each component should look and behave. This approach reduced confusion, saved time during handoff, and ensured consistency across the product.
Overview
The project delivered a new design system in Figma with a complete set of colors, text styles, and core components, ensuring consistent UI across new pages and apps. Clear files and well-structured components serve as simple documentation that others can easily build on. Being the only designer required focusing on essentials and shifting priorities based on project needs. The system now provides a strong foundation, ready to expand with advanced components, usage notes, and closer alignment between design and code implementation.