Frames, groups & sections

Frames, groups and sections are used to combine and organize layers on the canvas.

Frames

Frames are similar to artboards and can hold various child objects. During the design process, you can customize the frame's size, corner radius, fill, stroke, effects, and more, similar to drawing a regular rectangle. Frames also give you access to extra functionality such as smart layout, layout grid, constraints, and prototyping.

Moreover, Creatie incorporates the concept of div from development, allowing to nested frames within other frames. This approach better reflects constraint relation and facilitates the design of smart layout.

Create frames

Two ways to create a frame:

• Select the Frame tool from the toolbar
• Use shortcut F

You can either select a frame preset in the right sidebar or create a frame by clicking and dragging in the canvas.

You can also create a frame around layers by selecting the existing layer (shape, etc), right-click and select Frame selection in the menu options, or use the keyboard shortcuts (Mac: Option + Command + G / Windows: Ctrl + Alt + G).

Move frames

For empty frames, you can just click in the frame to select and drag to move. For frames with inside layers, click on the frame title to select and move it.

You can also reposition the selected frame by modifying the X and Y values in the properties panel in the right sidebar.

Resize frames

There are three ways to change the size of a frame:

• Click the handle in one of the corners of the frame and drag to resize
• Update the frame's width and height using the properties panel in the right sidebar
• Use the frame dropdown to select a frame preset

By clicking Resize to fit, you can automatically make the frame resize to fit the content.

When Clip content is turned on, whatever extends beyond the frame's bounds is hidden.

Delete frames

Select a frame and then you can use the Delete key to remove it. Please note that deleting a frame will also delete all layers within it.

If you want to remove the frame and retain its child layers, select Ungroup from the right-click menu to ungroup the frame, or use the keyboard shortcut (Mac：Shift + Command + G / Windows：Shift + Ctrl + G).

Group

Different from the frame, the bounds of a group are determined by its child objects.

Create groups

To create a group, you can select some layers, right-click, and select Group selection or use shortcut keys (Mac：Command + G / Windows：Ctrl + G).

Move groups

You can move layers in and out of the group by dragging them in the left-side layers panel. When layers inside the group are moved, the group's bounds will adjust to accommodate all the layers within.

Delete groups

Select a group and then you can use the Delete key to remove it. Please note that deleting a group will also delete all layers within it.

If you want to remove the group and retain its child layers, select Ungroup from the right-click menu to ungroup the frame, or use the keyboard shortcut (Mac：Shift + Command + G / Windows：Shift + Ctrl + G).

Sections

Create sections

Two ways to create a section:

• Select the Section tool in the dropdown menu from the toolbarq
• Use shortcut Q

You can add objects to a section by moving objects entirely into a section, or resize and reposition a section over objects.

Mark a section as ready for dev

This feature allows editors to mark a section as ready for dev. The marked section will have a separate display area in the Dev Mode.

To mark a section as ready for dev, select the section and click the Mark as ready for dev icon.

To unmark a section, click the Ready for Dev icon and then select Remove ready status.

Delete sections

Select a section and then you can use the Delete key to remove it. Please note that deleting a section will also delete all layers within it.

If you want to remove the section and retain its child layers, select Ungroup from the right-click menu to ungroup the frame, or use the keyboard shortcut (Mac：Shift + Command + G / Windows：Shift + Ctrl + G).

👍🏻 Helpful or 👎🏻 Not Helpful

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