/Who am I.
Hi, I am Dhika Endi Astowo from Indonesia. After 4 years of honing my skills at UI/UX Design, I decided to jump more specifically on the Design System. Not only focus on creating element design that looks good, but also truly managing it and creating a system for the team and for a product.
/The process/
From first audit to full-team adoption—my step-by-step path to a living 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
Map the Current UI
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
Set the Visual Language
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
Build Universal Blocks
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.
/Documentation
Explain How to Use
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
Guide and Grow the System
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
Launch and Drive 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.