اگر بخواهیم در نرم‌افزار فیگما طراحی رابط کاربری را واکنشگرا، منظم و اصولی طراحی کنیم، قطعا باید طراحی با auto layout باشد. این قابلیت جذاب فیگما، باعث طراحی جذاب و در عین حال سریع شده است. در این قسمت از دوره آموزش رایگان ui ux از آژانس نوآوری رسام قصد داریم به سوال Auto Layout در فیگما چیست و چه کاربردی دارد؟ پاسخ دهیم. پس خوشحال می‌شویم تا پایان مقاله ما را همراهی کنید.
محدودیت‌ها یا Constraints
ویژگی Constraints در Figma به شما این امکان را می‌دهد که تعیین کنید یک عنصر چگونه باید در یک Frame قرار گیرد یا اندازه شود. به این ترتیب، می‌توانید عناصر را در یک Frame به صورت ایستا یا پویا قرار دهید. به عنوان مثال، می‌توانید یک دکمه را در داخل یک کارت قرار دهید تا عرض دکمه با اندازه کارت افزایش یابد. یا، دکمه می‌تواند به همان اندازه باقی بماند. (توصیف Constraints و Auto Layout فیگما به صورت متنی کمی دشوار است، حتما توصیه میکنم ویدئو را مشاهده بفرمائید). همچنین آموزش پروژه محور فیگما در سایت به صورت رایگان قرار داده شده است. بدون شک این آموزش کمک بسیاری در یادگیری طراحی به شما خواهد کرد.
قابلیت Auto layout فیگما و کمک به طراحی Responsive
هنگام استفاده از Auto Layout لازم نیست اندازه هر شی را به صورت دستی تنظیم کنید. این کار را به طور خودکار با توجه به مشخصات شما انجام می‌دهد. هنگام کار با UIKitها، طراحی‌های واکنشگرا و پیچیده، در زمان و تلاش شما صرفه جویی می‌کند. با دکمه Shift + A می‌توانید یک Frame یا هر عنصر دیگری را Auto Layout کنید. بعد از انجام این کار، شما مقدار فاصله بین عناصر یا Margin و فاصله اطراف (داخل فریم) یا Padding را می‌توانید تعیین کنید.
اگر با html-css آشنا باشید، باید این را بگویم که ساختار Auto Layout فیگما برگرفته و شبیه به ساختار Flexbox در css است. باید تا جای ممکن، فریم‌هایی که در فیگما می‌سازید را Auto Layout کنید. حتی شما با Auto Layout کردن فریم اصلی پروژه، می‌توانید یک طراحی کاملا واکنشگرا یا ریسپانسیو، اجرا کنید.
به تصویر بالا دقت کنید. این همان تصویری است که در جلسه فاصله‌گذاری، درباره آن صحبت کردیم. البته اینجا می‌خواهیم با عینک Auto Layout به قضیه بنگریم. Margin با عدد 16 و Padding با عدد 24 تنظیم شده است. اگر شما متن وسط این کارت را ویرایش کنید و محتوای آن را کم یا زیاد کنید، محتوای صفحه خودش تنظیم می‌شود. بدون اینکه فواصل Margin و Padding بهم بریزد. حال فرض کنید که این کارت Auto Layout نبود. باید با یک تغییر جزئی، همه چیز را دوباره فاصله‌گذاری می‌کردید.
این مسئله را تعمیم بدهید به کل صفحه، حالا نسخه موبایل و تبلت. پس اگر این قابلیت جذاب نبود، خیلی باید وقت می‌گذاشتیم برای ویرایش کردن و درست کردن فواصل. حالا اصلا فرض کنید که پروژه 100 صفحه است. مثلا یک اپلیکیشن. پس هر طور که فکر کنید، زندگی یک طراح رابط کاربری، بدون Auto Layout مختل می‌شود!
طراحی منظم با Auto Layout فیگما
یک طراحی زمانی ارزش و معنا پیدا می‌کند که به شکل منظم و ریسپانسیو طراحی شده باشد. قابلیت Auto Layout فیگما این امکان را در اختیار شما قرار می‌دهد که طراحی منظم و اصولی داشته باشید. در این قسمت از دوره ui ux آموزش استفاده از Auto Layout در UI و متعلقات مربوط به این دانش مهم را توضیح دادیم. خوشحال می‌شویم تجربیات خود را با ما به اشترک بگذارید. همچنین اگر سوالی در مورد این مبحث داشتید از بخش دیدگاه‌ها، از متخصصین آژانس نوآوری رسام بپرسید.
موفق باشید 😍
48 پاسخ
سلام
گزینه Constraints برای من وجود نداره؟ جایی هم که گفتید کوچیکه من پیداش نمیکنم که بزرگ کنم
درود بر شما. وقت بخیر
در برخی موارد کانسترین اصلا نشان داده نمی‌شود. مثلا مواقعی که فریم بالادست وجود نداشته باشد. اگر به هر دلیل مسئله برطرف نشد اگر خواستید لینک پروژه خودتان را برای من بفرستید من چک میکنم.
موفق باشید.
سلام برشما
گزینه Constraints برای من وجود نداره؟ چطوری باید فعالش کنم؟
درود بر شما. وقت بخیر
هست. کمی کوچکتر شده. همان جای سابق هم هست. در سایدبار سمت راست. روش کلیک کنید بزرگتر می‌شود و می‌توان ازش استفاده کرد. این را در نظر بگیرید که لایه‌ای که فریم بالادست یا parent نداشته باشد، قاعدتا نیازی به Constraints ندارد و برای این لایه فعال نخواهد بود.
موفق باشید.
سلام خسته نباشید
اون آیکنی گفتید داخل یک اتو لی اوت میتونیم به صورت آزادانه المانم رو حرکت بدم رو تو نسخه جدید پیدا نمیکنم
درود بر شما. وقت بخیر
کلیک راست کنید و گزینه ignore auto layout رو پیدا کنید. یا اینکه از سایدبار سمت راست گزینه اش رو پیدا کنید. اسمش قبلا absolute position بود که اخیرا اسمش شده ignore auto layout. این را هم در نظر بگیرید که هر کدام از این دو روش زمانی جواب می‌دهد که 1. لایه بالا دست Auto Layout باشد 2. آن عنصر در حالت انتخاب باشد.
موفق باشید.
سلام استاد حمداللهی
بسیار ممنونم بابت آموزش های جذاب و کامل‌تون. فوق‌العاده روان و با حوصله تدریس می‌کنید. همین امر موجب آرامش و نظم دهی ذهن یادگیرنده می‌شود.
درود بر شما. وقت بخیر
سپاس از لطف و مهربانی شما. امیدوارم مفید واقع بشود. ممنونم از شما.
موفق باشید.
مررررسیییییییییییییییییییییییییییییییییییییییییییییییییییییییییی
درود بر شما. وقت بخیر
سپاس از لطف و همراهی شما.
موفق باشید.
درود خدمت استاد عزیزم
می‌خواستم ببینم وقتی حالت autolayout رو روی wrap میزاریم چرا توی منویی که ساختیم گزینه “فهرست” به جای اینکه بیاد بالا بقیه بیان زیرش میره پایین و از پایین پر میشه؟ راهکارش چیه که از بالا پر بشه؟
درود بر شما. وقت بخیر
اگر حالت Wrap رو فعال کنیم، می‌توانیم لنگر یا جهت تغییرات Autolayout را نیز تعیین کنیم. مثلا از بالا یا پائین کم و زیاد بشود. دقیقاً مشابه حالات افقی و عمودی Autolayout که این خصوصیت رو دارند، در حالت Wrap هم وجود دارد.
موفق باشید.
درود مجدد
اون لنگر (alignment) هرچی تغییر دادم چیز عوض نشد و دقیقا اخرین دکمه میاد بالا و اولین دکمه میره پایین ترین حالت قرار میگیره.
یک سوال دیگه هم داشتم وقتی یک دکمه طراحی میکنیم ما سایزش رو تنظیم میکنیم اما باید چه تنظیماتی رو انجام بدیم که اگر در آینده به متن اون دکمه اضافه شد متن بیرون نزنه و فریم دکمه همراه باهاش کشیده بشه به صورت افقی
بازم ممنون بابت پاسخ سریعتون واقعا لذت میبرم اینهمه انرژی رو که میبینم ازتون
درود بر شما. وقت بخیر
تغییر دادن لنگر یا جهت Autolayout زمانی معنی پیدا می‌کند که عناصر داخل آن و یا دست کم عرض Autolayout به صورت Fixed باشد. یعنی اگر Hug باشد که اصلا جایی ندارد که تغییر کند. خصوصاً در حالت Wrap عناصر باید به جز مورد مذکور، در سطر دوم هم بیفتند که تغییر آنها رویت شود. در خصوص دکمه، در جلسه ساخت uikit کامل این رو ساخته‌ایم. اگر دکمه Autolayout باشد همین اتفاق رخ می‌دهد و متن آن بیرون نمی‌زند. (عرض آن به صورت Hug و ارتفاع را به صورت دستی و با اعداد نسبت 8 می‌گذارند اغلب).
موفق باشید.
سلام و خسته نباشید
ممنون از آموزشات عالیتون
ببخشید استاد نسخه به روز فیگما گزینه absolut position رو کدوم قسمت میشه پیدا کرد؟
هرچی میگردم پیداش نمیکنم
درود بر شما خانم موسوی. وقت بخیر
این گزینه در آپدیت فیگما اسمش عوض شده. شده ignore autolayout. اگر موردی را نیافتید روی آن آیتم کلیک راست کنید. گاهی این مدلی هم می‌توان یافت. این مورد در سمت راست صفحه فیگما قرار دارد در همان سایدباری که عرض و ارتفاع و… را تنظیم میکنیم.
موفق باشید.
سلام وقتتون بخیر من ورژن وب فیگما با شما فرق میکنه
و من هرچی میگردم گزینه ی fill container رو نداره اصلا چیکار کنم؟ دکمه ی میانبری راه دیگه ای نداره؟
درود بر شما. وقت بخیر
نرم‌افزار فیگما بروز شده و محیط آن کمی تغییر کرده است. روی دایره علامت سوال پائین راست صفحه کلیک کنید می‌توانید به ورژن قبل‌تر هم اگر خواستید برگردید. مقدار Fill Container همان جایی هست که به عناصر عرض می‌دهیم. یک فلش کنار آن هست که اگر بزنیم گزینه‌هایی مثل Hug و Fixed و Fill هستند. البته گزینه Fill برای عناصر فرزند (داخل) Autolayout کارایی دارد صرفاً.
موفق باشید.
ممنون از شما و توضیحات خوبتون
درود بر شما، وقت بخیر
در خدمت هستیم.
موفق باشید.
راستی در جواب اون دوستمون که گفتن آیا کلید میانبری هست برای اینکه سریع به لایه زیرین برسه؟” با نگه داشتن ctrl و کلیک روی المان میشه تو چندین لایه Autolayot هر المانی که خواستیم رو سلکت کنیم
درود بر شما، وقت بخیر
کاملا درست می‌فرمائید.
موفق باشید.
سلام و واقعا خسته نباشید
این ویدیو عالی بود من دارم دوباره میبینمش و فک میکنم چن بار دیگه هم باید ببینم و تمرین کنم تا کامل برام جا بیفته.یه سوال وقتی کانسترینت رو میزاریم رو حالت left+right المان فاصله ش از دو جهت باید حفظ بشه در نتیجه با کم شدن عرض المان خودشم کوچیک میشه تا جایی که وقتی به نصف اندازه رسید یه خط میشه و بعد جهتش برعکس میشه. این چه کاربردی داره برامون؟ چون من تو یه ویدئو دیده بودم که یه سری از المان هارو اینطوری کانسترینت میداد ولی اگه تو ریسپانسیو همچین اتفاقی بیفته براشون که جالب نمیشه چرا همون center نمیدیم؟ امیدوارم درست تونسته باشم بگم سوالمو:)
درود بر شما. وقت بخیر
در خصوص برعکس شدن جهت، کاملا متوجهم و گاهی وقت‌ها ممکن است اعصاب خورد کن هم باشد (در سایر نرم‌افزارهای گرافیکی نیز چنین چیزی هست). البته کاربردهایی هم دارد. کمی عادت طراحی دیزاینترها متفاوت است و مثلا ممکن است برخی مسائل جزئی را استفاده نکنیم و یا کم کاربرد باشد برایمان. مقدار center در واقع باعث می‌شود صرفاً فواصل از وسط حفظ بشوند. اما برخی مقادیر دیگر مانند scale و… همانطور که شما هم فرمودید باعث تغییر سایز المان داخلی نیز می‌شوند.
کمی Autolayout در قدم اول سخت هست. من خودم دقیقا کار شما رو انجام دادم. یعنی یک ویدئو که نسبتا کامل توضیح داده بود رو یافتم و چند بار دیدمش و چندین بار هم تمرین کردم و بالاخره بهش مسلط شدم. مسیرتان کاملا صحیح است.
موفق باشید.
سلام استاد وقتتون بخیر من فیگما رو اپدیت کردم و برای من گزینه ی absolute position انگار وجود نداره ممنون میشم راهنمایی کنید
درود بر شما. وقت بخیر
نرم‌افزار فیگما تغییراتی در ظاهر و نام‌گذاری داشته. این موضوع جدیدا اسمش شده ignore auto layout که در همان منوی سایدباری سمت راست هست. برخی از گزینه‌ها را اگر دشوار بود پیدا بکنید از کلیک راست هم می‌توان آنها را یافت.
موفق باشید.
سلام و خسته نباشید مجدد استاد، اگر امکانش هست نحوه کشیدن جدول ریسپانسیو هم در فیگما توضیح بدید ممنون میشم خیلی مشکل دارم در این زمینه. تشکر فراوان.
درود بر شما. وقت بخیر
چشم. قصد دارم دوره را بازهم بروز کنم. (در جلسات پیش‌رو هم البته مواجه خواهید شد با مباحث ریسپانسیو و…)
موفق باشید.
سلام و خسته نباشید. واقعا عالی ویدیو های شما خیلی خیلی به من در یادگیری کمک میکنه واقعا جای تشکر داره که سخاوتمندانه این اطلاعات رو در اختیار همه قرار میدید. من به جرات بگم اولین باره مفهوم و نحوه Auto-Layout رو به درستی متوجه شدم. کم نمیزارید واقعا.
درود بر شما. وقت بخیر
سپاسگزارم از لطف و مهربانی شما. امیدوارم مفید واقع بشود.
موفق باشید.
سلام و عرض خسته نباشید خدمت استاد عزیز استاد بنده یه سؤال برام پیش اومد اینکه اون قسمت که توضیح دادین برای اینکه یک متنی رو بتونیم هل بدیم بین اسلاید های دیگه همه رو باهم AutoLayout کنیم اما برای من باز هم متن میوفته زیر یعنی شکه همون قبله Autolayout میشه چندباری امتحان کردم اما فایده نداشت آیا راه دیگری هم وجود داره؟
باتشکر از دوره بی نظیرتون موف باشین.
درود بر شما. وقت بخیر
به فریمی که آن را Autolayout کرده اید دقت کنید. آیا روی حالت Hug قرار دارد؟ البته اگر Hug نباشد هم لایه جدیدی که داخل آن انداخته‌اید، برای خودش جا باز می‌کند. اما اگر حالت Hug فعال باشد در عرض کل آن فریم نیز خودکار سایز داده می‌شود. یکی این نکته را در نظر بگیرید که شاید به این دلیل هست که تغییر سایز فریم اصلی ملموس نبوده و نکته دیگر هم به جهت Autolayout دقت کنید. مثلا برای حالتی که شما نام بردید حالت افقی مدنظر هست و حالت Wrap اینجا مناسب نیست (چون قصد دارید همه را کنار هم به صورت یک ردیف افقی درج کنید).
این جلسه کمی دشوار هست. اگر مایل بودید آن را دو سه بار ببینید و زیاد تمرینش کنید. خیلی به درد بخور هست این قابلیت فیگما.
موفق باشید.
سلام استاد.
من وقتی ctrl+D میزنم تا کپی بگیرم مثل عملکرد شما نمیفته جلوتر، دقیقا میفته روی خود آبجکت، چرا؟
درود بر شما. وقت بخیر
ملاک ctrl + D در فاصله‌ها، الگوی قبلی هست. یعنی فرض کنید که ما می خواهیم از A کپی بگیریم که بشود B. موقعی که کپی گرفتیم، B را در موقعیت 24 پیکسل فاصله از راست قرار می‌دهیم. بعد از آن اگر هر بار ctrl + D را بزنید با همان 24 پیکسل فاصله، مقادیر بعدی یعنی C و D و… را خواهد ساخت.
موفق باشید.
سلام ممنونم ازتون بله به لاین هم دقت گردم اما نشد متاسفانه و واقعا رهاش کردم اون قسمت رو
درود بر شما.
من خودم موقع یادگیری autolayout و variant ها و حتی تا حدودی هم اینترکشن‌های فیگما اذیت شدم. ویدئوهایی رو چند بار در یوتیوب دیدم. ولی زیاد تکرار کردم و جا افتاد برام. یکم تکرار می‌خواهد و قطعا درست خواهد شد.
موفق باشید.
سلام استاد وقتتون بخیر
ببخشید چرا قسمت آموزش Auto layout ,
fill container در قسمت افقی در فیگمای من در هرکاری میکنم انجام نمیشه .
فقط حالت عمودی اجرا شد میشه راهنماییم کنید.
چندین بار امتجان هم کردم نشد.
درود بر شما. وقت شما بخیر
ما یک line ایجاد کرده بودیم. اون رو هم دقت کنید که موقع تغییر جهت، باید تغییر بدید. یعنی line افقی در حالت autolayout عمودی بود. همچنین line عمودی هم در autolayout افقی بود.
موفق باشید.
سلام
وقتی از Auto layout در پروژه استفاده میکنیم
کار برنامه نویس وقتی بخواد طرح رو کد زنی کنه خیلی سخته
به عنوان مثال اگه یه باکسی ۴ تا Auto layout تو در تو داشته باشه برنامه نویس باید ۴ تا کلیک پشت سر هم انجام بده تا به لایه زیرین برسه
میخوام بدونم کلید میانبری هست برای اینکه سریع به لایه زیرین برسه
یا کلا از این قبیل میانبر ها برای راحتی کار برنامه نویس
درود بر شما. وقت شما بخیر
اگر autolayout هم نکنیم، برای بخش‌بندی کردن طراحی‌های خود، باید از فریم استفاده کنیم. پس بازهم باید برنامه‌نویسان دابل کلیک کنند. در واقع این مشکل با راهکار دیگری حل می‌شود. برخی از طراحان خیلی افراطی و زیاد از فریم کردن و autolayout کردن استفاده می‌کنند. مثلا گاهی یک بخش اصلی از طراحی دیده می‌شود که 5 سطح تو در تو دارد در صورتی که با 2 یا 3 سطح مشکل حل می‌شود. بنابراین اینکه طراح رابط کاربری هم چطوری از فریم و autolayout استفاده کند هم مهم است.
من خودم در خیلی از پروژه‌ها کارم پیاده‌سازی و فرانت بوده است و اتفاقا ترجیح می‌دهم طراح رابط کاربری همه چیز را مرتب و بخش‌بندی شده و autolayout شده تحویل بدهد (در جلسه هنداف در این خصوص بیشتر صحبت کرده‌ایم). چون استفاده از autolayout باعث می‌شود که برنامه‌نویسان ساختار کد flex و grid را داشته باشند که ممکن است از آن استفاده کنند. در واقع اصلا خود autolayout ساختارش مبتنی بر flex و grid که css داریم هست و این خیلی در هنداف به برنامه‌نویسان کمک می‌کند. همچنین طراحی ریسپانسیو در فیگما بدون autolayout شدنی نیست.
موفق باشید.
ممنون استاد عزیز
بسیار واضح و با جزئیات توضیح میدید.
خیلی از وقت و زمانی که به صورت رایگان در اختیار مردم میزارید سپاسگزارم.
درود و سپاس از لطف شما.
موفق باشید.
سلام جناب آقای حمد اللهی
خیلی ممنونم بابت آموزشهای خوبتون که به صورت رایگان در اختیار ما قرار میدید
درود بر شما. وقت بخیر
خوشحالم اگر کمک کننده و مفید واقع شود.
سپاس از لطف شما.
موفق باشید.
سلام و درود
واقعاً ممنون از وقتی که برای این آموزش با مثال های کاربردی گذاشتین.
فقط یک سوال وقتی Constrants عمودی یا افقی روی Mixed هست، یعنی چه؟ و چگونه وقتی تغییر دادیم، دوباره بتونیم روی Mixed بر گردونیم، چون گزینه ای بنام Mixed نداره.
باتشکر
درود بر شما آقای بمانی، وقت بخیر.
سپاس از لطف شما.
کلا مقادیر mixed زمانی دیده می‌شوند که مثلا مقدار radius برای جهات مختلف به صورت متفاوت درج شده و چون پیشفرض یک مقدار را نشان می‌دهد، مقدار mixed دیده می‌شود. مگر اینکه روی آنها کلیک کنیم و جهات مختلف رو ببینیم و تغییر بدهیم. همین موضوع در autolayout هم هست. در autolayout این موضوع زمانی رخ می‌دهد که مثلا شما دو یا بیشتر از دو آیتم مختلف (که همه آنها هم autolayout شدند) را در حالت انتخاب دارید. از آنجایی که مقادیر انتخابی ممکن است مقایر مختلفی از پدینگ و مارجین را داشته باشند، بنابراین مقدار mixed را نشان می‌دهد.
اما constraints در حالت افقی یعنی حساسیت المان به تغییر اندازه المان parent آن، در حالت راست و چپ اتفاق می افتد. فرض کنید یک فریم بزرگ آبی دارید. یک فریم کوچکتر داخل آن دارید که سبز است. اگر مقدار constrains در حالت افقی برای فریم سبز تعیین شده باشد، یعنی فریم آبی در حالت افقی تغییر سایز بدهد، فریم سبز از چپ و راست (افقی) فواصل را حفظ می‌کند. یا مثلا اگر صرفا constrains روی چپ باشد، از آن جهت فاصله را حفظ می‌کند. همین موضوع برای حالت عمودی (بالا و پائین) نیز برقرار است.
کلا کمی توصیف با متن برای autolayout و constraints دشوار است. اما اگر احساس کردید باز اون طور که باید بشود نشده، حتما ویدئو را مجدد ببینید. خودم هم موقع یادگیری این بخش ویدئوهای مختلفی را دیدم. کمی برای اولین بار ممکن است سخت باشد. اما اطمینان داشته باشید با تکرار و تمرین همه چیز درست می شود. خصوصا این موضوع در ویدئوهای بعدی دوره نیز زیاد تکرار می‌شود و خیال‌تان از یادگیری آن، آسوده باشد.
موفق باشید.
سلام
وقتی یک المان رو داخل المان والد قرار میدم
نمیتونم فاصله هاشو از بالا و پایین و کناره ها مثل شما ببینم که مثلا 70 پیکسل با اطراف فاصله داره
باید چیز خاصی فعال کنم؟
درود بر شما دوست گرامی، وقت بخیر
ما به طور کل در فیگما وقتی دکمه alt را می‌گیریم و ماوس را روی المان‌های اطراف می‌بریم، فواصل را به ما نشان می‌دهد. این را هم تست کنید باز نکته‌ای بود امر بفرمایید.