JobCannon
全部技能

Design System Documentation

⬢ 層級 2軟技能
中等
薪資影響
2 個月
學習時長
中等
難度
10
職業
一覽

Design system documentation explains how and why to use design components, tokens, and patterns. Good docs = designers self-serve (read docs, use component, move on). Bad docs = constant Slack questions, incorrect component usage, duplication. A design system with no docs is an art gallery; nobody knows how to use it. Documentation includes: component API (props, variants), design tokens (color/spacing/typography), accessibility (WCAG requirements), code examples, and brand guidelines. Mastery takes 4-6 weeks. Premium: 5-8% because well-documented design systems enable 3x faster design handoff and reduce rework by 50%.

什麼是 Design System Documentation

Design system documentation is comprehensive written and visual guidance on how to use design system components, tokens, patterns, and best practices. It explains not just *what* exists (component inventory), but *why* it exists and *how* to use it correctly. Good documentation includes: component usage guidelines (when to use, when not to), design specs (sizes, colors, spacing), code examples (for developers), accessibility requirements, and brand guidelines. It's organized, searchable, and linked from both design tools (Figma) and development environments (Storybook, code comments).

🔧 工具與生態
FigmaStorybook or similarDocumentation sites (Notion, Docusaurus, 11ty)MarkdownDesign token toolsAccessibility checkers

💰 各地區薪資

地區初級中級高級
USA$65,000$110,000$160,000
UK£40,000£68,000£100,000
EU€45,000€75,000€110,000
CANADACA$68,000CA$115,000CA$165,000

❓ 常見問題

What should I document first?
Start with components you use most (buttons, cards, forms). Document: usage (when to use), design (visual specs, variants), code (props, examples), accessibility (WCAG compliance). Add 10 components/month until system is complete.
How detailed should documentation be?
Detailed enough that a new designer can use a component correctly without asking questions. Visual examples > prose. Show 3-5 usage patterns per component. Explain when NOT to use it.
Should documentation live in Figma or a separate site?
Both. Figma for designers (component specs, variations, tokens). Separate site (Storybook, Notion, or custom docs) for developers and cross-functional teams. Link them. Figma = source of truth for visuals, web site = source of truth for usage.
How often should I update documentation?
As soon as a component changes, update docs (within 1 week). Monthly: full review of docs (accuracy, clarity, broken links). Annual: comprehensive rewrite.
Can I use AI to write documentation?
AI can draft docs, but humans must review and refine. AI often gets details wrong (prop names, edge cases). Use AI for speed, human for accuracy.

不確定這項技能適不適合你？

做一下職業匹配，我們會推薦合適的方向。

找到最適合我的技能 →

找到理想的職業方向

在 2,521 個職業中進行技能匹配。免費。

免費做職業匹配 →