design systems · 2024 · 5 months · gov
Breaking Down Silos Through a Collaborative Design System in Figma
Breaking Down Silos Through a Collaborative Design System in Figma
Breaking Down Silos Through a Collaborative Design System in Figma
Confidentiality Note: To respect confidentiality, certain visuals have been adjusted. The overall process, design challenges, and results are based on real work.
Confidentiality Note: To respect confidentiality, certain visuals have been adjusted. The overall process, design challenges, and results are based on real work.
50%
Increased Task Completions
30%
Front-end error reduction
40%
Less duplicative code
client
gov agency · USCIS
role
ops & tooling FA lead
timeline
5 months
tools
axure · figma · storybook · mural · notion
axure · figma · storybook ·
mural · notion
project overview
When I joined the team, design efforts were siloed in Axure and isolated from actual frontend architecture and too slow to keep pace with the team's rapid release cycle. There was no single source of truth, and both developers and designers were hindered by documentation that was either too minimal to guide or too dense to be actionable. All the while, developers needed to move quickly to support products processing 85% of U.S. immigration and asylum cases, impacting upwards of 8 million people annually.
When I joined the team, design efforts were siloed in Axure and isolated from actual frontend architecture and too slow to keep pace with the team's rapid release cycle. There was no single source of truth, and both developers and designers were hindered by documentation that was either too minimal to guide or too dense to be actionable. All the while, developers needed to move quickly to support products processing 85% of U.S. immigration and asylum cases, impacting upwards of 8 million people annually.
When I joined the team, design efforts were siloed in Axure and
isolated from actual frontend architecture and too slow to keep pace with the team's rapid release cycle. There was no single source of truth, and both developers and designers were hindered by documentation that was either too minimal to guide or too dense to
be actionable. All the while, developers needed to move quickly to support products processing 85% of U.S. immigration and asylum cases, impacting upwards of 8 million people annually.
the challenge
Axure didn't map to frontend code, and the design system lacked clear documentation. Teams operated in silos and developers were often left to make design decisions without UX input, which quietly accrued technical and UX debt. We needed a tool that could scale the design system and support real-time collaboration for seamless developer handoff.
Axure didn't map to frontend code, and the design system lacked clear documentation. Teams operated in silos and developers were often left to make design decisions without UX input, which quietly accrued technical and UX debt. We needed a tool that could scale the design system and support real-time collaboration for seamless developer handoff.
from the eng side
"Implementation is slowed down because developers are left to make design assumptions."
"Implementation is slowed down because developers are left to make design assumptions."
Lead Developer, USCIS
the constraints
What we walked in with and had to design around.
What we walked in with and had to design around.
What we walked in with and had to design around.
01
Designers working in silos.
Designers working in silos.
Axure lived in its own world. Designers couldn't see what engineering was actually shipping, and engineers couldn't see what design had decided.
Axure lived in its own world. Designers couldn't see what engineering was actually shipping, and engineers couldn't see what design had decided.
02
Manual asset recreation.
Manual asset recreation.
Manual asset recreation was required to migrate from Axure to Figma because assets were not transferable between systems.
Manual asset recreation was required to migrate from Axure to Figma because assets were not transferable between systems.
03
A real tool-learning curve.
A real tool-learning curve.
Most of the team had lived in Axure for years. Any new tool had to prove itself against muscle memory on a live release cadence.
Most of the team had lived in Axure for years. Any new tool had to prove itself against muscle memory on a live release cadence.
04
Component-structure mismatch.
Component-structure mismatch.
Axure components are built around behavior and interaction logic, while Figma components are structured for visual consistency and system-based reuse, making them incompatible without redesign and standardization.
Axure components are built around behavior and interaction logic, while Figma components are structured for visual consistency and system-based reuse, making them incompatible without redesign and standardization.
the process · 03 phases
Three phases that guided the migration.
We introduced a structured framework that combined research, cross-functional collaboration, and phased implementation, moving the design system from Axure to Figma while keeping the release train running.
phase 01
Audit the existing system.
Led a month-long audit with designers and engineers to assess the legacy Axure system, identifying deprecated components, inconsistent patterns, and redundant assets. Only scalable, reusable elements moved to Figma.
what we found
— Inconsistent styling across products.
— Many undocumented patterns that only existed in people's heads.
phase 02
Assess the existing documentation.
Evaluated existing guidance, component standards, and usage patterns to determine what was still valid and what the team had been quietly working around.
what we found
— Documentation that was either outdated or nonexistent, creating gaps for anyone trying to transition to Figma.
the strategy that solved it
— Restructured documentation to align with the new Figma-based system, making it easier for teams to find component usage and follow style guidelines.
— Used AI-assisted research to surface industry best practices and inform our component guidance.
— Collaborated directly with designers and engineers to rewrite and modernize documentation around the new components and interaction patterns.
phase 03
Drive implementation.
Facilitated cross-team alignment early with engineering, product, and research leads to ensure components were feasible, documented, and easy to integrate into dev pipelines. Weekly component peer-reviews, Figma workshops and iterative improvements driven by hands-on feedback.
what we saw
— Cross-team collaboration and engagement went up.
— Developer handoffs got noticeably shorter.
the process · 03 phases
Three phases that guided the migration.
We introduced a structured framework that combined research, cross-functional collaboration, and phased implementation, moving the design system from Axure to Figma while keeping the release train running.
01
phase 01
Audit the existing system.
Led a month-long audit with designers and engineers to assess the legacy Axure system, identifying deprecated components, inconsistent patterns, and redundant assets. Only scalable, reusable elements moved to Figma.
what we found
— Inconsistent styling across products.
— Many undocumented patterns that only existed in people's heads.
02
phase 02
Assess the existing documentation. (AI-Assisted)
Evaluated existing guidance, component standards, and usage patterns to determine what was still valid and what the team had been quietly working around.
what we found
— Documentation that was either outdated or nonexistent, creating gaps for anyone trying to transition to Figma.
the strategy that solved it
— Restructured documentation to align with the new Figma-based system, making it easier for teams to find component usage and follow style guidelines.
— Used (DHS Chat) and suggest AI-assisted research to evaluate components and suggest industry best practices and component guidance, speeding up documentation curation 50% faster.
— Collaborated directly with designers and engineers to rewrite and modernize documentation around the new components and interaction patterns.
03
phase 03
Drive implementation.
Facilitated cross-team alignment early with engineering, product, and research leads to ensure components were feasible, documented, and easy to integrate into dev pipelines. Weekly component peer-reviews, Figma workshops and iterative improvements driven by hands-on feedback.
what we saw
— Cross-team collaboration and engagement went up.
— Developer handoffs got noticeably shorter.
the outcome
A centralized system, a single source of truth, a release train that kept moving.
A centralized system, a single source of truth, a release train that kept moving.
A centralized system, a single source of truth, a release train that kept moving.
Implementing a centralized design system let teams design and build more efficiently by standardizing components and patterns, strengthening collaboration between dev and design, streamlining handoffs across product lines, and giving the team a future-ready foundation for continued growth.
Implementing a centralized design system let teams design and build more efficiently by standardizing components and patterns, strengthening collaboration between dev and design, streamlining handoffs across product lines, and giving the team a future-ready foundation for continued growth.
a centralized figma design system · core ui elements
a centralized figma design system
core ui elements
System Docs website tree
a centralized figma design system
core ui elements
a unified documentation platform · single source of truth for designers and developers
a unified documentation platform
single source of truth for designers
and developers
adoption results
Measurable lifts across performance, efficiency, and adoption.
Measurable lifts across performance, efficiency, and adoption.
Measurable lifts across performance, efficiency, and adoption.
+50%
increased task completions
Fewer UI inconsistencies across products meant workflows users could actually finish.
−30%
front-end error reduction
Less custom code, less UI built from scratch and a lot fewer bugs that used to slip through.
−40%
less duplicative code
One source of truth replaced the feature-specific UI rebuilds that had been quietly eating sprint time.
100%
adoption success
Complete integration across design and development teams; no hold-outs, no parallel systems.
+50%
increased task
completions
Fewer UI inconsistencies across products meant workflows users could actually finish.
-30%
front-end
error reduction
Less custom code, less UI built from scratch and a lot fewer bugs that used to slip through.
-40%
less duplicative
code
One source of truth replaced the feature-specific UI rebuilds that had been quietly eating sprint time.
100%
adoption success
Complete integration across design and development teams; no hold-outs, no parallel systems.
after
"Having a single source of truth in Figma means fewer back-and-forths with design. The specs are clear, and
the components translate smoothly into code."
"Having a single source of truth in Figma means fewer back-and-forths with design. The specs are clear, and
the components translate smoothly into code."
Senior Frontend Developer, USCIS
Senior Frontend Developer,
USCIS
why it worked
Six things we got right and would do again.
Six things we got right and would do again.
Six things we got right and would do again.
01
Brought stakeholders in early.
Brought stakeholders in early.
Engineering, product, and research had a seat at the table from the first week, so alignment wasn't something we had to retrofit later.
Engineering, product, and research had a seat at the table from the first week, so alignment wasn't something we had to retrofit later.
02
Answered skepticism with demos.
Answered skepticism with demos.
Concerns about the new tool got addressed with working components in the actual product context, not with slides.
Concerns about the new tool got addressed with working components in the actual product context, not with slides.
03
Embedded the system in daily work.
Embedded the system in daily work.
Weekly Figma workshops, paired work, and live handoffs turned "learning the new tool" into just doing the job.
Weekly Figma workshops, paired work, and live handoffs turned "learning the new tool" into just doing the job.
04
Built a real QA migration workflow.
Built a real QA migration workflow.
Every migrated component had a clear checklist and an owner. No silent assumptions, no orphaned patterns.
Every migrated component had a clear checklist and an owner. No silent assumptions, no orphaned patterns.
05
Made documentation live in Figma.
Made documentation live in Figma.
The docs lived next to the components, so updating one meant updating both, and the single source of truth stayed true.
The docs lived next to the components, so updating one meant updating both, and the single source of truth stayed true.
06
Celebrated the small wins publicly.
Celebrated the small wins publicly.
Team morale isn't a fluffy concern on a migration. It's the thing that keeps people shipping on a system they're still learning.
Team morale isn't a fluffy concern on a migration. It's the thing that keeps people shipping on a system they're still learning.
annjalina.k
Senior UX/Product designer based in Maryland. Research, systems thinking, measurable outcomes.
colophon
built in framer
fraunces + inter + jetbrains mono
© 2016–2026 · all rights reserved
annjalina.k
Senior UX/Product designer based in Maryland. Research, systems thinking, measurable outcomes.
colophon
type: fraunces + inter
built in framer
© 2016–2026 · annjalina kearse · all rights reserved