My Design System Process
Why bother building a design system?
Products grow, teams change, and UI debt compounds. A design-system turns that chaos into a single, living source of truth—so designers ship faster, engineers reuse instead of rebuild, stakeholders see consistent brand quality, and accessibility best-practice comes “out of the box.” In short: speed, consistency, scalability, and shared understanding.
Product Audit
Objective – Know all the biggest inconsistencies and design issues.
Key activities – Collect UI screenshots, mark colors, fonts, spacing, patterns, breakpoints, and note team complaints.
Deliverables – Visual inventory + problem map and initial targets (example: “reduce double buttons by 80%”).
Foundations
Objective – Create a shared visual language everyone trusts.
Key activities – Define colors, typography, spacing, motion, breakpoints in Figma Variables; record the names and values in Airtable (Optional).
Deliverables – Foundation file + Figma variable + Airtable table as token formula (Optional).
Core Components
Objective – Provides reusable component blocks with atomic principles.
Key activities – Build universal elements (Button, Input, Avatar) —they already have state/type, with consistent property naming.
Deliverables – Universal component files in Figma, ready to use and pass accessibility checks.
When creating the core component, it is also tested when applied to the page to see whether the size is appropriate or not.
Documentation
Objective – Make each component have its own explanation.
Key activities – For each component add: overview & variants · anatomy · responsive behaviour · interaction · Do & Don’t · and other documentation.
Deliverables – Documentation next to the main component + links that can be sent directly to developers.
Governance & Contribution
Objective – Keeping the system healthy while growing.
Key activities – Weekly triage, public backlog, version tagging, changelog, lightweight contribution guide (Research → Design → Build → Release).
Deliverables – A clear “how to propose & merge” guide and a changelog that is easy for the team to read.
Roll-out & Adoption
Objective – Replace the UI with a new system and prove the daily benefits.
Key activities – Feature migration, help sessions on Slack/office hours, and product adoption.
Deliverables – The first product part to migrate, usage numbers continue to rise and visual bugs continue to decrease.
Specific components – For example, Article Card Components, Pop Ups, and others, are stored in separate files, composed of universal components and automatically follow the foundation.
