در این مطلب می‌خواهم یکی از قابلیت‌های بسیار کارآمد Figma را به شما معرفی کنم که می‌تواند سرعت و بهره‌وری شما را در طراحی چندین برابر کند. این قابلیت، Multi Select یا انتخاب همزمان چندین عنصر در Figma نام دارد.
در نسخه فعلی Figma این Workflow با مفهوم Select matching layers مستند شده است: می‌توانید لایه‌های یکسان را در چند Frame یا Group انتخاب کنید و تغییر را همزمان روی آن‌ها اعمال کنید. این قابلیت در موارد زیادی می‌تواند بسیار کاربردی باشد:
- تعریف و کاربرد Multi Select در فیگما
- تغییر عکس در همه ی فریم های مختلف با مالتی سلکت فیگما
- دکمه و کلید میانبر Multi Select در Figma
- مالتی سلکت یا چند انتخابی در فیگما چطور کار می کند؟
- انتخاب و ویرایش همزمان متن های مشابه با Muti Select در فیگما
- ساخت کامپوننت در فریم های مختلف و اضافه کردن آبجکت به آن با مالتی سلکت در فیگما
- انتخاب عناصر مشابه در فریم های مختلف با Multi Select در فیگما
- چرا Multi Select فیگما در فریم های تو در تو کار نمیکند؟
- کاربرد ابزار Section در فیگما
- انتخاب عناصر مشابه با Multi Select در فریم های مختلف با گرفتن کلید Shift
- استفاده از تراز یا چیدمان یا Alignment همزمان عناصر در فریم های مختلف با Multi Select فیگما
- تغییر سایز و چرخاندن همزمان عناصر در فریم های مختلف با Multi Select در فیگما
- انتخاب و انتقال همزمان عناصر به داخل یک فریم Auto Layout با مالتی سلکت فیگما
- کپی و جایگذاری همزمان عناصر در فریم های مختلف با Multi Select در فیگما
- انتخاب و ویرایش همزمان متن با مالتی سلکت در فیگما
- انتخاب و جا به جایی عناصر در Auto Layout های مختلف با Multi Select فیگما
- انتخاب و ویرایش Varient های مختلف با Multi Select در فیگما
- اضافه کردن یک آیکان به داخل همه ورینت ها با مالتی سلکت فیگما
- ساخت کامپوننت و جایگذاری با Instance های آن در فریم ها مختلف با مالتی سلکت در فیگما
- کاربرد Multi Select روی یک نمونه اپلیکیشن موبایل
- کاربرد Multi Select روی یک نمونه اسلاید پرزنتیشن یا پاورپوینت در فیگما
- کاربرد Multi Select روی پروتوتایپ در فیگما
- کاربرد Multi Select فیگما در دیزاین سیستم
- کاربرد Multi Select روی ساخت کامپوننت های یک پروژه و اپ موبایل
Select matching layers در Figma چطور کار می‌کند؟
برای استفاده از Select matching layers، یک لایه داخل Frame یا Group را انتخاب کنید. لایه‌های مشابه می‌توانند با Toolbar، میانبر یا Shift + Marquee انتخاب شوند. در نسخه فعلی، آبجکت‌هایی که داخل Section هستند فقط با آبجکت‌های همان Section Match می‌شوند؛ این نکته می‌تواند توضیح دهد چرا بعضی انتخاب‌ها در ساختارهای پیچیده نتیجه متفاوتی دارند.
میانبر فعلی Select matching layers در Mac برابر Option + Command + A و در Windows برابر Alt + Control + A است.
آموزش عملی Multi Select و Multi-edit در Figma
فرض کنید برای یک لندینگ پیج سه نسخه دسکتاپ، تبلت و موبایل طراحی کرده‌اید. حالا می‌خواهید تصویر اصلی، عنوان یا دکمه‌ای که در هر سه نسخه تکرار شده تغییر کند. آیا باید یکی‌یکی وارد هر Frame شوید؟ در ویدیو نشان می‌دهم چطور با Select matching layers لایه‌های متناظر را انتخاب و همزمان ویرایش کنید. اسم رایج این روش Multi-edit است و می‌تواند هنگام اصلاح صفحات تکراری، کامپوننت‌ها و طراحی واکنش‌گرا زمان زیادی ذخیره کند.
Select matching layers چطور لایه‌های مشابه را پیدا می‌کند؟
اول یک لایه را داخل Frame انتخاب کنید. سپس از دستور Select matching layers یا میانبر آن استفاده کنید. در ویندوز کلیدهای Ctrl + Alt + A و در مک Option + Command + A این کار را انجام می‌دهند. اگر لایه‌های متناظر در Frameهای دیگر شرایط Match شدن را داشته باشند، دور همه آن‌ها کادر انتخاب نمایش داده می‌شود و می‌توانید ویژگی‌های مشترکشان را همزمان تغییر دهید.
چرا بعضی لایه‌ها با Multi Select انتخاب نمی‌شوند؟
در اولین مثال آموزشی، یک تصویر در سه Frame مرتبط می‌گذارم و نشان می‌دهم این ویژگی به ساختار و نام‌گذاری لایه‌ها حساس است. اگر تصویر یکی از Frameها را Rename کنید یا ساختار والد و فرزند را به‌شکلی متفاوت تغییر بدهید، ممکن است دیگر Match نشود. برای عیب‌یابی، نام لایه‌های معادل، والدهای آن‌ها، ترتیب و جایگاهشان در سلسله‌مراتب Layers را مقایسه کنید. قرار گرفتن لایه‌ها داخل Section یا Frameهای تو‌در‌تو هم می‌تواند روی محدوده جستجوی عناصر متناظر اثر بگذارد.
یک روش تمرین خوب این است که ابتدا یک Frame اصلی را طراحی کنید و از آن دو Duplicate بگیرید. بعد فقط اندازه نسخه موبایل و تبلت را تغییر دهید، بدون اینکه نام لایه‌های متناظر را به‌هم بزنید. حالا Multi-edit را تست کنید و عمدا نام یکی از لایه‌ها را تغییر دهید تا ببینید چرا دیگر پیدا نمی‌شود.
تغییر همزمان عکس در چند Frame
در ویدیو، از سه نسخه لندینگ پیج دوره طراحی محصول مثال می‌زنم. ابتدا عکس داخل یکی از Frameها را انتخاب می‌کنم؛ بعد با Select matching layers عکس‌های همان بخش در نسخه‌های دیگر انتخاب می‌شوند. حالا از تنظیمات Fill تصویر جدید را جایگزین می‌کنم تا همه لایه‌های انتخاب‌شده یکجا تغییر کنند. این قابلیت زمانی خیلی مفید است که روی چند Breakpoint از یک محصول کار می‌کنید.
ویرایش همزمان متن‌ها با Multi-edit
برای تغییر عنوان یا نوشته دکمه در چند Frame، ابتدا یکی از متن‌های معادل را انتخاب کنید، سپس Select matching layers را بزنید. بعد وارد حالت ویرایش متن شوید و عبارت جدید را بنویسید؛ فیگما می‌تواند محتوای متن‌های منتخب را یکجا تغییر دهد. در مثال ویدیو عنوان دوره Product Design را به UX Design تبدیل می‌کنم تا تغییر همزمان در هر سه نسخه را ببینید. اگر فقط یکی از متن‌ها تغییر کرد، اول مطمئن شوید همه لایه‌های موردنظر واقعا در حالت انتخاب هستند.
تغییر اندازه، Rotation و Alignment چند لایه با هم
انتخاب همزمان فقط مخصوص متن و عکس نیست. مثلا اگر چند آیکون در Frameهای مختلف اندازه متفاوتی پیدا کرده‌اند، همه نمونه‌های Match شده را انتخاب و در پنل Properties یک مقدار دقیق برای Width، Height یا Rotation وارد کنید. این روش وقتی مطمئن‌تر است که می‌خواهید اندازه نهایی همه برابر شود؛ Drag کردن لبه‌ها ممکن است نسبت‌های متفاوت موجود را حفظ کند.
برای تراز هم می‌توانید لایه‌های مشابه را انتخاب کنید و با ابزار Alignment مرتبشان کنید. در ویدیو نشان می‌دهم که نگه‌داشتن Shift هنگام استفاده از گزینه‌های تراز در برخی حالت‌های Multi-edit باعث می‌شود عناصر نسبت به Frame خودشان مرتب شوند؛ مثلا لوگو در تمام اسکرین‌های یک اپلیکیشن موبایل وسط قرار بگیرد. رفتار دقیق این گزینه به نوع انتخاب و نسخه Figma وابسته است؛ پس بعد از اجرا، هر Frame را جداگانه بررسی کنید.
انتقال و کپی عناصر در چند Frame به‌صورت همزمان
گاهی مشکل شما خود لایه نیست؛ مثلا آیکون باید داخل کانتینر Auto Layout مربوط به Header قرار بگیرد. در مثال ویدیو، لایه‌های متناظر را انتخاب می‌کنم و جای آن‌ها را در پنل Layers تغییر می‌دهم تا داخل Frameهای والد قرار بگیرند. همچنین نشان می‌دهم چطور می‌شود یک عنصر را Copy کرد، Frameهای مقصد را انتخاب کرد و همان عنصر را در چند جای مشابه Paste کرد. قبل از انتقال، ساختار والدهای مقصد را بررسی کنید تا آبجکت ناخواسته به کانتینر اشتباه نرود.
استفاده از Multi-edit برای ساخت Component و Instance
فرض کنید یک دکمه یکسان را در ده‌ها صفحه گذاشته‌اید ولی از ابتدا آن را Component نکرده‌اید. در ویدیو چند دکمه متناظر را با Multi Select انتخاب می‌کنم و بعد دستور Create component را اجرا می‌کنم. با این روش می‌توان یک Component اصلی ساخت و نمونه‌های استفاده‌شده را به Instance تبدیل کرد؛ سپس تغییر در Component اصلی روی Instanceهایی که Override نشده‌اند اعمال می‌شود. البته اگر قبلا به یک Instance مقدار مستقلی داده باشید، ممکن است همه ویژگی‌هایش با نسخه اصلی یکسان نشود.
ویرایش همزمان Variantها و افزودن آیکون
در یک Design System ممکن است دکمه Primary چند Variant داشته باشد: Default، Hover، Disabled و مانند آن. اگر می‌خواهید یک آیکون مشترک به همه حالت‌ها اضافه کنید، Multi-edit کمک می‌کند. در ویدیو یکی از Variantها را انتخاب می‌کنم و با قابلیت ویرایش همزمان چند حالت را باز می‌کنم، سپس آیکون را Paste و جای آن را تنظیم می‌کنم. برای این تمرین بهتر است اول یک Component Set ساده با سه Variant بسازید تا متوجه شوید کدام تغییرات مشترک و کدام مخصوص هر Variant هستند.
کاربرد Multi Select در اپلیکیشن، اسلاید و Prototype
یکی از مثال‌های ویدیو مربوط به اپلیکیشن موبایل است: لوگو و عناصر Navigation در چند صفحه جای درستی ندارند. به‌جای اصلاح تک‌تک صفحات، لایه‌های متناظر را انتخاب می‌کنم و اندازه یا تراز آن‌ها را با هم تغییر می‌دهم. مثال بعدی عنوان و زیرعنوان چند اسلاید ارائه است که باید در یک موقعیت یکسان قرار بگیرند. این روش برای اصلاح عناصر مشترک صفحه‌های طراحی یا ارائه بسیار مفید است.
در بخش Prototype هم تغییر اندازه یا رنگ آبجکت‌های متناظر در Frameهای مختلف می‌تواند پیش‌نمایش طراحی را به‌روز کند؛ اما این به معنی امکان ویرایش همزمان تمام Interactionها یا منطق Prototype نیست. برای رفتارهای پیشرفته و نحوه Match شدن عناصر، محدودیت‌های نسخه فعلی محصول را بررسی کنید.
Multi Select چه تفاوتی با Component و Auto Layout دارد؟
این سه قابلیت را با هم اشتباه نگیرید: Multi-edit روشی برای انتخاب و ویرایش گروهی آبجکت‌های متناظر است؛ Component منبع اصلی قابل استفاده مجدد و Instanceهای مرتبط ایجاد می‌کند؛ و Auto Layout قوانین چیدمان و فاصله‌گذاری را برای یک کانتینر تعریف می‌کند. در یک پروژه حرفه‌ای معمولا به هر سه نیاز دارید و Multi-edit جای ساختار درست Design System را نمی‌گیرد.
تمرین واقعی: اصلاح لندینگ پیج سه‌نمایشی
یک صفحه Hero ساده با تصویر، عنوان و دکمه در یک Frame دسکتاپ بسازید. از آن Duplicate بگیرید و دو نسخه تبلت و موبایل ایجاد کنید. در هر سه، نام لایه‌های متناظر را حفظ کنید. حالا تصویر، تیتر و رنگ دکمه را با Select matching layers تغییر دهید. در مرحله بعد، نام یکی از لایه‌های تصاویر را عوض کنید و دوباره همان میانبر را بزنید تا مشکل Match نشدن را ببینید. در پایان سه دکمه را به Component مرتبط تبدیل کنید و تفاوت آن با ویرایش همزمان را مقایسه کنید.
من فایل تمرین این آموزش را در زمان انتشار ویدیو در Figma Community معرفی کرده‌ام. برای پیدا کردن فایل‌های مرتبط، نام Hossein Mahmoodi یا شناسه iHMahmoodi را در Community جستجو کنید. اگر می‌خواهید پنل Layers و انتخاب لایه‌های تو‌در‌تو را بهتر یاد بگیرید، آموزش Layers و میانبرهای فیگما پیش‌نیاز خوبی برای این تمرین است.
برای بررسی رفتار فعلی انتخاب لایه‌های متناظر، راهنمای رسمی Select layers and objects را هم ببینید. با تغییرات نسخه‌های Figma، ممکن است محل دکمه‌ها یا پشتیبانی از بعضی حالت‌های Multi-edit نسبت به ویدیوی ضبط‌شده متفاوت باشد.
