Skip to main content

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 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.

Learn more about flags here