Lead Product Designer • 60% productivity gains • 50,000+ component inserts across 14 teams • 0.88% detach rate
NYS Design System Building USA’s Best State Design System in <12 Months
Overview
The Context
When I joined the State of New York’s Human Centered Design team, there was no unified design system, no component library, and no shared visual language across state agencies. The state’s brand guidelines were not being followed by designers and engineers. Each product team designed and developed in isolation, which made accessibility compliance, consistency, and collaboration extremely difficult.
The opportunity was enormous: to create a design system that could unify digital experiences for one of the largest public institutions in the country, ensuring every New Yorker could access clear, usable, and inclusive digital services.
My Role & the Team
I joined as a Product Designer and was promoted to Lead Product Designer within my first six months. I was the last to join the cross-functional design system team of seven people — including 2 designers, 4 engineers, and a brand specialist — working in close partnership with our sister Accessibility Team.
My role focused on building the system’s core Figma architecture, designing its most complex components, establishing variable and token structures, and leading documentation and training. I also contributed to the custom-coded documentation site, making the NYS Design System one of the most advanced public-sector design systems in the U.S.
The Challenge
Fragmentation Across Agencies
Before the NYS Design System, state agencies maintained their own UI styles, often duplicating work and missing accessibility standards. Components weren’t reusable, and handoffs between design and development caused delays and inconsistencies. In one team’s words, “Mockups took twice as long in UXPin as they do now in Figma with the NYS Design System.”
This fragmentation not only slowed delivery — it risked inaccessible user experiences for millions of New Yorkers relying on critical public services.
Opportunity for Change
The design system wasn’t just a visual refresh; it was a statewide transformation initiative. We aimed to create a design system that would:
- Meet or exceed WCAG 2.1 AA accessibility standards
- Deliver Figma–code parity through Web Components
- Significantly reduce design and development time
In short, this was a chance to build one of the most scalable and accessible government design systems in the country — from scratch.
Strategy & Goals
Design System Objectives
We set four guiding goals:
- Accessibility by default — every component meets WCAG 2.1 AA standards.
- Brand alignment — support all the 97 state agencies across 8 parent groups.
- Parity with code — each Figma component has an exact Web Component counterpart with property parity.
- Scalability — build a system that was robust but streamlined to scale to all the needs of teams in a way that supported growth of the system far into the future.
To measure success, I benchmarked progress against the U.S. Web Design System and tracked adoption through Figma analytics — monitoring component instances, detachment rates, and usage across teams.
System Architecture & Planning
We built the NYS Design System around Figma Variables, Auto Layout, and Code Connect, creating a variable-driven foundation that powers responsive behavior automatically.
I developed internal standards for naming, documentation, and structure that keep parity between design and code. This architecture made the system extensible, future-proof, and ready for token-based governance.
In less than a year, we had achieved 54% parity with USWDS and built 26 highly accessible components — a remarkable pace for a team starting from zero.
Process & Execution
Building the System Foundations
We started with a clean slate: no shared Figma library, no design tokens, no structure. My first priority was to establish a scalable, variable-driven foundation that could evolve without breaking downstream work.
I created the first library of 26 core components and 95 styles, using Auto Layout and Figma Variables to make every element automatically responsive. I also defined a consistent naming convention for all layers and variants, ensuring seamless integration with our front-end codebase through Code Connect.
Our Figma library was architected to serve as a single source of truth — highly structured, documented, and optimized for design-to-code parity.
Introducing “Fidelity Modes”
As our library matured, I saw an opportunity to solve a problem nearly every designer faces — the slow, manual process of switching between wireframes, mid-fi mocks, and final UI.
I invented Fidelity Modes, an award-nominated Figma Variable mode that allows designers to toggle instantly between low, mid, and high fidelity — no plugins required. It even works in FigJam, allowing teams to wireframe collaboratively, then paste screens back into Figma with fidelity settings preserved.
This innovation transformed our design workflow — reducing setup time dramatically and improving visual consistency from the very first iteration.
Collaboration with Engineering & Accessibility
Collaboration was built into every step. I worked closely with our lead engineer, two junior devs, and the accessibility team to ensure design and code evolved together.
We mapped every Figma layer to its corresponding semantic HTML element, aligning component naming conventions with code for use in Code Connect. This eliminated the common ambiguity between design intent and implementation, ensuring what we built in Figma was exactly what shipped to production.
Simultaneously, I partnered with our sister Accessibility Team to make every component meet or exceed WCAG 2.1 AA standards. My background in accessibility from previous roles helped identify and prevent issues early, leading to a system that’s inclusive by default.
4.4 Documentation & Training
Once our system was stable, I focused on documentation and adoption. I recorded a three-part training video series, built “Getting Started” Figma guides, and hosted workshops with teams across the state.
The goal wasn’t just to ship a system — it was to build a community around it. I wanted designers to feel empowered, not dependent, so the documentation was written in plain language and filled with practical examples.
These efforts helped drive remarkable adoption: 14 teams using the NYS Design System within the first year, with 16,052 total component instances and only a 0.88% detachment rate — a strong signal of trust and consistency.
Impact & Results
Quantitative Results
Within our first year, the NYS Design System has become one of the most advanced public-sector design systems in the U.S.
- 54% parity with the U.S. Web Design System (USWDS) achieved in 12 months
- 26 accessible, parity-matched components with identical Figma and code behavior
- 14 product teams onboarded, using the system daily
- 38,786 components inserted, with only 0.88% detached
- 50–60% faster design time, according to early team feedback
These numbers reflect not just adoption, but maturity — the system had become integral to how New York State builds digital products.
Qualitative Feedback
The metrics tell part of the story; the feedback says the rest.
Teams across the state love using the design system. One team said that ”The NYS Design System is not only improving our efficiency but also enhancing the consistency and quality of our designs.” Another said this after I spoke with them about a component question they had: “There is so much more we accomplish when we work together.”
This feedback reinforced that the system was more than just a toolkit — it was a shared foundation for collaboration and design culture.
Innovations & Differentiators
Design Innovation
The technical depth of the NYS Design System sets it apart from most government design systems. From variable-driven responsiveness to auto-layout logic that mirrors CSS grid behavior, the system was engineered to handle complexity elegantly.
I developed multiple Figma-native solutions that reduces the need for custom plugins, ensuring the system remains lightweight and maintainable. This included:
- Fidelity Modes (instant multi-fidelity design switching, with FigJam workaround)
- Screen Template component (with layout and grid built responsively)
- Responsive Components driven by Figma Variables
- Advanced Prototyping that just works out of the box
- Accessibility Properties built into Figma using hidden text properties
As of October 2025, designers do not need to install any plugins to be able to use the full functionality of the NYS Design System.
These innovations that exist together in no other design system we’ve seen, not only made the system powerful, but also establishes the NYS Design System as one of the world’s most robust and best built design systems — giving not only US States a strong alternative to the USWDS but government organizations worldwide a north star for design system possibility.
Workflow Optimization
I worked with the Design System Director to introduce automation and integration improvements to streamline ongoing maintenance.
By aligning Figma MCP, Code Connect, and version control, we reduced the manual burden of syncing design and code updates. Our documentation site updates automatically when component changes are published — turning what used to be days of cleanup into minutes.
The result is a design system that’s faster to maintain, easier to scale, and more accurate across disciplines.
Learnings & Next Steps
Lessons Learned
Every design system teaches its own lessons. For the NYS Design System, the biggest takeaway was that governance and collaboration matter as much as components.
I learned that scaling a system isn’t about perfect pixels — it’s about building trust between designers, engineers, and accessibility experts. Our strongest breakthroughs came from early co-creation sessions where decisions were made together, not handed off.
Balancing flexibility vs. control was another ongoing challenge. We needed a framework robust enough to enforce standards, but flexible enough for each agency’s unique use cases. The solution was lightweight governance: shared templates, versioning protocols, and in-system documentation that empowered teams instead of policing them.
Finally, I saw firsthand how accessibility-first design isn’t just ethical — it accelerates product velocity. By designing accessible components from the start, we eliminated dozens of post-QA fixes and improved reliability system-wide.
Roadmap Ahead
The foundation is solid — now the goal is evolution, adoption, and education.
In the next phase, the NYS Design System team will focus on:
- Achieving 100% parity with the U.S. Web Design System (USWDS) for all components — continuing to benchmark against national standards while maintaining New York’s state-focused, accessibility-first approach.
- Releasing a full React implementation of all NYSDS components, enabling seamless integration with modern front-end frameworks and ensuring code parity with our Figma library.
- Integrating SASS into our front-end workflows to improve maintainability, support theming at the agency level, and streamline token updates between design and code.
- Publishing the NYSDS Figma Library to the Figma Community, including an Organization Variable Collection that lets designers instantly rebrand screens for specific towns, cities, counties, or state agencies — empowering local teams to design within the state’s unified framework. This also enables other states to fork NYSDS as an open, accessible alternative to the USWDS.
- Expanding our Figma Variable Architecture to include motion, elevation, and spacing tokens — ensuring consistent interaction design and depth across all components.
- Polishing our documentation reference site with improved navigation, visual clarity, and live component demos — making it as intuitive to explore as it is to contribute to.
- Increasing adoption among engineering teams through targeted onboarding sessions, contribution guidelines, and hands-on code examples — bridging the gap between design intent and implementation.
- Growing our video learning series with short, focused tutorials on building components, using variables, and contributing to the system — designed to make onboarding faster and more approachable for new designers.
- Introducing design system health dashboards to track adoption, component usage, and parity metrics — giving design and engineering leadership real-time insight into system performance and ROI.
Reflection & Closing
Personal Reflection
This project changed how I think about systems, leadership, and design impact.
Leading the NYS Design System wasn’t just about component quality — it was about establishing a design culture grounded in accessibility, efficiency, and collaboration. I learned how to align diverse stakeholders, guide engineering discussions, and scale decisions across 14 independent teams — all while keeping design approachable and human-centered.
Building the NYS Design System reaffirmed a core belief I’ve carried throughout my career: the best design systems aren’t just technical frameworks — they’re trust frameworks. They make it easier for teams to make good design decisions, and they help users experience government with clarity and dignity.
The Broader Impact
The New York State Design System has become a blueprint for how large public institutions can modernize digital infrastructure. It sets a precedent for accessible, scalable, and open-source government design — one that other states are already beginning to look toward.
But for me, the impact goes beyond the product. the NYS Design System represents what can happen when design, code, and accessibility unite under one mission: improving lives through clarity and craft.
That’s the work I’m most proud of — and the kind of work I aim to keep doing at all organizations I have the opportunity to make an impact at in my career.
Recognitions
More Projects
ProjectsFixed PDF Ticket Scanning Issue for University Events, 15% Accuracy ↑Fixed PDF Ticket Scanning Issue for University Events, 15% Accuracy ↑PDF Tickets
PDF eTicketsImproved Task Flows for Avid Kindle eBook ReadersImproved Task Flows for Avid Kindle eBook ReadersMobile App
Mobile App
