UI/UX Design
Intermediate
Design Systems for Enterprise Apps
Architect scalable UI component libraries and design tokens for complex enterprise workflows.
Course Overview
Design accessible data tables, multi-step forms, and dense dashboard layouts in Figma and CSS while maintaining strict visual cohesion across engineering teams.
What You Will Learn
Structure design tokens (color, spacing, typography, elevation) in JSON/CSS variables
Architect reusable, accessible component libraries (data tables, forms, modals)
Enforce strict WCAG 2.1 AA accessibility standards across design components
Document design token guidelines and component states in Storybook
Govern design system contributions across large multi-team engineering orgs
Tools & Technologies Used
Figma
CSS Variables
Storybook
React
Style Dictionary
Structured Curriculum
2 Modules · 4 Lessons · 180 Minutes Total
Module 1
Module 1: Design Tokens & Component Boundaries
2 lessons
Module 1: Design Tokens & Component Boundaries
Construct token hierarchies and decouple visual decisions from raw code.
-
Global, Alias & Component Specific Tokens
Build a design token pipeline using Style Dictionary to export CSS variables and JSON tokens.
-
Designing Complex Enterprise Data Tables
Construct accessible, customizable data table components supporting sorting, filtering, and pagination.
Module 2
Module 2: Storybook Documentation & Governance
2 lessons
Module 2: Storybook Documentation & Governance
Document component APIs and establish contribution workflows.
-
Storybook Component Isolation & Accessibility Scans
Set up Storybook stories with automated axe-core accessibility testing.
-
Versioning & Multi-Team Governance
Establish semantic versioning rules, breaking-change deprecation notices, and design review boards.
Practical Project & Capstone Outcome
🚀 Capstone Project
Enterprise Design System Core Token & Component Package
Build an enterprise design system package featuring automated token translation, 10 fully tested React components in Storybook, and zero accessibility violations.
Prerequisites
- HTML/CSS proficiency
- Basic familiarity with Figma and React/Vue
Intended Audience
- Design System Engineers and UI Designers building enterprise component libraries
- Frontend Architects establishing organizational design standards
Instructor Information
T
Teresa Zhang
Course Author & Industry Expert
Teresa Zhang is a Lead Design System Architect who has built component libraries used by over 500 enterprise engineers.
Frequently Asked Questions
Can this system be used with plain CSS as well as React?
Yes! Design tokens are defined in JSON and compiled to standard CSS variables.