Update old auto layout frames

In previous versions of auto layout, alignment was controlled at the child object level. This meant you could have different alignments for different child objects in an auto layout frame.

We found the behavior uncommon among users, so in November 2020 we moved alignment controls to the parent frame to simplify how auto layout works. With the latest update, all child objects have to be aligned the same way.

If you already have auto layout frames with children of different alignments that were created before November 2020, you may see a warning in the auto layout modal.

Update

In order to make adjustments to your auto layout values, you first need to update the frame in order to remove the individual child alignment. After updating your frame:

• Figma will try to maintain your original design visually. In many cases, Figma will add intermediate frames to allow for differing alignments. These frames will be named Auto-added frame.
• You can immediately undo this change, however, if you click away from the window or refresh the page, you will not be able to undo the update in the future.
• If you’ve updated a main component, confirm its instances updated correctly.

To create a design with child items with different alignment:

1. Select the item you want to align differently.
2. Add Auto layout to the item using the keyboard shortcut Shift A.
3. Set the newly created frame to Fill container in the axis you want the alignment to be in.
4. Set the alignment as needed.