Getting Started for Designers
The NYS Design System helps New York State teams build accessible, user-friendly, and consistent digital products. But using NYS Design System components alone does not guarantee a good design—strong user experiences come from a thoughtful process that includes:
- Understanding user needs through research
- Developing personas and user flows
- Wireframing and prototyping before building
- Testing usability with real users
--- Illustration of layers ---
The NYS Design System provides a standardized set of design decisions and reusable components to help reduce effort, maintain consistency, and free up designers to focus on higher-level UX work.
NYS Design System’s Figma Libraries
Designing and prototyping with the NYS Design System is powered by prebuilt Figma libraries that mirror the coded components. This connectedness makes it easier for designers and developers to collaborate and ensures that what is designed in matches what is built.
How the Libraries Work
NYS Design System’s Figma assets are organized into three libraries:
- NYSDS Components → The core file containing all UI components with built-in properties, variants, and prototyping features. NYSDS Component Library
- NYSDS Foundations → A design token library with colors, spacing, typography, and shadows—ensuring consistency across projects. NYSDS Foundations Library
- NYSDS Icons → A library of NYS-approved icons for use in interfaces. NYSDS Icon Library
How the Libraries Help
NYS Design System is designed to speed up and standardize UI design. Here’s how:
- Design & Code Parity: Components in Figma match the NYS Design System web components 1:1, reducing the need for custom styling. Developers can easily find and implement the same components seen in designs.
- Auto-Theming for NYS Agencies: NYS Design System adapts to agency branding using built-in Figma theme variables. Project templates automatically apply the correct colors, typography, and design tokens.
- Built-In Prototyping: Many components have pre-configured interactions (e.g., modals, buttons, and inputs). Click-through prototypes help teams test and refine user flows before development begins.
How to Start Designing with NYS Design System
- Search for “NYS Design System” in the Figma Assets panel and activate the libraries.
- Use the project template to start with the correct agency theming and design variables.
- Leverage components with built-in properties and variants to speed up your workflow.
Next Steps: Learn More About the Design System
NYS Design System isn’t just about using components—it’s about creating better, more accessible digital experiences for New Yorkers.