Isabel T.
Sample Treats the system as a product
This is the course I wish I had before starting our system. The audit and first release lessons saved us from building forty components nobody used.
Build a design system: components, docs and governance
Plan, design, build and run a design system as a product, from the first interface audit to contribution, versioning and adoption
Created by Ana Sousa
- Updated September 2026
- English
- Advanced
What you will learn
- Run an interface audit and present the case for a design system
- Define scope, a first release and a sustainable team model
- Write component specifications with anatomy, states and API
- Choose between composition and configuration for component APIs
- Set up testing for components, including visual and accessibility checks
- Create documentation and usage guidelines that people actually read
- Run contribution, versioning and adoption processes
Course content
Treating a design system as a product
Foundations
- Article: Tokens as the base layer 9 min
- Article: Typography and layout 10 min
- Article: Iconography 8 min
- Article: An accessibility baseline 10 min
Designing components and their APIs
- Article: Component anatomy and specs 10 min
- Article: Designing component APIs 11 min
- Article: Composition versus configuration 11 min
- Article: States, variants and edge cases 9 min
- Article: Acceptance criteria for components 8 min
Building and testing components
- Article: Choosing the technical foundation 10 min
- Article: Headless primitives 10 min
- Article: Visual regression and interaction tests 11 min
- Article: Automated accessibility checks 8 min
Documentation people read
- Article: Choosing a documentation platform 8 min
- Article: Writing usage guidelines 10 min
- Article: Examples and do and don't pairs 8 min
- Article: Keeping design and code in sync 9 min
Governance and adoption
- Article: A contribution model 11 min
- Article: Versioning and releases 9 min
- Article: Measuring adoption 9 min
- Article: Support, office hours and communication 7 min
- Quiz: Final check 6 min
Requirements
- Experience designing or building interface components
- Familiarity with Figma components and basic front end concepts
- Some experience working in a product team
Description
Many design systems start with enthusiasm and a component library, then slowly lose relevance as product teams work around them. The systems that last are run like products: they have users, a roadmap, a clear scope, documentation people trust and a process for change. This course covers the whole life of a design system, with equal weight on craft and on how the system is run.
What the course covers
- Running an interface audit and building the case for a system
- Choosing scope, a first release and a team model that fits your organisation
- Foundations: tokens, typography, layout, icons and an accessibility baseline
- Designing component APIs that are flexible without becoming unpredictable
- Building and testing components, including visual regression and accessibility tests
- Writing documentation that answers real questions
- Contribution, versioning, releases and measuring adoption
How it is taught
Each section uses the same case: a mid sized company with three product teams, two front end frameworks in use and a history of inconsistent interfaces. You will make the decisions a design system lead faces, with templates for audits, component specs, contribution guidelines and adoption reports.
This is an advanced course. You should already be comfortable with components in Figma and have some understanding of front end development. You do not need to write production code yourself, but you will read code examples in React and TypeScript and discuss trade offs with engineers in their language.
Who this course is for
- Designers and engineers leading or joining a design system team
- Product design managers planning a system
- Front end leads responsible for shared component libraries
Instructor
Ana Sousa
Design systems lead teaching tokens, components and governance that scale across teams
- 4.3 instructor rating
- 21 reviews
- 3,620 students
- 3 courses
- Sample
I have led design system work for product teams where several squads ship to the same interface. My job sits between design and front end engineering: defining tokens, designing and building components, writing documentation and setting up the process that keeps the system alive after launch.
I teach design systems as a product with users, not as a style guide. That means audits, roadmaps, contribution models and versioning, along with the hands on parts like Figma variables, token pipelines, Storybook and accessible component APIs.
My courses suit designers who want to understand the code side and developers who want to understand the design side. I explain the trade offs honestly, including when a team does not need a full system yet.
Student reviews
Amina S.
Sample Honest about measurement
I appreciated the warning against made up time savings. The adoption metrics section helped me report progress credibly.
Darius N.
Sample Excellent on component APIs
The composition versus configuration lesson changed how we designed our modal and menu components.
Lucia F.
Sample Docs advice is gold
Watching a new designer use our docs, as suggested, revealed so many gaps. Our docs are far better now.
Charlotte E.
Sample Strong governance section
The contribution model template is now in our wiki. I wanted a little more on multi framework support.
Kenji W.
Sample Advanced but well explained
The case study made the trade offs concrete. Reading the React examples was fine even as a designer.
Pieter V.
Sample More strategy than build
Very good on planning and process. If you want deep coding details for components, you will need another course alongside it.
Omar H.
Sample Useful templates for real teams
Component spec and acceptance criteria templates are practical and easy to adapt.
Keep exploring
All Design Systems courses
More in Design Systems
$89.99
Enroll now