Smart layout

Smart layout is a feature that facilitates flexible object arrangement. It enables the content (child objects) to adapt to the size of the container (the parent frame), and vice versa. The object layout also automatically adjusts when you change the layout direction or gap values.

With smart layout, we hope to enable easy implementation of responsive design in Creatie.

Add smart layout

You can add smart layout to a selected frame or a selection of layers in following ways:

Click the + in the smart layout section in the right sidebar

Use the keyboard shortcut Shift + A
Right-click on the selection and click Add smart layout in the menu

Direction and spacing

Direction

You can adjust the direction of smart layout to align horizontally, vertically, or wrap to the next line.

Horizontal: Add, remove, and reorder elements horizontally

Vertical: Add, remove, and reorder elements vertically

Wrap: Arrange elements in a frame. Elements will flow horizontally on the x-axis and wrap to the next line.

Gap

You can adjust the space between objects using smart layout on the canvas or in the right sidebar.

Select a smart layout frame and hover over the gap area, drag the handle to adjust the gap value

Select a smart layout frame and hover over the gap area, click and type a gap value in the input field
Specify gap values in the smart layout section in the right sidebar

Padding

You can adjust the space between the boundary of a parent frame and its child objects using smart layout on canvas or in the right sidebar.

Select a smart layout frame, hover over the padding area, and drag the handle to adjust the padding

To adjust the padding on opposite sides simultaneously:
- Mac: Option
- Windows: Alt
To adjust uniform padding on all sides:
- Mac: Shift + Option
- Windows: Shift + Alt
Select a smart layout frame, hover over the padding area, click, and type the desired padding value in the input field

Adjust padding values in the smart layout section in the right sidebar

Tips:

Click the Individual padding icon in the right sidebar, you can set padding values for each side.
Hold Command for Mac / Control for Windows and click into any input box. A single padding input field will appear, allowing setting uniform padding on all sides.

Resizing

One of smart layout's key features is its intelligent resizing capability. It enables child objects to adjust to the size of the parent container by filling it, or it can resize the parent frame to accommodate changing dimensions of child objects by hugging them.

There are three adjustment options:

Fixed width or height: When a smart layout frame is set to fixed width or height, the values of the frame's dimensions remains unchanged. The size of the frame doesn't respond to changes in its child objects.
Hug child objects: Set a smart layout frame to Hug to resize itself according to its child objects. The frame will keep the smallest possible dimensions to surround all its child objects, while respecting the padding and gap values.
Fill parent frame: Layers in a smart layout frame set to Fill stretch to the width and/or height of their parent frame.

Helpful tips for using smart layout

Distribution

When distribution is enabled, spacing becomes automatic, and objects within the frame will be evenly spaced according to the parent frame size.

Absolute position

Positions of objects within a smart layout frame cannot be controlled at will. However, in certain scenarios where we need objects within the frame to move to specific positions, absolute position can help.

To enable absolute position, select a child object of a smart layout frame, and click the Absolute position button in the right sidebar.

Take the little red dot in the image below as an example. When the red dot is selected, click the Absolute position button in the properties panel, now the red dot can be moved freely, and we can move it to the upper right corner of the icon.

In the layer panel, absolute position layers will be marked with a special identifier, and four corner markers will be displayed around their icons. This identifier makes it easy to quickly identify objects with absolute position.

Stacking order

Multiple layers with negative gap create a stack.

You can change the visual order of the stack in the smart layout settings. You can choose to have either the first element or the last one on top.

Click ··· to open advanced smart layout settings and choose the stacking direction. This setting changes the visual order of the stack as seen on the canvas.

First on top: the first layer in the stack will be on top
Last on top: the last layer in the stack will be on top

Minimum and Maximum Dimensions

You can set minimum or maximum width and height to any smart layout frame and its children.

Open the width dropdown list to find Add min width and Add max width, click to set the corresponding values
Open the height dropdown list to find Add min height and Add max height, click to set the corresponding values

To preview minimum and maximum size:

If the selected object has a minimum or maximum setting, you can hover over the icons to preview the dimension limits on the canvas.
When the width or height of the selected layer reaches the minimum or maximum limits, dragging to resize the layer will be restricted, and guides will appear to indicate the limit.

To remove minimum and maximum settings:

Open the width or height dropdown, and select Remove max and min
Or, click on the minimum or maximum values to delete them individually

Examples Using Smart Layout

Smart layout buttons will automatically resize as you edit the text. Also, if you place a bunch of buttons next to each other, they’ll all move around as you’d expect.

Smart layout is really useful when creating designs with repeating UI elements, like lists and menus.

By nesting smart layout frames, you can combine these individually smart layout layers into a complex interface, in much the same way that div tags can be nested in HTML. In a production environment, you can easily edit content and move it in and out of smart layout frames.

With smart layout, we hope to apply code-like structures to design interfaces in Creatie. Try it out now!

👍🏻 Helpful or 👎🏻 Not Helpful

👉🏻 Was this article helpful to you? We look forward to your feedback.
👍🏻 Helpful
👎🏻 Not Helpful