AutoLayout

AutoLayout dynamically lays out layers in frames and updates the layout when the dimensions of child layers change. It behaves similar to Framer Stacks and the Anima Toolkit for Sketch.

Creating a simple list

1. Wrap the list elements in a frame

2. Open the Auto Layout plugin, select the frame and enable the toggle ‘Layout frame’

3. Change the direction to vertical and adjust spacing

How to create an auto-reflowing To Do list

1. Create a text layer and a rectangle as checkbox next to it for the first todo item.

2. Wrap both elements in a frame ( ⌘ + ⌥ + G )

3. Open AutoLayout and enable it for the frame. Set direction to horizontal and adjust padding/alignment to your liking. You can change the order by moving layers up and down in the layers sidebar.

4. With the frame selected, set Height to ‘Resize To Fit’ in AutoLayout which will automatically resize the frame when the text field gets longer

5. Duplicate the frame a few times below to create a list of todos

6. Wrap all todo items in a frame and enable AutoLayout, set the direction to vertical. You can adjust spacing between the items.

7. Try adding a linebreak in one of the todo items to make it larger. The items below will automatically move down to make room.

The layout of the frame will update every second if either a child layer or the frame itself is selected. To update the layour, select a child layer or the frame while the plugin is open.

AutoLayout is based on the Yoga implementation of Flexbox. Inspired by prior work from Scott Horsfall @scoh and Zachary Schiller @zacharyschiller