یکی از کارهای خیلی روزمره توی UI Design، ساختن دکمهست. ولی اگر هر بار برای هر صفحه دکمه رو از صفر بسازی، خیلی زود همهچیز شُلخته و مدیریتناپذیر میشه 😅
توی این پست با هم یک Button Component تمیز و مقیاسپذیر توی Figma میسازیم؛ چیزی شبیه الگوهای Material Design Buttons که بهراحتی بشه برای حالتهای مختلف (Primary, Secondary, Disabled, Icon) ازش استفاده کرد.
۱️⃣ طراحی پایه دکمه
• یک Frame جدید بساز و اندازه رو مثلاً بذار 48×120.
• گوشهها رو 8px گرد کن (Corner Radius = 8).
• رنگ پسزمینه رو روی یه رنگ Primary از سیستم رنگت بذار (مثلاً #1E88E5).
• یک متن وسطش بذار: «Button» با وزن Medium و سایز 14 یا 16.
اینجا مهمه که Text رو وسطچین و Auto Width یا Auto Layout رو درست تنظیم کنی تا بعداً با تغییر متن، دکمه بههم نریزه.
۲️⃣ فعالکردن Auto Layout برای کنترل Padding
روی Frame اصلی دکمه، از پنل راست Auto Layout رو فعال کن:
• جهت: Horizontal
• Alignment: Center & Center
• Padding افقی: مثلاً 16–24px
• Padding عمودی: 10–12px
• Spacing between items: 8 (اگر آیکن اضافه شد، بهدرد میخوره)
حالا اگر متن رو عوض کنی، دکمه خودش بهصورت Responsive رشد میکنه. این همون چیزیه که تو راهنماهای رسمی Figma برای Button پیشنهاد میشه (میتونی نمونه رو تو Figma Auto Layout ببینی).
۳️⃣ تبدیل به Component + Variant
• Frame دکمه رو انتخاب کن و از بالا روی Create component بزن.
• حالا از پنل راست روی + کنار Variants کلیک کن تا چند Variant بسازی:
– primary / enabled
– primary / hover
– primary / disabled
– primary / with-icon
به هر Variant یک Property بده؛ مثلاً:
Type = Primary
State = Enabled | Hover | Disabled
Icon = True | False
این دقیقاً همون مدلیه که تو Figma Variants پیشنهاد شده و کمک میکنه طراح و دولوپر یک زبان مشترک داشته باشن.
۴️⃣ تنظیم حالتها (States)
📌 چند پیشنهاد براساس Material Design:
• Hover: همون رنگ Primary با یک Overlay ملایم (مثلاً +8% Opacity سیاه).
• Pressed: کمی تیرهتر یا با Shadow کمتر.
• Disabled: پسزمینه خاکستری روشن، متن با Opacity حدود 38%.
فقط حواست باشه کنتراست رنگ متن و پسزمینه با WCAG اوکی باشه؛ برای متن روی دکمه حداقل کنتراست 4.5:1 خوبه. میتونی تو WebAIM Contrast Checker تست کنی.
۵️⃣ افزودن Icon به دکمه
برای Variant با آیکن:
• یک آیکن 20×20 (یا 16×16 بستهبه Guideline) سمت چپ متن بذار.
• Auto Layout رو طوری تنظیم کن که فاصله Text و Icon ثابت بمونه (Spacing = 8).
• تو Properties، Icon = True/False بذار تا بعداً بتونی با یک کلیک دکمه رو آیکندار یا بدون آیکن کنی.
۶️⃣ استفاده در پروژههای واقعی
حالا هر وقت توی یک صفحه جدید دکمه خواستی:
• از Assets، این Button Component رو Drag کن.
• توی پنل راست State و Type و Icon رو عوض کن.
• فقط Text رو Edit کن، بدون اینکه استایل بههم بریزه.
این دقیقاً جاییه که Design System شروع میشه: یک بار فکر میکنی، بارها استفاده میکنی 💡
در اولین پروژه بعدیات این Button Component رو بساز و کمکم بقیه کامپوننتها (Input, Checkbox, Tabs) رو هم مشابه همین الگو دربیار. بعد از چند صفحه، تفاوت سرعت و نظم رو کاملاً حس میکنی 🚀
🔖 #Design #طراحی #UI #UX #Figma #UI_Design #Component #Button #Material_Design #Auto_Layout #Design_System #Persian
👤 Developix
💎 Channel: @DevelopixDesign
