Learn the NYS Design System
A video tour by the NYS Design System team to help you learn how to quickly build accessible, mobile-friendly, user-friendly digital services with the Design System.
In this series, we’ll explain what a “design system” is and how ours works. Most importantly, we’ll show the value it can bring to you and to the residents that use what you build with it. Whether you’ve never used a design system before or you’re just new to ours, you’ll learn tips and ideas that will help you build better web applications and sites more quickly.
General Track
General
Introducing the NYS Design System
A quick look at what the NYS Design System is, why we built it, and how it helps teams make websites and apps that work better for everyone.
Video duration: 12:49
General
Accessible by Design
See how accessibility is built into everything we make so you can create digital services that everyone can use.
Video duration: 7:38
General
Four Ways You Can Use the NYS Design System
Four simple ways to bring the NYS Design System into your work, no matter what stage your project is in.
Video duration: 5:53
General
Getting Help and Giving Feedback
Get support, share your ideas, contribute to component proposals, and help us make the NYS Design System even better.
Video duration: 3:59
Design Track
Design
Intro to Designing with the New York State Design System
Learn how to start designing in Figma with ready-to-use NYSDS libraries, tokens, components, and icons.
Video duration: 7:59
Design
Using the Project Template
Jump start your project with our Figma starter project template, a solid foundation with standard headers, footers, layout, theming, and mobile-responsiveness.
Video duration: 12:34
Design
Using the Visual Component Library
Everything you need to know about NYSDS components in Figma, from basics like inserting into projects to advanced tips like building your own.
Video duration: 25:06
Development Track
Development
Intro to NYSDS Web Components
Get to know our web components: what they are, how they work, and why they're built to work in any framework.
Video duration: 4:47
Development
First Steps with the NYSDS Component Library
Step-by-step instructions for installing NYSDS and adding your first component.
Video duration: 6:11
Development
Using the NYSDS CSS Framework
Learn how to style your site with NYSDS design tokens, utilities, and themes.
Video duration: 4:08