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

ممکنه متوجه شده باشید که در Figma تصاویر به شکلی کمی متفاوت نسبت به ابزارهای دیگر مدیریت می‌شوند. چندین روش مختلف برای وارد کردن آن‌ها وجود دارد. همچنین چند نکته و ترفند وجود دارد که طراحی با تصاویر در Figma را آسان می‌کند. بنابراین، اگر تازه کار هستید و از یک ابزار دیگر به Figma آمده‌اید یا فقط بهبود جریان کار خود را می‌خواهید، این راهنما مطمئناً باعث می‌شود همکاران و کارگردانان هنری که در کنار شما حضور دارند، بپرسند: “چطور این کار را انجام دادی؟”

وارد کردن تصاویر در فیگما از طریق منو

ممکن است این موضوع به نظر واضح بیاید، اما برای شروع کار با تصاویر در فیگما، ابتدا باید آن‌ها را وارد پروژه خود کنید. شما می‌توانید این کار را از منو انجام دهید، به بخش “File” بروید و سپس بر روی “Place Image” کلیک کنید. همچنین می‌توانید همین گزینه را در پایین منوی ابزارهای شکل پیدا کنید یا با فشردن میانبر صفحه کلیدی Shift + Ctrl+ K این کار را انجام دهید.

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

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

چرا استفاده از تصاویر در فیگما اینگونه است؟

در فیگما، ما تصاویر را به عنوان یک نوع جداگانه مورد استفاده قرار نمی‌دهیم؛ به جای آن، آن‌ها را به عنوان پر کردن (fill) می‌شناسیم. هنگامی که یک تصویر را وارد می‌کنید، یک مستطیل با همان ابعاد ایجاد می‌شود و تصویر به آن اعمال می‌شود. اگر با CSS آشنا هستید، می‌توانید این را مثل تنظیم یک تصویر در ویژگی پس‌زمینه (background) یک div تصور کنید. به طور ظاهری این مسئله به نظر چیز زیادی نمی‌آید؛ تصویر شما همچنان به نظر می‌آید که همان است، اما مزیت این است که انجام کارهای مانند برش، تغییر اندازه و جایگزینی تصویر در حالی که در حال طراحی هستید، بسیار آسان‌تر می‌شود.

همانطور که گفتم، زمانی که از روش “Place Image” استفاده می‌کنید، امکان اضافه کردن چندین تصویر یکی یکی وجود دارد. چیز جالب این است که به دلیل اینکه تصاویر به عنوان پر کردن (fill) مورد استفاده قرار می‌گیرند، می‌توانید از این روش برای اضافه کردن تصاویر انتخابی به شکل‌های موجود استفاده کنید. یک مورد کاربرد این موضوع اضافه کردن سریع تصاویر پروفایل به سه طراحی مختلف (دایره، مربع و چهارچوب گرد) است که می‌خواهید آن‌ها را تست کنید، می‌باشد.

از طریق کشیدن و رها کردن (drag and drop)

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

از طریق کپی + پیست کردن

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

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

تغییر دادن تصاویر در Figma

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

به طور پیش‌فرض، تصاویر برای Fill کردن هر شکلی که در آن هستند تنظیم شده‌اند؛ با این حال، ما به شما کنترل کامل بر روی این مسئله را می‌دهیم. اگر بر روی تنظیم پر کردن در پنل خصوصیات کلیک کنید، یک پنجره جدید ظاهر می‌شود. در بالای این پنجره، یک کشویی کوچک وجود دارد که به شما این امکان را می‌دهد که بین گزینه‌های “پر کردن”، “جاگذاری”، “برش” و “تایل” جابجا شوید.

Fill

همانطور که می‌بینید، گزینه “پر کردن” باعث می‌شود تا تصویر به ابعاد شکلی که در آن است، گسترده شود.

Fit

“جاگذاری” (Fit) مطمئن می‌شود که شما همیشه تصویر کامل را در شکل خود مشاهده کنید. توجه داشته باشید که این ممکن است باعث ایجاد فضای خالی (پدینگ) دور تصویر شود.

Crop

گزینه “برش” (Crop) به شما اجازه می‌دهد تا تصویر را تغییر اندازه دهید و آن را داخل مرزهای شکل حرکت دهید.

Tile

خوب… ایده گرفتید! 🙂

ترفند های کار با تصاویر در فیگما

حالا که در وارد کردن و ویرایش تصاویر در Figma ماهر شده‌اید، می‌خواهم چند نکته و ترفند ساده و روان را به اشتراک بگذارم تا بتوانید این روش‌ها را در عمل به کار ببرید.

ترفند 1 : برش سریع

آیا به سرعت نیاز به برش تصویر دارید؟ چند کلیک را ذخیره کنید؛ ابتدا لایه تصویر را انتخاب کرده و سپس بر روی دکمه برش در نوار ابزار بالا کلیک کنید. یا اگر طرفدار میانبرهای صفحه کلید هستید (که باید باشید)، فقط دکمه Option را نگه داشته و دوبار بر روی تصویر کلیک دوتا کنید تا تنظیمات برش ظاهر شود.

ترفند 2 : استایل تیمی

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

البته باید بدانید که فقط در نسخه پریمیوم می توانید این کار را انجام دهید.

ترفند 3 : Blend Modes

از جزئیات Blend Modes ها صحبت نخواهم کرد، اما توضیح می‌دهم چگونه افزودن لایه‌های متعدد می‌تواند مفید باشد.

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

با افزودن یک لایه پر رنگ ساده با تنظیم رنگ به سیاه یا سفید و سپس تغییر حالت ترکیب به حالت رنگ، حالا تصاویر سیاه و سفید با کنترل دقیقتری دارید.

ترفند 4 : Copying Fill Layers

یک ترفندی که در Figma کشف کردم و برای من زمان زیادی صرفه جویی کرده است این است که می‌توانید لایه‌های پر را کپی و پیست کنید (این همچنین برای لایه‌های Stroke و Effect نیز صدق می‌کند). ادامه دادن از مثال بالا، این به شما این امکان را می‌دهد که به سرعت لایه پر سیاه و سفید را کپی کرده و با استفاده از دستورهای command+c و command+v آن را به تصاویر اضافی اعمال کنید.

ترفند 5 : تصاویر به عنوان حاشیه (Stroke)

هرچند که ممکن است کمترین موارد مصرف برای داشتن یک تصویر به عنوان حاشیه وجود داشته باشد، اما خوب است بدانید که ما این قابلیت را در Figma پشتیبانی می‌کنیم. 🙂

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

جمع بندی

توجه داشته باشید که تصاویری که بزرگتر از ۴۰۰۰ پیکسل هستند، به منظور افزایش کارایی کاهش داده خواهند شد. تمام تصاویر موجود در این راهنما از سایت‌های unsplash.com و diverseui.com گردآوری شده‌اند.

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