Auto Layout

Auto Layout একটা সাধারণ Frame-কে এমন একটাতে পরিণত করে যা নিজের child-গুলো নিজে সাজায় — স্বয়ংক্রিয়ভাবে spacing দেয়, content-এর সাথে মানিয়ে বড়-ছোট হয়, আর ভেতরে যেকোনো কিছু বদলালেই সাথে সাথে সবকিছু reflow করে। কোনো code না লিখেই এটা Figma-র সবচেয়ে কাছাকাছি জিনিস আসল CSS flexbox লেখার।

একটা বা একাধিক layer select করুন আর Shift+A চাপুন, অথবা Design panel-এ Auto Layout icon-এ ক্লিক করুন। Figma selection-কে একটা নতুন Frame-এ wrap করে যেখানে Auto Layout আগে থেকেই সক্রিয়, default-এ child-গুলোকে একটা row-এ সাজিয়ে।

Auto Layout আসার আগে, একটা row-এ চতুর্থ button যোগ করা মানে তার পরের প্রতিটা element হাতে recalculate আর সরানো। Auto Layout দিয়ে, একটা নতুন child বসানো — বা একটা মুছে ফেলা — spacing আর frame size দুটোতেই সাথে সাথে বাকি সবকিছু reflow করে। এই কারণেই একটা design একজন developer-এর আসল flexbox/grid code কেমন দেখাবে তা নির্ভুলভাবে predict করতে পারে, যা এই কোর্সের শেষ lesson-এ কভার করা design-to-code handoff-কে ছোট করে দেয়।

একটা Auto Layout frame অন্য একটা Auto Layout frame-এর ভেতরে বসতে পারে — একটা card-এর (vertical Auto Layout) ভেতরে button-এর একটা row (horizontal Auto Layout), যা একটা page-এর (vertical Auto Layout) ভেতরে। আসল interface প্রায় সবসময়ই কয়েক স্তরের nested Auto Layout, এই কারণেই এটাকে একটা advanced feature হিসেবে না দেখে শুরুতেই অভ্যাস করে নেওয়া উচিত।