ساخت کامپوننت و variant در Figma
Component و variant در Figma پایه design system و handoff حرفهای هستند. از auto layout تا property و boolean variant، در این مقاله workflow ساخت دکمه، input و card را گامبهگام یاد میگیرید.
چرا component و variant در workflow حرفهای ضروریاند؟
قبل از component، هر دکمه copy-paste میشد و با یک تغییر brand color باید صدها layer دستی update میشد. Component در Figma master record است؛ instance در صفحات product از master تبعیت میکند. variant این مدل را یک سطح بالاتر میبرد: یک component set با stateها و styleهای مختلف (primary/secondary، default/hover/disabled) در یک جا مدیریت میشود.
برای تیم Nova Lab و پروژههای portfolio، component سازی نشان میدهد شما مثل product designer فکر میکنید، ن فقط صفحهساز. developer از component structure برای mapping به React/Vue component استفاده میکند. consistency در spacing، radius و typography across product بدون component تقریباً impossible است.
variant در Figma 2022+ با component properties (boolean، text، instance swap) انعطاف زیادی دارد. هدف: کمترین تعداد master با پوشش بیشترین scenario — نه ۴۰ component جدا برای هر ترکیب state.
Auto Layout: پیشنیاز component مقیاسپذیر
قبل از تبدیل به component، frame را با Auto Layout بسازید. دکمه: horizontal auto layout، padding عمودی/افقی ثابت، gap بین icon و label، alignment center. input: vertical layout برای label + field، یا horizontal برای search با icon.
Resizing behavior مهم است: hug contents برای button که text length عوض میشود؛ fill container برای input در form full-width. min/max width برای جلوگیری از button خیلی عریض یا label sh truncate نادرست.
Nested auto layout: card با vertical layout شامل header row (horizontal: title + icon) و body و footer actions. هر سطح layout مستقل resize میشود — این ساختار مستقیماً به flexbox در CSS map میشود و handoff را آسان میکند.
ساخت Button component set با variant
شروع: یک button default بسازید (Auto Layout + text + optional icon). Convert to component (Ctrl+Alt+K). Duplicate variant برای states: hover (darken fill)، pressed، disabled (opacity یا desaturate)، loading (spinner swap).
Combine variants: property «Type» = Primary | Secondary | Ghost؛ property «Size» = S | M | L؛ property «State» = Default | Hover | Disabled. Figma matrix variant میسازد — فقط cellهایی که واقعاً لازم است design کنید؛ بقیه can delete یا inherit.
Boolean property «Has Icon» برای نمایش/مخفی icon بدون duplicate component set. Text property روی label برای override در instance. Instance swap برای icon چپ/راست یا spinner. naming convention: Component/Button/Primary/M/Default — readable در asset panel.
Input، Checkbox و Card: الگوهای رایج
Input variant: state = Default | Focus | Error | Disabled؛ optional boolean «Has Helper Text». error state border قرمز + helper text؛ focus ring برای accessibility. label should be separate text layer یا part of component — consistent ۸px gap بین label و field.
Checkbox/Toggle: boolean selected؛ state disabled. group checkbox در form از instance list استفاده کند، نه detached copies. Radio: variant برای selected/unselected با exclusive logic در prototype.
Card: variant «Elevation» = Flat | Raised؛ «Has Image» boolean؛ slot برای content با instance swap. card نباید همه content را hard-code کند — placeholder text در master، real content در instance override.
Component property و documentation
در panel سمت راست، description برای هر component بنویسید: کی استفاده شود، کی نشود، accessibility note. link to guideline doc در Nova Lab Notion یا Figma description.
Variables (design tokens) برای color، spacing، radius به component bind کنید. وقتی token عوض شود، همه instance update میشود. semantic token مثل `color/action/primary` بهتر از hex مستقیم روی fill.
Organize در page structure: 🧱 Components / Atoms / Button، Molecules / SearchField، Organisms / Header. published library برای تیم: right-click → Publish styles and components. version history برای breaking change.
Instance، override و anti-patternها
Instance override برای text، color one-off، hidden layer مجاز است — اما «detach instance» فقط در edge case. detach breaking design system است. اگر override تکراری دیدید، شاید variant کم دارید.
Over-variantization: ۲۰۰ cell matrix که ۱۸۰ تاش duplicate است. start minimal: ۲ type × ۳ state، expand on demand. Under-variantization: ۱۵ component جدا ButtonPrimarySmall، ButtonPrimaryLarge — maintenance nightmare.
Deep nesting: component داخل component داخل component بدون naming — instance swap سخت میشود. rule: max ۳ level deep unless atomic design clearly needs it.
Handoff به توسعه و checklist نهایی
Dev mode: inspect padding، gap، token name. component name باید با code component name نزدیک باشد (Button، InputField). variant property names = props در code (variant="primary" size="md").
Export: icon as SVG component؛ image slot documented. responsive behavior: توضیح دهید button hug است یا fixed width. dark mode: separate mode در variables یا variant property Theme.
Checklist Nova Lab قبل publish: Auto Layout ✓، tokens ✓، all states ✓، focus visible ✓، description ✓، naming ✓، test instance در mock page ✓. یک ساعت organization در Figma ساعتها bug در development را save میکند.
سوالات متداول
Component set و component جدا چه فرقی دارد؟
Component set container برای variantهای مرتبط است (مثلاً همه حالتهای Button). component تکی یک master بدون variant matrix. وقتی بیش از یک حالت meaningful دارید، set بسازید.
Boolean property یا variant جدا برای icon؟
برای icon optional، boolean «Has Icon» معمولاً تمیزتر است. برای icon متفاوت (arrow vs plus)، instance swap روی slot icon بهتر از boolean است.
چطور library را با تیم sync کنم؟
Figma Organization/Team library publish کنید. تیم Accept updates میزند. برای breaking rename، changelog در description بنویسید و در Slack اطلاع دهید. در دوره Nova Lab پروژه team library simulate میشود.
Auto Layout با RTL فارسی چطور کار میکند؟
Direction frame را RTL set کنید یا از plugin/logic mirroring استفاده کنید. padding start/end به جای left/right فکر کنید. icon trailing در RTL باید سمت چپ label بیاید — test با محتوای فارسی واقعی.