Chưa có tác phẩm nào gắn tag này.
Trong sản phẩm Spotify, mỗi button xanh có chính xác cùng padding 12px-24px, mỗi card có cùng border radius 8px, mỗi heading dùng cùng Circular font ở size cụ thể. Người maintain consistency đó qua hàng trăm screen và hàng chục team designer là Design Systems Designer.
Khác với Product Designer (thiết kế feature mới) — Design Systems Designer thiết kế foundation: component library, design token, pattern documentation mà mọi designer khác consume. Họ là designer của designer.
Design Systems Designer là người thiết kế và maintain design system — bộ component library, design token, pattern, và documentation giúp toàn bộ design org dùng chung ngôn ngữ. Output: Figma library (Button, Input, Card, Modal, Navigation…), design token (color, typography, spacing, radius), pattern document (when to use which component, accessibility guideline), changelog (version, breaking change).
Khác với Product Designer (consumer của design system — thiết kế feature dùng component có sẵn) — Design Systems Designer build component cho người khác dùng. Khác với UI Designer (focus visual của feature cụ thể) — Systems Designer focus reusable foundation. Khác với Frontend Engineer (implement component thành code) — Systems Designer pair tightly với engineer để bridge design + code. Sub-specialty: Foundation Designer (token, type, color), Component Designer (UI component), Pattern Designer (template, page pattern).
Design Systems Designer — build foundation cho cả org
Design Systems Designer sit trong Design System team hoặc Design Platform team. Báo cáo cho Design Systems Lead, Design Director, hoặc Head of Design. Phối hợp chặt với: Frontend Engineer (implement code), Product Designer (consumer + góp ý), Design Manager (adoption strategy), Accessibility Specialist. Team size 2–10 designer + 5–20 engineer ở company lớn (Atlassian Design System, Shopify Polaris, IBM Carbon, Material Design). Tham gia ongoing — không có project deadline cố định, work là continuous evolution.
Continuous work — audit product để identify pattern lặp đi lặp lại mà chưa systematized. Ví dụ: 5 designer build 5 variant của empty state khác nhau → cần component EmptyState chung. Công cụ: Figma plugin để inventory component, conversation với product designer, Slack channel #design-systems-request.
Audit pattern need — foundation cho roadmap
Bắt đầu với research: how big tech handle (Material, HIG, Polaris, Fluent), accessibility consideration, edge case. Design master component với full variant: state (default, hover, active, disabled, error), size (small, medium, large), type (primary, secondary, ghost), config (icon, no icon, leading/trailing). Build trong Figma với variant property, auto-layout, token bound.
Master component & variant
Design token foundation
Component không document = vô dụng. Write doc cho mỗi component: when to use, when not to use, variant explanation, accessibility note, do/don't example. Công cụ: Zeroheight, Storybook, custom documentation site. Announce release via Slack, all-hands, office hour.
Documentation — when to use, accessibility, do/don't
Component tồn tại design world là 50%. 50% còn lại — engineer implement code. Pair tightly với frontend engineer: spec review, token mapping (CSS variable, design token sync), QA implementation, edge case discuss. Drive adoption: support designer migrate from old component, fix bug fast, run office hour Q&A.
Engineer pairing & adoption support
Master Figma: variant property, auto-layout, component property (text, instance swap, boolean), variable / token, nested component, library publishing. Component bạn build phải work cho 100+ designer use case — robust, predictable.
Learn từ public design system Figma file: Material 3, Polaris, Carbon, Untitled UI.
Skill cốt lõi: nhìn 10 variant cụ thể, abstract thành 1 component flexible. Define đúng cấp abstraction — quá rigid (limit use case) hay quá flexible (lose consistency) đều fail. Practice qua personal project: build component library cho project nhỏ trước.
Design system component bị copy hàng nghìn lần — nếu padding sai 1px, cả product impact. Phải obsess detail: spacing scale (4, 8, 12, 16, 24, 32, 48), color contrast WCAG, type scale modular, radius consistency. Build muscle qua daily attention to detail.
Component without doc = wasted. Write clear: what it is, when use, when not, example. Read good design system doc (Polaris, Material, Atlassian). Write practice — even start docs cho personal component.
Không cần là engineer, nhưng phải biết: HTML semantic, CSS box model + flexbox + grid, React component basic, prop pattern. Để pair effective với engineer và translate design → code. Learn through CSS Tricks, MDN, Frontend Masters.
Mỗi component phải accessible. Learn: WCAG 2.1 AA standard, ARIA role/property, keyboard navigation, screen reader (VoiceOver, NVDA), color contrast tool. Take "Inclusive Design Patterns" (Heydon Pickering), "A11ycasts" YouTube.
VN: ĐH Mỹ thuật Công nghiệp Multimedia, ĐH FPT, Arena. Online: Google UX Certificate, Interaction Design Foundation. Foundation: design principle, typography, color theory, spacing system, layout, Figma proficient.
Foundation: work as Product Designer ship feature actual. Trải nghiệm "consumer" của design system — biết designer cần gì, frustration nào với component cứng. Path tới Systems thường qua IC strong với obsession-level attention to detail.
Hầu hết company có design system team — ask volunteer contribute component cho team. Test interest và build credibility. Bước đầu: contribute 1–2 component nhỏ, document use, present cho team.
Portfolio Systems Designer cần proof: build own design system public — host Figma file, document trên Notion/Zeroheight, share trên Behance/Twitter. Tham khảo: Untitled UI (Jordan Hughes), Geist (Vercel). Bonus: contribute open source design system.
Role này nhiều ở mid/large tech: Shopify, Atlassian, IBM, Microsoft, Adobe, scale-up Việt như Tiki, VNG, Momo. Interview focus: portfolio component thinking, system reasoning, accessibility knowledge, engineer collaboration. Salary thường cao hơn Product Designer cùng level vì niche skill.
Lộ trình: (1) Senior Design Systems Designer — own foundation category (typography, color); (2) Lead/Manager Design Systems; (3) Design Engineer — hybrid role design + code; (4) Founder design system tool; (5) Move lateral to Product Designer sau khi mastery system. Lương: VN Senior 40–80M/tháng; US tech Senior $180K–$300K total comp. Niche role nhưng demand cực cao ở large tech.