آموزش Export در Figma | خروجی PNG، JPG، SVG و PDF

خروجی گرفتن یا Export در Figma مرحله‌ای است که طراحی را از فایل Figma به یک فایل قابل‌استفاده در وب، اپلیکیشن، ارائه، مستندات یا تحویل به توسعه‌دهنده تبدیل می‌کند. انتخاب فرمت درست فقط به «کیفیت بیشتر» مربوط نیست؛ نوع فایل، شفافیت، حجم، مقیاس‌پذیری و نحوه رندر متن و وکتورها هم مهم‌اند.

در این آموزش قسمت ۱۴، روش اصلی Export را مرور می‌کنیم و تفاوت PNG، JPG، SVG و PDF، تنظیمات Scale، کیفیت، Color Profile، Image Resampling و گزینه‌های مهم SVG را بر اساس ساختار فعلی Figma توضیح می‌دهیم.

در این آموزش چه چیزهایی یاد می‌گیرید؟

چه لایه‌ها، Frameها و بخش‌هایی را می‌توان از Figma خروجی گرفت
چطور یک Export Configuration بسازیم
PNG، JPG، SVG و PDF چه تفاوتی دارند
Scaleهای 1x، 2x و 3x چه زمانی کاربرد دارند
Suffix، Color Profile و Image Resampling چه کاری انجام می‌دهند
متن و Stroke در SVG چطور Export می‌شوند
چطور چند Asset را همزمان خروجی بگیریم
چطور مشکلات رایج خروجی را بررسی کنیم

ویدیوی کامل آموزش Export در Figma

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

پخش ویدیو در آپارات

تماشای کیفیت اصلی در یوتیوب

چه چیزهایی را می‌توان از Figma خروجی گرفت؟

در Figma Design می‌توانید Layer، Frame، Component، Group و Section را خروجی بگیرید. همچنین با Slice می‌توانید فقط یک بخش مشخص از Canvas را Export کنید. برای بعضی نیازها امکان خروجی گرفتن از محتوای کل یک Page یا ذخیره نسخه کامل فایل با فرمت .fig هم وجود دارد.

برای Assetهای رابط کاربری معمولا بهترین کار این است که همان لایه یا Frame نهایی را انتخاب کنید تا محدوده و نام فایل خروجی قابل‌کنترل باشد.

چطور در Figma خروجی بگیریم؟

Layer، Frame، Component، Group یا Section موردنظر را انتخاب کنید.
در پایین پنل Properties سمت راست، بخش Export را پیدا کنید.
روی علامت + کلیک کنید تا یک Export Configuration ساخته شود.
فرمت موردنظر را از بین PNG، JPG، SVG یا PDF انتخاب کنید.
در صورت نیاز Scale یا اندازه سفارشی، Suffix و تنظیمات پیشرفته را مشخص کنید.
روی دکمه Export کلیک کنید.

می‌توانید برای یک لایه چند Export Configuration تعریف کنید؛ مثلا همان آیکون را هم به‌صورت PNG و هم SVG خروجی بگیرید. برای خروجی دسته‌ای نیز چند لایه را همزمان انتخاب کنید و Export را روی Selection اجرا کنید.

PNG، JPG، SVG یا PDF؛ کدام فرمت بهتر است؟

PNG

PNG یک فرمت Raster با فشرده‌سازی بدون افت کیفیت است و از Transparency پشتیبانی می‌کند. برای رابط‌هایی که متن، نمودار، Illustration یا پس‌زمینه شفاف دارند انتخاب مناسبی است، اما معمولا نسبت به JPG فایل بزرگ‌تری تولید می‌کند.

JPG یا JPEG

JPG از فشرده‌سازی Lossy استفاده می‌کند؛ یعنی برای کاهش حجم بخشی از داده تصویر حذف می‌شود. برای تصاویر عکاسی و مواردی که حجم فایل مهم است مناسب است، اما Transparency ندارد و فشرده‌سازی می‌تواند وضوح متن و جزئیات ریز را کاهش دهد.

SVG

SVG یک فرمت Vector است و بدون وابستگی به رزولوشن صفحه می‌تواند در اندازه‌های مختلف Scale شود. برای آیکون، لوگو و Illustrationهای برداری مناسب است. Figma برای SVG تنظیماتی مثل Outline text، Include id attribute و Simplify stroke دارد.

PDF

PDF برای خروجی Fixed Layout، ارائه، Mockupهای چاپی و انتقال ترکیبی از متن، تصویر و وکتور کاربرد دارد. Figma فایل PDF 1.7 تولید می‌کند و متن در PDF خروجی به‌صورت Glyph ذخیره می‌شود.

Scale در Export فیگما چطور کار می‌کند؟

برای خروجی Raster می‌توانید از Scaleهایی مثل 1x، 2x و 3x استفاده کنید یا اندازه سفارشی بدهید. Figma علاوه بر ضریب x، امکان تعیین عرض ثابت با w و ارتفاع ثابت با h را هم دارد.

1x: برای خروجی در اندازه طراحی.
2x و 3x: برای نمایشگرهای با تراکم پیکسلی بالاتر یا زمانی که رزولوشن بیشتری لازم دارید.
w / h: برای تعیین عرض یا ارتفاع مشخص بدون محاسبه دستی Scale.

SVG و PDF در Export فیگما فقط در Scale برابر 1x خروجی می‌شوند؛ چون SVG ذاتا برداری است و PDF نیز محدودیت Scale جداگانه دارد.

تنظیمات پیشرفته Export که باید بشناسید

Suffix: متن دلخواهی به انتهای نام فایل اضافه می‌کند؛ مثلا @2x یا dark.
Color Profile: می‌توانید خروجی را مطابق پروفایل فایل، sRGB یا Display P3 بگیرید.
Image Quality: برای JPG و PDF امکان تنظیم Quality/Size وجود دارد.
Image Resampling: برای PNG، JPG و PDF می‌توانید بین حالت Detailed و Basic انتخاب کنید. Detailed برای جزئیات، Gradient و Shadow مناسب‌تر است و Basic برای خطوط سخت، آیکون یا Pixel Art کاربرد دارد.
Ignore overlapping layers: مشخص می‌کند لایه‌های همپوشان خارج از Selection روی نتیجه Export اثر بگذارند یا نه.
Include bounding box: برای Text Layerها تعیین می‌کند محدوده Bounding Box در اندازه خروجی لحاظ شود یا نه.

متن و Stroke در SVG فیگما چطور Export می‌شوند؟

در نسخه فعلی Figma، متن در SVG به‌صورت پیش‌فرض به Glyph تبدیل می‌شود تا ظاهر آن حفظ شود. اگر می‌خواهید متن در فایل SVG قابل‌ویرایش باقی بماند، در تنظیمات Export گزینه Outline text را غیرفعال کنید.

Figma همچنین Strokeها را در SVG به Fill تبدیل می‌کند. گزینه Simplify stroke برای سازگاری بهتر Strokeهای Inside/Outside با ساختار SVG استفاده می‌شود. بنابراین برخلاف بعضی آموزش‌های قدیمی، برای حل مشکل متن لازم نیست قبل از Export حتما لایه Text را Flatten یا Outline Stroke کنید.

چطور خروجی با کیفیت‌تری بگیریم؟

برای Raster، Scale مناسب را انتخاب کنید؛ 2x یا 3x تعداد پیکسل بیشتری ایجاد می‌کند.
برای آیکون و لوگوی برداری تا جای ممکن SVG را ترجیح دهید.
برای JPG و PDF، Quality را متناسب با حجم و کاربرد تنظیم کنید.
برای تصاویر، Gradient و Shadow از Image Resampling روی Detailed استفاده کنید.
برای وب، حجم فایل نهایی را هم در کنار کیفیت بررسی کنید؛ بزرگ‌تر بودن فایل لزوما به معنی انتخاب بهتر نیست.

چرا بخشی از طراحی در خروجی دیده نمی‌شود؟

اگر نتیجه Export با چیزی که روی Canvas می‌بینید فرق دارد، این موارد را بررسی کنید:

Selection: مطمئن شوید دقیقا همان Layer یا Frame درست را Export می‌کنید.
Visibility: لایه مخفی در خروجی ظاهر نمی‌شود.
Clip و Mask: محدوده Frame، Clip Content یا Mask می‌تواند بخشی از محتوا را پنهان کند.
Overlapping layers: تنظیم Ignore overlapping layers را متناسب با نتیجه موردنظر بررسی کنید.
Bounding box: در Text Layerها ممکن است Bounding Box باعث فضای اضافه یا Crop شود.
SVG text/stroke: اگر SVG در ابزار مقصد متفاوت دیده می‌شود، Outline text و Simplify stroke را بررسی کنید.

جمع‌بندی و ادامه مسیر

برای بیشتر Assetهای UI، انتخاب فرمت مهم‌تر از صرفا بالا بردن Scale است: PNG برای شفافیت و گرافیک Raster، JPG برای تصویر کم‌حجم، SVG برای وکتور و PDF برای Fixed Layout. بعد از انتخاب فرمت، Scale، Color Profile و تنظیمات پیشرفته را متناسب با مقصد فایل تنظیم کنید.