SlaveCode
.
Academy
DSA
Resources
System Design
More
Toggle theme (Current: Custom)
Design System Roadmap | SlaveCode
Design System
Learn how to create a design system with this step by step guide
Back
Roadmap
Vedios and Other Resources
Projects
AI Tutor
Design System
Identify Design Elements
Identify Components
Brand
Logo
Guidelines
Colors
Layout
Typography
Iconography
Design
Development
Task Management
Analytics
Communications
Visit the following roadmaps to keep learning
If building from existing design
Frontend
Backend
UX Design
Related Roadmaps
UX Design
Frontend Development
JavaScript Roadmap
React Roadmap
Understand the Basics
What is a Design System?
Need of Design System
Design System vs Component Library
What is Atomic Design
Stakeholders Involved in Building
Design System Examples
Terminology
Component
Component Library
Design Language
Governance
Guidelines
Pattern
Pilot
Token
UI Kit
Making a Design System
Making it from Scratch
Making it from Existing Design
Existing Design Analysis
Performing a Visual Audit
Identify Existing Design Process
Icons
Visual Forms
Sizing
Spaces
Color
Typography
Avatar
Badges
Banners
Buttons
Cards
Dropdowns
Forms
...other
A/B Tests & Experiments
Regional Requirements
Documentation
Creating Design Language
Writing Guidelines
Tone of Voice
Terminology
Design Principles
Vision
Monochrome Version
Small Use Guidance
Placement Guidance
Usage Guidance
File Formats
Accessibility
User Onboarding
Microcopy Guidelines
Defining Design Tokens
Accessibility
Functional Colors
Dark Mode
Guidelines
Units
Grid
Breakpoints
Spacking
Responsiveness
Grid Relation
Readability
Performance
Guidelines
Accessibility
Style
Naming
Grid Relation
Sizes
Keywords
Reserved Icons
Guidelines
Creating Core Components
Avatar
Input Text
Banner
Badge
Button
Card
Carousel
Dropdown
Icon
Input Checkbox
Input Radio
Input Switch
Select
Textarea
List
Loading Indicator
Modal
Tabs
Toast
Tooltip
Tooling
Design Editor
Plugins
Version Control
Contribution Guidelines
Component Catalog
Documentation
Code Style
Unit Testing
Accessibility Testing
Semantic Versioning
Release Strategy
Commit Guidelines
PR Templates
Contribution Guidelines
Project Management
Roadmap
Milestones
Ticketing
Component Analytics
Logging
Tooling Analytics
Service and Health Metrics
Community Meetings
Communication Channel
Open Hours
FAQs