Frames and groups

Both frames and groups can be used to contain other layers in Motiff, but each offers unique properties and use cases. This article will introduce the differences between frames and groups to increase your design flexibility.

When creating designs based on a specific device or screen size, you can use a frame to define an interface area. Motiff’s frames offer more comprehensive functionality than the artboards of traditional design tools. Aside from containing design content akin to an artboard, frames also allow the addition of auto layout, nested frames, and constraints for child layers within a frame. These properties can help you create more complex designs. Moreover, you can also add basic properties to a frame, such as rounded corners, fill, stroke, and other effects.

Similar to groups in other design tools, groups in Motiff allow you to combine multiple layers together. The properties of a group are composed of its child layers and do not have any individual properties. When you adjust the size of a child layer or move a child layer, the boundaries of the group will change accordingly.

In summary, a frame has its unique properties and remains unaffected by the properties of its child layers; while the properties of a group are determined by its child layers. The following article will further delve into the functionalities of parent-child relationships, frames, and groups.

Parent/child/sibling relationships

Motiff adopts terminology like parent, child, and sibling to characterize the hierarchical connections between layers. Borrowed from programming contexts, these labels are often applied to structural relationships. This section clarifies the precise definitions and practical applications of such relationships across different layer-based scenarios.

In Motiff, parent layers, child layers, and sibling layers are defined as follows:

• Parent layer: This refers to a layer that contains other layers within it. Examples of parent layers include components, frames, and groups.
• Child layer: A layer that resides within a parent layer is known as a child layer.
• Sibling layer: Layers that exist within the same parent layer share a sibling relationship and are referred to as sibling layers.

Frame

After introducing the parent/child/sibling relationships between layers, this section will focus on the creation, properties, resizing, and moving operations of frames.

Create a frame

You can use tool to create frame layers on the canvas. Motiff supports the following methods:

• Use the shortcuts F / A .
• Select from the toolbar.

Additionally, you can create frames of various sizes on the canvas:

• Click on the canvas area to create a default frame of size 100 x 100.
• Click and drag the cursor on the canvas to customize the size of the frame.
• Select a preset size from the right sidebar.

Frame properties

Frame layers have the following properties:

• Rounded corners: Create softer edges for a frame.

• Clip content: After turning on the clip content switch, any layer content that exceeds the frame boundaries will be hidden.

• Auto layout: Create containers that dynamically respond to content changes.

• Fill: Apply solid color, gradient, and image (PNG, JPEG) fill types to a frame.

• Stroke: Support adding a stroke to a frame to create a border or outline.

• Effects: Support adding shadows or blurs to a frame.

Special capabilities built on frames

Frames in Motiff contain some special capabilities that are not available to other layer types:

• Constraints: Define how child layers respond when resizing the frame. You can apply constraints to child layers within a frame.
• Auto layout: Add auto layout to a frame to create dynamic layouts that respond to its content changes.

Resize the frame

You can resize or scale the frame just like other layers on the canvas.

Drag to resize

Drag the boundary box of the frame with the mouse to manually adjust its size:

1. 1.Select the target frame on the canvas or from the Layers panel on the left sidebar.
2. 2.Click on the handle aligned with the direction of the frame's rounded corners or any side to adjust the size.

Change default sizes

Select a default template to change the current frame's size:

1. 1.Select the frame layer.
2. 2.Select next to Frame in the Design panel on the right sidebar.
3. 3.Choose a default template from the list.
4. 4.Motiff will update the frame size.

Design panel adjustment

You can adjust the width and height of the frame in real-time using the Design panel in the right sidebar.

Motiff currently supports entering numbers in the input box areas corresponding to W and H . You can hover the mouse over the corresponding icons and drag to adjust parameters. Drag left to decrease the value, and drag right to increase it.

Toggle the link buttons on the right side of the width and height input boxes to adjust whether Constrain proportions is turned on or off.

Resize to fit

Resize to fit allows the frame to automatically resize its content.

• Use shortcuts:
  • macOS: ⌥ Option + ⇧ Shift + ⌘ Command + R
  • Windows: Alt + Shift + Ctrl + R
• Click Resize to fit in the top right corner of the Design panel.

Frame and parent-child relationships

Nesting

In Motiff, it is possible to place layers inside frames, groups, and others, a process referred to as Nesting. Nesting allows for the integration of various layers to design complex interfaces. When frame layers are nested, they establish additional hierarchies and introduce new concepts.

• Top-level frame: The main or outermost frame in your design. / Act as the primary frame for all content and elements.

  • Motiff displays the name of the top-level frame in bold in the Layers panel.
  • Frame layers nested within other frames or groups are not considered top-level frames.

• Nested frame: A frame contained within another layer.

  • You can place a frame inside a top-level frame, inside other nested frames, or even inside a group.
  • A nested frame can be both a parent and a child layer.

  Tip: Although the above terms are not directly mentioned in Motiff, they are crucial to a proper understanding of the properties of parent-child layers, nested layers, and their effects on each other.

Move layers in and out of parent-child relationships

When you move a layer to a new position, Motiff may reassign its parent layer. For frame layers, reassignment occurs when you move the layer into a frame, remove it from its current parent frame, and place it in another frame.

In Motiff, when you move a layer into a non-top-level frame, follow this default logic:

• If the moved-in layer is smaller than the frame, it will become a child layer of the frame.
• If the moved-in layer is larger than the frame, it will not become a child layer of the frame.

Add parent-child relationships to new layers

When adding a new layer within a frame, as long as the cursor's starting point is inside the frame, the newly added layer will become a child layer of that frame regardless of its size.

Maintain parent-child relationships between layers

If you want to maintain the original parent-child relationship while moving a layer, you can hold the following shortcut keys:

• When moving a layer in, press the Space to avoid reassigning the parent-child relationship.
• When moving a layer out of the frame's bounding box, press the Space to maintain the original parent-child relationship.

Delete a frame

After selecting a frame, you can directly delete it using the delete key. Note that directly deleting a frame will also delete all of its child layers.

If you want to delete a frame while keeping all of its child layers, you can select Ungroup selection from the right-click menu or use the shortcut keys:

• macOS: ⇧ Shift + ⌘ Command + G
• Windows: Shift + Ctrl + G

Group

Create a group

To create a group, you can select some layers and then choose Group selection from the right-click menu or use the shortcut keys:

• macOS: ⌘ Command + G
• Windows: Ctrl + G

Select a group

The first time you click on a layer within the group, the entire group will be selected. To select an individual child layer within the group, you need to double-click or directly select the target child layer from the Layers panel.

Ungroup

When you want to ungroup, select the group and right-click the menu to choose the Ungroup selection option, or use shortcuts:

• macOS: ⇧ Shift + ⌘ Command + G
• Windows: Shift + Ctrl + G

Other properties of groups

The properties of a group consist of a combination of its child layers and don’t have any properties themselves.

• When the layers within a group are adjusted, the boundaries of the group will also change accordingly.
• You can drag layers in the Layers panel to move a layer in/out of a group.
• You can also nest a group within other groups.