یادداشت نسخه: ویدیوی اصلی این آموزش در سال 2021 ضبط شده و رابط Figma از آن زمان تغییر کرده است. با این حال مفاهیم اصلی مثل موقعیت، اندازه، Fill، Stroke، Corner Radius، Effects و Export همچنان جزو مبانی کار با عناصر طراحی هستند.
پنل Design در Figma چه کاربردی دارد؟
وقتی یک Layer یا Frame را انتخاب می‌کنید، تنظیمات مرتبط با همان عنصر در پنل Properties نمایش داده می‌شود. بسته به نوع عنصر می‌توانید موقعیت، اندازه، تراز، رنگ، Stroke، گردی گوشه‌ها، افکت‌ها و خروجی را کنترل کنید.
Position، Size و Alignment
برای کنترل دقیق Layout لازم است موقعیت و ابعاد عناصر را بشناسید و از ابزارهای Alignment و Distribution برای ایجاد فاصله و نظم استفاده کنید. در طراحی‌های امروزی Figma، Auto Layout نیز نقش مهمی در مدیریت این روابط دارد.
Fill، Gradient و تصویر
Fill می‌تواند یک رنگ ساده، Gradient یا تصویر باشد. برای تصاویر می‌توانید نحوه Fit یا Crop شدن را تنظیم کنید و بدون نیاز به ساخت Shape جداگانه، تصویر را داخل یک عنصر نمایش دهید.
Stroke و Corner Radius
Stroke برای حاشیه عناصر و Corner Radius برای کنترل میزان گردی گوشه‌ها استفاده می‌شود. بهتر است این مقادیر در یک محصول به‌صورت منسجم تعریف شوند و در Componentها یا Design System تکرارپذیر باشند.
Effects و Blend Mode
Effects شامل مواردی مثل Shadow و Blur است و Blend Mode نحوه ترکیب بصری یک Layer با لایه‌های زیرین را تغییر می‌دهد. استفاده کنترل‌شده از این ویژگی‌ها کمک می‌کند عمق و Hierarchy ایجاد شود بدون اینکه رابط بیش از حد شلوغ شود.
Export در Figma
برای خروجی گرفتن از آیکن، تصویر یا Asset می‌توانید فرمت و Scale مناسب را انتخاب کنید. فرمت نهایی باید بر اساس کاربرد انتخاب شود؛ مثلا SVG برای بسیاری از آیکن‌های برداری و PNG یا JPG برای تصاویر Raster.
