آموزش کامل خروجی گرفتن در فیگما + ویدیو آموزشی

فرض کن یه عالمه زحمت کشیدی و یه طرح تو فیگما درست کردی، حالا وقتشه که این طرح رو به یه فرمتی تبدیل کنی که بتونی ازش تو جاهای دیگه استفاده کنی، مثلاً تو یه سایت بذاریش، به یه برنامه نویس بدی یا حتی پرینتش کنی. به این کار میگن “خروجی گرفتن” یا “Export کردن”. تو این مقاله می‌خوایم ببینیم چجوری می‌تونیم از فیگما خروجی بگیریم و چه فرمت‌هایی برای این کار داریم و هر کدوم به چه دردی می‌خورن. پس اگه می‌خوای یاد بگیری چطور طرح‌های فیگما رو به عکس، کد یا هر چیز دیگه تبدیل کنی، با ما همراه باش!

تنظیمات خروجی

 

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

  • برای کسایی که دسترسی ویرایش دارن، بخش خروجی به راحتی نزدیک پایین نوار کناری سمت راست قرار گرفته و گردش کار روان رو هنگام مدیریت طرح‌هاتون تضمین می‌کنه.
  • اگه دسترسی شما فقط مشاهده باشه، بخش خروجی رو زیر تب Export توی نوار کناری سمت راست پیدا می‌کنین که برای بررسی و استخراج عناصر بدون تغییر محتوای اصلی طراحی شده.

چه چیزی توی فیگما قابل خروجی گرفتنه؟

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

 

انتخاب فرمت خروجی مناسب

 

انتخاب فرمت مناسب برای خروجی‌های فیگما، وضوح و عملکرد بهینه رو تضمین می‌کنه:

  • PNG: برای تصاویری که به شفافیت (تصاویر بدون بک گراند) یا ترکیبی از متن و گرافیک نیاز دارن، مثل لوگوها یا تصاویر، ایده‌آله. فشرده‌سازی بدون اتلاف رو ارائه میده و کیفیت رو حفظ می‌کنه، اما در مقایسه با JPG، حجم فایل‌های بزرگتری داره.
  • JPG: به دلیل حجم فایل کوچکتر ناشی از فشرده‌سازی با اتلاف، برای استفاده در وب یا عکاسی چاپی عالیه. با این حال، از شفافیت پشتیبانی نمی‌کنه و ممکنه وضوح متن رو کاهش بده و اون رو برای گرافیک‌هایی با متن کمتر مناسب کنه.
  • SVG: برای لوگوها، آیکون‌ها یا عناصر طراحی واکنش‌گرا عالیه. SVGها گرافیک‌های برداری قابل تغییر اندازه هستن، کیفیت رو در هر اندازه‌ای حفظ می‌کنن و از شفافیت پشتیبانی می‌کنن. اونا برای کدنویسی مناسب هستن و به خوبی با نیازهای طراحی دیجیتال هماهنگ میشن.
  • PDF: برای به اشتراک گذاشتن طرح‌بندی‌های دقیق و تعاملی بین سیستم‌ها استفاده میشه. PDFها متن، فونت‌ها، گرافیک‌های برداری و تصاویر رو در بر می‌گیرن و یکپارچگی طرح رو حفظ می‌کنن. اونا برای ماکاپ‌های چاپی، دارایی‌های توسعه iOS (که توسط Xcode پشتیبانی میشه) یا خروجی گرفتن اسلایدها ایده‌آل هستن.

 

مقیاس برای خروجی

 

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

برای تنظیم اندازه، یه عدد رو به دنبال موارد زیر وارد کنین:

  • “x” برای مقیاس با اون ضریب مثلا اگر ابعاد فریمی که می‌خواید خروجی بگیرید 200 * 200 پیکسل هست، در حالت 2x برابر با 400 * 400 میشه
  • “w” برای یه عرض خاص
  • “h” برای یه ارتفاع مشخص

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

تصاویر فیگما معمولاً با DPI (تعداد نقطه در هر اینچ) ۷۲ خروجی گرفته میشن که وضوح تصویر رو نشون میده. برای محاسبه DPI یه تصویر مقیاس شده، کافیه ۷۲ رو در ضریب مقیاستون ضرب کنین. برای مثال، تصاویری که در 2x مقیاس شدن، DPI ۱۴۴ دارن. DPI بالاتر برای تصاویر واضح و دقیق روی صفحه‌های با وضوح بالا، برای تضمین وضوح بصری توی طرح‌هاتون حیاتیه.

 

خروجی دسته‌ای فایل‌ها

 

خروجی دسته‌ای یه صرفه‌جویی در زمان توی فیگماست، وقتی که نیاز دارین چند دارایی رو به طور همزمان خروجی بگیرین، مثل یه رابط کاربری کامل برنامه یا یه مجموعه آیکون، ایده‌آله. برای شروع خروجی دسته‌ای، به منوی اصلی برین، File > Export رو انتخاب کنین یا از میانبر زیر استفاده کنین:

  • مک: Shift + Command + E
  • ویندوز: Shift + Ctrl + E

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

دوره های آموزشی ما به شما کمک می‌کنند یک بار برای همیشه و اصولی، طراحی محصول را یاد بگیرید.

برای مشاوره رایگان، همین الان با ما تماس بگیرید.

مشاهده دوره ها 09900800427
5 دیدگاه

در بحث‌‌ پیرامون این مقاله شرکت کنید!

دیدگاهتان را بنویسید