پیشرفته · ۵۵ دقیقه

Design System و documentation

Q: Library publish conflict؟

Update library notification به file consumer میرسد. Accept update review کنید — breaking change layout product file را shift میدهد. major version در sprint planning هماهنگ؛ pin library version در critical release.

tokens، components و handoff.

تیم Nova Lab · ۲۴ اسفند ۱۴۰۴ · آموزش پیشرفته

قدم اول: ساختار فایل Design System

فایل جدا با نام مثل Nova_DS بسازید — design system نباید داخل feature file product گم شود. page structure پیشنهادی: Cover (about، version، owner)، Foundations، Components، Patterns، Documentation.

Foundations شامل: Color، Typography، Spacing، Grid، Elevation (shadow scale)، Iconography، Motion (duration، easing). هر section frame بزرگ با label و مثال visual. developer و designer هر دو یک source of truth دارند.

Naming convention: category/role/state — مثلاً color/primary/default، color/semantic/error/default. slash در Figma group و sort را automate می‌کند. document convention در Cover page بنویسید.

Publish as library: از menu file > Publish library. team members در file دیگر Enable library می‌کنند و component/token update دریافت می‌کنند. version library در changelog track کنید.

شروع minimal: 5-8 component پرکاربرد + tokens پایه بهتر از 200 component نیمه‌کاره. DS living document است — با product رشد می‌کند.

قدم دوم: Variables و design tokens

Local variables: panel Variables (یا از menu). Collection «Primitives» برای raw values — blue-500 = #2563EB. Collection «Semantic» alias به primitive — color/action/primary → blue-500. separation layer تغییر brand را آسان می‌کند.

Modes: Light و Dark در یک collection. هر variable در هر mode value جدا — background/default سفید در Light، gray-900 در Dark. switch mode در canvas preview instant است.

Number variables برای spacing: space-1=4، space-2=8، space-4=16. bind به padding Auto Layout: select padding > bind variable. یک token change همه bound instanceها را update می‌کند — heart of design token workflow.

Export برای dev: plugin Tokens Studio for Figma یا native Variables export. JSON format برای Style Dictionary یا Tailwind config. sync manual در ابتدا، CI pipeline در mature team.

Boolean و String variables کمتر رایج‌اند ولی برای feature flag UI یا label slot مفیدند. بیشتر DS روی color و number متمرکز است.

قدم سوم: component architecture

Atomic design mental model: Atoms (Button، Input، Icon)، Molecules (SearchBar = Input + Icon + Button)، Organisms (Header، Card complex). Figma flat library دارد — naming hierarchy این ساختار را reflect کند.

Button component set: Combine as variants. Properties: Variant (primary/secondary/ghost/destructive)، Size (sm/md/lg)، State (default/hover/pressed/disabled/loading). هر combination یک variant frame. property panel dropdown برای switch سریع.

Boolean property «icon left» visibility icon slot control می‌کند. Instance swap برای icon: main component slot با default icon، instance هر icon library swap. بدون duplicate component برای هر icon.

Slot pattern: empty Auto Layout frame با name Slot/Content داخل Card component. instance می‌تواند nested content بگذارد. محدودیت: deep nesting performance — document max depth.

Composition over duplication: TextField + Label + HelperText را یک molecule بسازید نه سه instance جدا scatter در screen. consistency و update یکجا.

قدم چهارم: documentation در Figma

Documentation frame per component: anatomy (parts labeled)، spacing spec (padding، gap numbers)، variant matrix (when use primary vs secondary). screenshot component states side by side.

Do and Don't: دو column — مثال درست سبز border، غلط قرمز. «Don't use two primary buttons in one row» actionable است نه vague «be consistent».

Accessibility section: min touch 44×44، focus ring 2px offset، contrast ratio per variant. link به WCAG guideline. designer developer هر دو مسئول a11y — spec در DS clear می‌کند.

Usage guidelines prose کوتاه: «Primary button for main CTA one per screen. Secondary for cancel or alternate action.» decision fatigue کم می‌شود.

Organization: component main frame لینک به doc frame با hyperlink یا کنار هم در page Documentation. sidebar Figma page order: Foundations قبل Components قبل Patterns.

قدم پنجم: handoff به development

Dev Mode: developer inspect spacing، copy CSS/iOS/Android snippet، download asset. component description field در Figma برای note implementation (مثلاً «loading state shows spinner، disable click»).

Code Connect (optional): map Figma component به React/Vue component در repo. designer dev parity می‌بیند. setup overhead دارد — team بزرگ‌تر ROI بهتر.

Export rules document: icons SVG stroke یا outline consistent، raster 2x و 3x، naming ic__. illustration در R2/CDN نه inline huge PNG.

Changelog page: DS v1.0.0 initial، v1.1.0 added Input/Search، v2.0.0 breaking Button height change. breaking change در sprint planning communicate — dev refactor time estimate.

Storybook یا similar: live component playground parallel Figma. ideal world Figma variant = Storybook story 1:1. drift بین design و code quarterly audit.

قدم ششم: governance و scale

Contribution model: anyone propose component via RFC template (use case، anatomy، a11y). design + tech review قبل merge library. بدون gate DS fragment می‌شود.

Deprecate: component قدیمی را hide from library publish نه delete فوری. banner Deprecated روی doc frame. migration guide «Button/Legacy → Button/v2». timeline sunset 2 sprint.

Audit quarterly: unused variant حذف، duplicate component merge، token alias simplify. DS debt مثل tech debt accumulate می‌شود.

Measure adoption: چند file library enabled، چند instance component اصلی vs detached. low adoption یعنی DS hard to use یا unknown — interview designer.

DS محصول است نه project one-time. dedicated owner (part-time هم OK) maintenance، roadmap و support channel (#design-system) لازم است.

سوالات متداول

Design System از day one؟

Startup: core tokens + 5-8 component کافی تا pattern repeat شود. premature huge DS وقت تیم را می‌گیرد. بعد از 2-3 feature مشابه formalize کنید. extract از product نه abstract از صفر.

Variables vs Styles legacy؟

Variables native Figma، multi-mode (light/dark) و number binding به layout. Color/Text styles legacy هنوز کار می‌کنند. پروژه جدید Variables first؛ migrate تدریجی styles قدیمی. هر دو موقت coexist می‌کنند.

Documentation کجا؟

Figma frames برای visual spec و anatomy. Notion، Zeroheight یا Storybook docs برای searchable long-form و code example. hybrid رایج: Figma source component، external doc link در description.

Library publish conflict؟

Update library notification به file consumer می‌رسد. Accept update review کنید — breaking change layout product file را shift می‌دهد. major version در sprint planning هماهنگ؛ pin library version در critical release.