امروز قراره به یکی از مهم‌ترین مراحل نهایی هر پروژه طراحی UI/UX بپردازیم: خروجی گرفتن یا Export در فیگما. بعد از ساعت‌ها طراحی و خلق ایده‌های بصری جذاب، نوبت به این می‌رسه که طرح‌هامون رو به فرمت‌های مختلف برای استفاده در وب، اپلیکیشن، ارائه به کارفرما و … آماده کنیم. اگه می‌خواید بدونید چطور به بهترین و حرفه‌ای‌ترین شکل از طرح‌های فیگما خروجی بگیرید و با تنظیمات مختلف Export آشنا بشید
در این آموزش چه چیزهایی یاد میگیرید؟
بیا یه نگاه سریع به مباحثی در این آموزش بندازیم و بعد بریم سراغ جزئیات:
- نحوه خروجی گرفتن از طرح‌ها و صفحات مختلف در فیگما
- تفاوت بین فرمت‌های مختلف خروجی (PNG, JPG, SVG, PDF) و کاربردهای آن‌ها
- ویژگی‌های فرمت PNG و مزایای استفاده از آن
- تفاوت خروجی PNG و JPG و انتخاب فرمت مناسب
- روش خروجی گرفتن تصاویر با کیفیت بالاتر در فیگما
- نحوه خروجی همزمان چند تصویر به صورت دسته‌ای
- روش تغییر پسوند نام فایل خروجی
- ویژگی‌ها و تنظیمات فرمت JPG
- ویژگی‌ها و تنظیمات فرمت SVG و رفع مشکل بهم ریختگی متن و آیکون
- ویژگی‌ها و تنظیمات فرمت PDF
- دلایل احتمالی عدم نمایش بخشی از دیزاین در خروجی و راه حل رفع آن
(برای دیدن این ویدیو باید VPN شما روشن باشد. بعد از روشن کردن VPN یا فیلترشکن، بر روی لینک زیر بزنید و در یوتیوب ویدیو را تماشا کنید)
چطور از طرح‌ها و صفحات مختلف در فیگما خروجی بگیریم؟
برای خروجی گرفتن از طرح‌ها و صفحات مختلف در فیگما، این مراحل رو دنبال کنید:
- انتخاب المان یا فریم: ابتدا المان، فریم یا صفحه‌ای که می‌خواهید ازش خروجی بگیرید رو انتخاب کنید.
- باز کردن پنل Export: در پنل سمت راست (Properties Panel)، به بخش Export برید.
- تنظیمات خروجی:
- روی علامت + کلیک کنید تا یه تنظیم جدید برای خروجی بسازید.
- فرمت (مثل PNG یا JPG)، کیفیت و اندازه (مثل 1x یا 2x) رو مشخص کنید.
- گرفتن خروجی:
- روی دکمه Export [نام المان] کلیک کنید.
برای صفحات مختلف، کافیه هر صفحه رو جداگانه انتخاب کنید و همین مراحل رو تکرار کنید.
تفاوت بین فرمت‌های مختلف خروجی در فیگما چیست؟
فیگما از فرمت‌های مختلفی برای خروجی پشتیبانی می‌کنه که هر کدوم کاربرد خاص خودشون رو دارن:
- PNG: مناسب برای تصاویر با کیفیت بالا و شفافیت (مثل آیکون‌ها و لوگوها).
- JPG: برای عکس‌ها و تصاویری که کیفیت خوب با حجم کم نیاز دارن.
- SVG: فرمت برداری که کیفیتش در هر اندازه حفظ می‌شه (مثل آیکون‌ها و لوگوهای قابل‌ویرایش).
- PDF: برای اسناد و طرح‌های چندصفحه‌ای یا قابل‌چاپ و همچنین حفظ ویژگی وکتور برای تغییر اندازه بدون افت کیفیت (در صورتی که عناصر طرح اصلی هم وکتور باشد).
انتخاب فرمت به نوع طراحی و هدف شما بستگی داره.
ویژگی‌های فرمت PNG برای خروجی گرفتن در فیگما چیست؟
فرمت PNG یه گزینه عالی برای خروجی‌های باکیفیت در فیگماست. ویژگی‌هاش ایناست:
- شفافیت (Transparency): می‌تونید پس‌زمینه شفاف داشته باشید.
- کیفیت بالا: بدون افت کیفیت، مخصوصاً برای جزئیات ریز مثل آیکون‌ها.
- حجم بیشتر: نسبت به JPG حجم بیشتری داره، پس برای استفاده در وب ممکنه نیاز به بهینه‌سازی داشته باشه.
برای المان‌های UI، لوگوها و آیکون‌ها خیلی مناسبه.
تفاوت خروجی فرمت PNG با JPG در فیگما چیست؟
تفاوت‌های اصلی بین PNG و JPG اینجاست:
- شفافیت:
- PNG از پس‌زمینه شفاف پشتیبانی می‌کنه.
- JPG شفافیت نداره و پس‌زمینه رنگی (معمولاً سفید) می‌ده.
- کیفیت و فشرده‌سازی:
- PNG بدون افت کیفیت (Lossless) فشرده می‌شه.
- JPG با افت کیفیت (Lossy) فشرده می‌شه و حجم کمتری داره.
- کاربرد:
- PNG برای تصاویر با جزئیات و شفافیت.
- JPG برای عکس‌های بزرگ که حجم کم مهمه.
بسته به نیازتون یکی رو انتخاب کنید.
چطور تصویر خروجی با کیفیت‌تری در فیگما بگیریم؟
برای گرفتن خروجی با کیفیت بالاتر، این کارها رو انجام بدید:
- افزایش رزولوشن:
- تو بخش Export، به جای 1x، گزینه‌های 2x یا 3x رو انتخاب کنید تا تصویر با رزولوشن بالاتری ذخیره بشه.
- استفاده از فرمت برداری:
- اگه طراحی‌تون برداریه (مثل لوگو)، از فرمت SVG استفاده کنید که کیفیتش در هر اندازه‌ای عالی می‌مونه.
- تنظیمات پیشرفته:
- برای PNG و JPG، کیفیت رو در تنظیمات دستی بالا ببرید.
با این روش‌ها، خروجی‌تون همیشه باکیفیت و حرفه‌ای خواهد بود.
ویژگی‌ها و تنظیمات فرمت JPG برای خروجی گرفتن در فیگما
فرمت JPG برای تصاویری که کیفیت خوب و حجم کم می‌خواهید عالیه. ویژگی‌هاش:
- کیفیت قابل‌تنظیم: می‌تونید کیفیت رو از 0 تا 100 تنظیم کنید (هرچی بالاتر، کیفیت بهتر و حجم بیشتر).
- اندازه: ابعاد رو می‌تونید تغییر بدید یا با ضریب (مثل 2x) بزرگ‌تر کنید.
- بدون شفافیت: پس‌زمینه همیشه رنگیه (معمولاً سفید).
برای عکس‌ها و تصاویری که شفافیت مهم نیست، JPG گزینه خوبیه.
ویژگی‌ها و تنظیمات فرمت SVG برای خروجی گرفتن در فیگما
SVG یه فرمت برداریه که برای آیکون‌ها و لوگوها عالیه. ویژگی‌هاش:
- کیفیت ثابت: تو هر اندازه‌ای کیفیتش افت نمی‌کنه.
- حجم کم: برای المان‌های ساده حجم کمی داره.
- شفافیت: از پس‌زمینه شفاف پشتیبانی می‌کنه.
برای استفاده در وب‌سایت‌ها و طراحی UI خیلی مناسبه.
چطور در خروجی SVG فیگما، متن و آیکون‌ها بهم نریزند؟
برای اینکه متن و آیکون‌ها تو خروجی SVG بهم نریزن:
- تبدیل متن به Path:
- متن رو انتخاب کنید و از منوی Object گزینه Flatten رو بزنید تا به مسیر (Path) تبدیل بشه یا اینکه می توانید با کلیک سمت راست رو متن یا عنصر مدنظرتون گزینه Outline Stroke رو انتخاب کنید.
- گروه‌بندی:
- متن و آیکون‌ها رو تو یه گروه (Group) قرار بدید تا ساختار حفظ بشه.
با این روش، خروجی SVGتون دقیقاً مثل طرح اصلی می‌شه.
چرا بخشی از دیزاین ما در خروجی فیگما نیست؟
اگه بخشی از طراحی‌تون تو خروجی دیده نمی‌شه، دلایلش می‌تونه اینا باشه:
- خارج از فریم: المان‌هایی که بیرون از فریم هستن تو خروجی نمی‌آن.
- لایه‌های مخفی: اگه لایه‌ای رو مخفی کردید، تو خروجی غیبش می‌زنه.
- تنظیمات Export: المان موردنظر باید تو تنظیمات Export انتخاب شده باشه.
- ماسک‌ها: اگه ماسک درست تنظیم نشده باشه، ممکنه بخشی از طرح حذف بشه.
راه‌حل:
تنظیمات Export رو برای المان‌های موردنظر چک کنید.
همه المان‌ها رو داخل فریم بذارید.
لایه‌های مخفی رو فعال کنید.
تو این آموزش، همه نکات مهم درباره خروجی گرفتن از فیگما رو با هم مرور کردیم؛ از انتخاب فرمت مناسب و تنظیماتش گرفته تا حل مشکلات رایج. امیدوارم با این توضیحات بتونید خروجی‌های باکیفیت و حرفه‌ای بگیرید. اگه سوالی دارید، حتما بپرسید!
اگه دوست داشتید، این مطلب رو با بقیه به اشتراک بذارید و حتماً ویدیوی کاملش رو توی [کانال یوتیوبم] ببینید!
آموزش‌های تخصصی طراحی UI/UX و طراحی محصول
اگر می‌خواهید مهارت‌های خود را در زمینه‌های طراحی رابط کاربری و تجربه کاربری افزایش دهید، می‌توانید از طریق سایت Learnuix.com در دوره‌های آموزشی زیر ثبت‌نام کنید:
- آموزش طراحی رابط کاربری UI
- آموزش طراحی تجربه کاربری UX
- آموزش ساخت دیزاین سیستم در Figma
- آموزش پروداکت دیزاین
این دوره‌ها به شیوه‌ای عملی و کاربردی طراحی UI/UX را آموزش می‌دهند تا بتوانید مهارت‌های خود را ارتقا دهید.
در صورتی که این ویدیو برای شما مفید بود, لطفا با دوستانتون در شبکه های اجتماعی به اشتراک بگذارید.
برای مشاهده آموزش های بیشتر دیزاین عضو کانال یوتیوب من بشوید:
کانال تلگرام آموزشی طراحی UI/UX
کانال تلگرام iHMahmoodi محتواهای آموزشی و کاربردی مفیدی در زمینه طراحی رابط کاربری و تجربه کاربری منتشر می‌کند.
از طریق این کانال می‌توانید به آخرین اخبار، آموزش‌های ویدیویی، معرفی کتاب، نکات کاربردی و دیگر مطالب آموزشی مرتبط با UI/UX دسترسی داشته باشید.
با عضویت در کانال تلگرام iHMahmoodi همواره در جریان دانش روز طراحی رابط و تجربه کاربر باشید.
گروه تلگرام جامعه طراحان UI/UX
گروه تلگرامی UXHubs بستری برای ارتباط و تعامل طراحان UI/UX فراهم می‌کند.
اعضای این گروه می‌توانند درباره موضوعات مختلف طراحی رابط کاربر و تجربه کاربر بحث و تبادل نظر کنند، سوالات خود را مطرح کنند و از تجارب یکدیگر بهره ببرند.
با پیوستن به گروه تلگرام UXHubs به جامعه بزرگ طراحان رابط کاربر ملحق شوید.
دیگر آموزش های مرتبط:
آموزش جامع فیگما – پیش نیازهای شروع کار با Figma – قسمت صفر
آموزش جامع فیگما – آشنایی با داشبورد، کامیونیتی و محیط Figma – قسمت اول
آموزش جامع فیگما – آشنایی و کار با فریم ها در Figma – قسمت دوم
آموزش جامع فیگما – نکات اساسی برای شروع کار با Figma – قسمت سوم
آموزش جامع فیگما – تفاوت فریم، سکشن و گروه در Figma – قسمت چهارم
آموزش جامع فیگما – تنظیم و تراز کردن اشیا در صفحه Figma – قسمت 5
آموزش جامع فیگما – تغییر شفافیت و ترکیب لایه ها با هم در Figma – قسمت 6
آموزش جامع فیگما – کار با رنگ و گرادینت در Figma – قسمت 7
آموزش جامع فیگما – کار با حاشیه ها یا Stroke در Figma – قسمت 8
آموزش جامع فیگما – کار افکت یا Effect ها در Figma – قسمت 9
آموزش ساخت و تنظیم انواع اشکال و ماسک کردن در Figma – قسمت 10
آموزش جامع کار با ابزار Pen و کاربردهای آن در Figma – قسمت 11
