Layout Management
In this document, we'll have few notes about concepts of a Layout, and short principles of how to manage them.
Always use Frame
Group is not a Layout (in most times)
We oftem misunderstand that group is a representation of a layout. But this is wrong. Technically, under the hood, A group is a Abstract concepts that locks its children to move and position in a grouped way.
To be more clear, here is an example.
- SceneRoot
- Group
- Item 1 - Aligns to Left
- Item 2 - Aligns to Right
- Item 3 - Aligns to Top
- Group
Group does not have a alignment property (not even in your design tool). It only shows the alignment if all its children have the same alignment. So what really happens when you align a Group, let's say to the left, is that all its children are aligned to the left, relative to Root, not Group.
This is why we should always use Frame instead of group, otherwise, your layout will break both in your design tool and in your production.
Also under the same reason, you should avoid using Masks. Yet, we do support them, but the results may differ as your expectations.
Frame is a Layout
Advanced Layout composition
- Column
- Row
- Flex
- Stack
- Positioned
- Aligned
- Complex Cases
Autolayout and Concept of Flex
Learn more about this in the next document
Stack and Alignment
Complex Cases
Above, you have all the support for representing layouts with built-in Figma features, Yet, you might encounter some cases that simply can't-be-done only using Figma.
Enter: Flags.