Home
Tech & Development
Web & Interface Design
Design Systems
🎨

Design SystemsCurated Directory — Courses, Videos,  Books & Websites

15 Resources
15 Videos

Top Rated

1

System Design Concepts Course and Interview Prep

2

How to Answer System Design Interview Questions (Complete Guide)

3

8 Most Important System Design Concepts You Should Know

About Design Systems

Explore the world of Design Systems, where creativity meets consistency! Discover resources on building cohesive UI components, establishing design guidelines, and fostering collaboration between design and development t…

Trending Now

System Design Concepts Course and Interview Prep
Video

System Design Concepts Course and Interview Prep

This complete system design tutorial covers scalability, reliability, data handling, and high-level architecture with clear ...

design systems
System Design
+4
View Details
How to Answer System Design Interview Questions (Complete Guide)
Video

How to Answer System Design Interview Questions (Complete Guide)

Make sure you're interview-ready with Exponent's system design interview prep course: https://bit.ly/3M6qTj1 Read our complete ...

design systems
System Design
+4
View Details
8 Most Important System Design Concepts You Should Know
Video

8 Most Important System Design Concepts You Should Know

Get a Free System Design PDF with 158 pages by subscribing to our weekly newsletter: https://bit.ly/bbg-social Animation tools: ...

design systems
System Design Concepts
+4
View Details
Welcome to design systems - Lesson 1 : Introduction to design systems
Video

Welcome to design systems - Lesson 1 : Introduction to design systems

This lesson defines a design system by breaking it into concrete building blocks—design tokens, reusable components, patterns, and documentation—so you can immediately see where to start organizing UI work. It walks through practical Figma workflows (free signup link provided) and the Habitz community file to show how systems speed designer–developer collaboration, reduce duplication, and enforce consistent UI across products. If you’re deciding whether to engage, expect hands-on pointers for building a living system, guidance on governance and maintenance, and clear next steps to replicate the examples rather than abstract theory.

design systems
Introduction to Design Systems
+4
View Details

Top Rated Design Systems Resources

Filter Design Systems Resources

Filter Resources
All Types
Courses
Videos
Websites
Books

15 resources found

All Design Systems Resources

Top Design Systems Resources

System Design Concepts Course and Interview Prep
Video

System Design Concepts Course and Interview Prep

This complete system design tutorial covers scalability, reliability, data handling, and high-level architecture with clear ...

design systems
System Design
+4
View Details
How to Answer System Design Interview Questions (Complete Guide)
Video

How to Answer System Design Interview Questions (Complete Guide)

Make sure you're interview-ready with Exponent's system design interview prep course: https://bit.ly/3M6qTj1 Read our complete ...

design systems
System Design
+4
View Details
8 Most Important System Design Concepts You Should Know
Video

8 Most Important System Design Concepts You Should Know

Get a Free System Design PDF with 158 pages by subscribing to our weekly newsletter: https://bit.ly/bbg-social Animation tools: ...

design systems
System Design Concepts
+4
View Details
Welcome to design systems - Lesson 1 : Introduction to design systems
Video

Welcome to design systems - Lesson 1 : Introduction to design systems

This lesson defines a design system by breaking it into concrete building blocks—design tokens, reusable components, patterns, and documentation—so you can immediately see where to start organizing UI work. It walks through practical Figma workflows (free signup link provided) and the Habitz community file to show how systems speed designer–developer collaboration, reduce duplication, and enforce consistent UI across products. If you’re deciding whether to engage, expect hands-on pointers for building a living system, guidance on governance and maintenance, and clear next steps to replicate the examples rather than abstract theory.

design systems
Introduction to Design Systems
+4
View Details
Using AI To Build a Design system in 2 minutes | Figma AI Plugin | Design System Figma #figma
Video

Using AI To Build a Design system in 2 minutes | Figma AI Plugin | Design System Figma #figma

The video demonstrates a hands-on workflow where the Figma AI plugin generates a complete starter design system—colors, typographic tokens, styles, and reusable components—within about two minutes, showing concrete prompts and the plugin UI so you can follow along. It focuses on practical tips for validating and organizing the output (naming conventions, token mapping, component variants) and points out where to manually refine accessibility, responsive behavior, and edge-case states. Watch it if you want a repeatable prompt→review→iterate method to bootstrap consistent UI foundations quickly, but expect to spend time customizing and testing before using the result in production.

design systems
AI
+5
View Details
Course overview : Introduction to design systems
Video

Course overview : Introduction to design systems

The overview maps a practical learning path for creating and scaling design systems, focusing on strategic foundations, component libraries, design tokens, and cross-functional workflows that move a system from prototype to team adoption. It’s tool-forward—notes Figma is free and includes a Habitz design system community file you can open and iterate on to practice component anatomy, token application, and organization for reuse. Choose this course if you want hands-on, immediately actionable guidance and assets to build reusable UI components and governance-ready processes your design and engineering teams can adopt.

design systems
Design Systems
+4
View Details
Build a Design System! Ep. 1: Figma Tokens & Variables Setup
Video

Build a Design System! Ep. 1: Figma Tokens & Variables Setup

Welcome to Episode 1 of "Building a Design System"! In this introductory episode, we dive into setting up your figma variables ...

design systems
Design Tokens
+5
View Details
Your First Design System in Figma (Beginner Tutorial)
Video

Your First Design System in Figma (Beginner Tutorial)

This tutorial walks a beginner through building a practical Figma design system by creating color and typography tokens, setting up component styles and variants, and organizing reusable components like buttons, inputs, and cards. You’ll learn concrete workflows—using Auto Layout, constraints, naming conventions, and the Assets/Library publish process—to make components responsive and easy to update across files. By the end you’ll have a working base system you can iterate on, plus repeatable steps to scale consistency across projects and cut time on UI updates.

design systems
Beginner Tutorial
+4
View Details
I Built My Entire Design System in 4 Hours With AI. Full Tutorial (Claude + Cursor + Figma)
Video

I Built My Entire Design System in 4 Hours With AI. Full Tutorial (Claude + Cursor + Figma)

The video presents a repeatable 4‑hour pipeline that chains Claude for prompt-driven design decisions, Cursor to automate component and code generation, and Figma to create and sync design tokens and components so you can move from concept to production-ready UI parts. It gives concrete, copy-paste prompts, Figma plugin steps, token export techniques, and code-transfer patterns that show how to generate CSS/React components and organize a maintainable design system quickly. You'll get an actionable blueprint for accelerating design-to-code handoffs—useful if you want a reproducible method to jumpstart a system—while understanding you still need designer review and brand-specific customization.

design systems
Build Design System
+4
View Details
Config 2024: Design systems best practices | Figma
Video

Config 2024: Design systems best practices | Figma

Config 2024: Design systems best practices Take a dive into all things design systems— from establishing solid foundations like ...

design systems
Best Practices
+4
View Details
How to Make a Design System in Figma?
Video

How to Make a Design System in Figma?

The video provides a hands-on walkthrough for building a Figma design system: set up color, typography and spacing tokens; create reusable components with variants, Auto Layout and constraints; and apply consistent naming conventions for responsive behavior. It demonstrates practical team workflows—organizing and publishing a shared library, managing component updates and versioning, and preparing styles/tokens for developer handoff to keep UI consistency as the product scales. If you want a concrete, actionable guide (including tips to reduce duplication and speed up UI production) rather than high-level theory, this is a strong next step.

design systems
Creating Design System
+4
View Details
Design System 101: free Beginner Figma Tutorial for UIUX Designers
Video

Design System 101: free Beginner Figma Tutorial for UIUX Designers

This tutorial walks through building a scalable Figma design system from the ground up—practical steps for creating and naming components, setting up color and typography tokens/styles, and using variants and auto-layout to make reusable, responsive UI elements. It emphasizes real-world workflows: organizing libraries, managing component versions and team libraries, efficient handoff patterns, and time-saving Figma techniques (including a helpful layer-selection shortcut) so you can apply the system immediately. Watch this if you want step-by-step, actionable techniques to reduce repetition and speed design-to-development handoffs—by the end you’ll know how to set up a maintainable library that scales with your projects and team.

design systems
Design System 101
+4
View Details
Level up your UI design skills Start learning Design Systems #productdesign #designsystem #tutorial
Video

Level up your UI design skills Start learning Design Systems #productdesign #designsystem #tutorial

This tutorial introduces Atomic Design as a practical foundation—showing how to break interfaces into atoms, molecules, and organisms to build a scalable design system. It focuses on creating reusable components and patterns that streamline design-to-development handoffs and maintain visual consistency across screens. Watch this if you want concrete techniques to organize your component library and workflow so iterations, team collaboration, and product scaling become faster and less error-prone.

design systems
Level Up
+4
View Details
Figma + developer workflows | design systems, Code Connect, MCP, and Make
Video

Figma + developer workflows | design systems, Code Connect, MCP, and Make

Jake shows concrete techniques to keep Figma design systems as the single source of truth—using tokens, component libraries, and versioned releases to eliminate UI drift and duplicated work. He demonstrates Code Connect for surfacing production code next to Figma components and explains MCP as a way to standardize component metadata and versioning so engineers can reliably consume design artifacts. He wraps up with practical Make automations for syncing changes, generating release notes, and pushing updates across repos, making this session a hands-on guide if you want tool-based, repeatable workflows for design-to-code handoff.

design systems
Figma
+4
View Details
What is a Design System? 6 Different Types of Design Systems
Video

What is a Design System? 6 Different Types of Design Systems

Learn more about design systems in my online course: https://danmall.com/products/make-design-systems-people-want-to-use/ In ...

design systems
What is a Design System
+4
View Details

We'd Love Your Feedback!

Help us improve by sharing your thoughts

📬 Stay Updated

Get weekly updates on top-rated resources in your favorite categories

📧 Get updates on new and trending resources in your favorite categories.