Design System Migration - Improving Consistency and Collaboration
Role: Junior Designer
Industry: Government
Deliverables: Design System in Figma
Overview
Our HCD team was given a short timeline to migrate from Sketch and Abstract to Figma. We faced a major roadblock: we had no centralized source of truth for our design system and limited access to the original files. With over 65 design collections and five active product work streams, the system needed to be rebuilt quickly, scalably, and in line with federal design guidelines.
I stepped into a pivotal design role during this migration, owning the strategy and rebuild of 40% of the new design system in Figma. My contributions helped establish a shared component library that was immediately usable across all workstreams and optimized for scalability, reusability, and accessibility.
The Process
Problem
Goals - Ensuring Success
What did we do?
Business impact
The previous design system was fragmented across Sketch files, with no single source of truth. Development hand-off and maintaining consistency was difficult without a central location for DSM documentation. Current documentation in Abstract was being decommissioned and many components weren’t scalable in Figma due to migration limitations. Our team needed a functioning DSM in Figma to continue wireframing and prototyping for future work.
Our high level goal was very clear - we needed a well built, robust design system in Figma. To ensure we would achieve that, we needed to define our success criteria. This meant using existing knowledge and quick but effective research to ensure we had industry best practices and well built existing DS as reference at the forefront of this effort. Our success criteria included:
Living documentation that is centrally located
Scalable and easily updated
Concise and comprehensive
Adhered to federal design systems + guidelines
Accessible
Since this effort would be built on an existing system, we had to gather all the ‘pieces’ before trying to assemble. This meant we need an full account of all our design resources and components to date (style sheets, PDFs of our design collections, and migrated components). Our goal was to organize all the pieces and map them using the Atomic Design Model as our foundation. In doing so, we would ensure each element (atom), component (molecule), etc of our design system was not only being used, but used intentionally.
It was extremely helpful categorizing all the ‘pieces’ we collected according to the Atomic Design Model. Elements included form inputs and field labels while pagination or filter would be categorized as molecules. This provided a basic structure for our design library in Figma that accounted for all elements used across the 4 distinct work products our team designs for.
With our foundation defined, we began rebuilding components. Since my design lead and I were collaborating on this effort, we created two other sets of criteria to ensure that all rebuilt components were standardized and robust; while adhering to our timelines. Our criteria was organized as:
High Priority:
All elements defined
Components and their variants built and linked to the library
Components can be scaled easily (Auto-layout is applied intentionally)
Accurate padding/spacing
Low Priority:
Color styles
Text styles
Deleting unnecessary components
Layers, Frames are properly name
In our clean up we uncovered components that were redundant or built in ways to mitigate Sketch constraints. We used this as an opportunity to restructure, consolidate, and simplify components. For example, the button component group had 95 different buttons and 10 button groups (as found in the existing style sheets). Leveraging Figma capabilities I began thinking through how to best capture all the defined states in the style guide. Using a combination of boolean, variant, and instance swap properties, I found the best organization to be:
Hierarchy (primary/secondary)
State (default, hover, focus, active, disabled)
Size (standard, large)
Icon placement (boolean for left/right), Instance Swap for Icon
Destructive/disabled/focus states
PDFs of the design collections and existing federal design systems were used as reference, ensuring our components adhered to all content and usage guidelines.
Our button component was reduced from 25 predefined buttons and 4 button groups (previously 95 buttons and 10 groups). Buttons instances were now easily changeable and clear documentation was defined for this component.
At the end of our rebuild our team now had:
Fully rebuilt DSM now accessible and usable across 5+ product teams
Consistent components reduced visual and functional design debt
Faster wireframing and prototyping due to reusable, tested components
DSM also served as a system audit—streamlining cluttered Sketch variants and uncovering opportunities for optimization
Created a reusable foundation for future scaling, new features, and developer hand-off
Impact
Reflection
Throughout this process I was learned how to and delivered value through:
Rebuilding 8 out of 19 core components, including buttons, form elements, modals, and cards
Reverse-engineering of components from static PDFs, style sheets, and legacy assets
Creating scalable Figma components with auto layout, variants, and instance swaps
Defining component properties based on functionality, not just visuals (e.g., button hierarchy, state, icon use)
Organizing and validating components against federal design system guidelines
Testing components in actual layouts to ensure flexibility and usability
Working cross-functionally with my design lead to QA and refine system decisions
This experience shifted how I think about design. I learned that structure, clarity, and reusability are just as impactful as creating new UI—and that the right systems can drive better work across the team. It also deepened my understanding of how tools like Figma can support design at scale.
This project marked a turning point in my transition into design. I took initiative, delivered under a tight deadline, and contributed meaningfully to a cross-functional, team-critical deliverable. I proved to myself and to others that I could own complex systems work, solve ambiguity through design thinking, and create lasting value for the team.