بلاگ

آشنایی با ابزارها و قابلیت‌های فیگما

فیگما مجموعه‌ای از ابزارهای قدرتمند طراحی را در اختیار کاربران قرار می‌دهد که کار طراحی رابط کاربری را ساده‌تر و منظم‌تر می‌کند. در ادامه با مهم‌ترین ابزارها و قابلیت‌های این نرم‌افزار آشنا می‌شویم.

کامپوننت در فیگما چیست؟

کامپوننت‌ها عناصری هستند که می‌توانید بارها در طرح‌های خود استفاده کنید و به ایجاد و مدیریت طراحی‌های یکپارچه در پروژه‌ها کمک می‌کنند. هر کامپوننت در فیگما دارای دو بخش اصلی است: کامپوننت اصلی (Main Component) که ویژگی‌های اصلی را تعریف می‌کند و نمونه (Instance) که کپی قابل استفاده مجدد از کامپوننت اصلی است و تغییرات اعمال‌شده در کامپوننت اصلی را دریافت می‌کند.

برای ساخت کامپوننت می‌توانید از چند روش استفاده کنید:

• راست کلیک روی لایه و انتخاب «Create Component»
• استفاده از میانبر کیبورد (Command + Option + K در مک یا Ctrl + Alt + K در ویندوز)
• کلیک روی «…» در پنل Properties و انتخاب «Create Component»

ابزارهای Pen، Pencil و Blend

ابزار Pen برای ایجاد گره و خط کاربرد دارد. با استفاده از این ابزار می‌توانید با کلیک و درگ کردن، خطوط منحنی ایجاد کنید. اتصال نقطه ابتدایی به انتهایی باعث ایجاد یک شکل هندسی یا منحنی می‌شود.

Pencil ابزاری است که با کلیک و درگ کردن، امکان رسم شکل‌هایی با گره‌های زیاد و حالت نرم را فراهم می‌کند. ابزار Blend برای تغییر دادن دستگیره‌های گره‌ها به کار می‌رود و به شما کمک می‌کند شکل‌های پیچیده‌تر ایجاد کنید.

Auto Layout و Constraints

Auto Layout ابزاری قدرتمند است که به طراحی‌های واکنش‌گرا (Responsive) کمک می‌کند. این ویژگی باعث می‌شود المان‌ها به صورت خودکار بر اساس جهت، فاصله، پدینگ و تراز در یک فریم مرتب شوند. زمانی که محتوا تغییر می‌کند یا المان‌ها اضافه، حذف یا تغییر اندازه می‌شوند، چیدمان به طور خودکار تنظیم می‌شود.

Auto Layout سه گزینه برای تعیین جریان و چیدمان اشیا در فریم ارائه می‌دهد:

• عمودی (Vertical): اشیا در راستای محور y قرار می‌گیرند
• افقی (Horizontal): اشیا در راستای محور x قرار می‌گیرند
• شبکه‌ای (Grid): اشیا در ستون‌ها و ردیف‌ها قرار می‌گیرند

در مقابل، Constraints (محدودیت‌ها) به شما امکان می‌دهد تعیین کنید یک عنصر چگونه باید در یک فریم قرار گیرد یا تغییر اندازه دهد. به عبارت دیگر، Constraints به شما کمک می‌کند عناصر را با توجه به تغییر اندازه فریم کنترل کنید.

کتابخانه‌های آماده و قابل استفاده مجدد

فیگما دارای کتابخانه‌های آماده است که شامل الگوها، کامپوننت‌ها، آیکن‌ها و سایر اجزای طراحی است. این کتابخانه‌ها به شما امکان می‌دهند به راحتی و با سرعت بیشتری واسط کاربری پروژه‌های خود را طراحی کنید.

کیت‌های UI در فیگما مجموعه وسیعی از اجزای رابط کاربری قابل استفاده مجدد (مانند دکمه‌ها، ورودی‌ها، منوها)، سبک‌های فونت، پالت‌های رنگ و سایر عناصر طراحی را شامل می‌شوند. استفاده از این کیت‌ها می‌تواند فرآیند طراحی شما را سرعت بخشیده و در زمان و هزینه صرفه‌جویی کند.