آموزش کامل Auto Layout

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

اگر بخواهیم در نرم‌افزار فیگما طراحی رابط کاربری را واکنش‌گرا، منظم و اصولی طراحی کنیم، قطعا باید طراحی با 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 را می‌توانید تعیین کنید.

قابلیت Auto Layout فیگما برای طراحی واکنشگرا

اگر با html-css آشنا باشید، باید این را بگویم که ساختار Auto Layout فیگما برگرفته و شبیه به ساختار Flexbox در css است. باید تا جای ممکن، فریم‌هایی که در فیگما می‌سازید را Auto Layout کنید. حتی شما با 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 و متعلقات مربوط به این دانش مهم را توضیح دادیم. خوشحال می‌شویم تجربیات خود را با ما به اشترک بگذارید. همچنین اگر سوالی در مورد این مبحث داشتید از بخش دیدگاه‌ها، از متخصصین آژانس نوآوری رسام بپرسید.
موفق باشید 😍

5/5 - (1 امتیاز)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

سایر جلسات این دوره

متخصصین آژانس نوآوری رسام
فرم درخواست پروژه و مشاوره
تماس با کارشناسان رسام: 09351436045