Left sidebar

In the left sidebar, you can view layers and pages within the file. You can also view local components through the Assets panel, as well as access main components from other libraries.

You can switch between the Layers panel and the Assets panel by clicking on the Layers and Assets in the left sidebar. You can also use keyboard shortcuts:

macOS
- Layers panel and Pages list: ⌥ Option + 1
- Assets panel: ⌥ Option + 2
Windows
- Layers panel and Pages list: Alt + 1
- Assets panel: Alt + 2

'left sidebar 1.png'

Use keyboard shortcuts to toggle the visibility of the sidebar:

macOS: ⌘ Command + ⇧ Shift + \
Windows: Ctrl + Shift + \

If you need to view your design effects in the canvas area without obstruction, you can also toggle the visibility of the UI interface by using the following shortcuts:

macOS: ⌘ Command + \
Windows: Ctrl + \

Tip: To view the contents of Layers or Assets panel more conveniently, you can manually adjust the width of the sidebar with the following steps:

1.Hover the cursor over the right edge of the sidebar, where a double arrow will appear.
2.Drag to adjust the panel width.
3.Release to complete the sidebar width setting.

View layers

Any layer added to the canvas will be displayed in the layers panel. You can determine if a layer is a frame, group, or other types by the icon near the layer:

Frame

Group
Main component
Instance
Text
Shape (Different icons for different shapes)
Image
Auto layout (Different icons for different property settings)

In Motiff, you can nest any child layers within their parent layer or frame. This allows you to collapse and expand layers within groups or frames.

Newly created layers are added to the top of the Layers list, the top of the group or frame it is contained within, or right above the currently selected layer.

If a layer is inside another layer, the other layer will always be the parent layer. You can perform the following actions:

Select layers
Adjust the Z-axis order of layers
Rename layers individually or in bulk
Hide or show layers
Lock or unlock layers

View components in the Assets panel

Components are contents in the design that you can reuse. Buttons, icons, or more complex UI elements like navigation menus, status bars, etc., can all be created as components.

In the Assets panel, you can find all main components in the file. If you need to use a main component, you can select and drag it from the Assets panel into the canvas to create an instance.

You can open the Assets panel by clicking on the Assets in the left sidebar or by using the shortcut ⌥ Option + 2 / Alt + 2.

After opening the Assets panel, you can:

1.Use the search function to find a main component. Motiff will search for main components from the current file and accessible libraries.
2.Switch between and .
3.Open the Libraries modal.
4.View local components created in the current file.
5.View the components used in this file.
6.View any enabled libraries.

'assets panel.png'

Note: Motiff groups components in the Assets panel by title. If you have many components, Motiff will display them in the path of File > Page > Frame:

Click the arrow to expand and view the file, page, or frame.
Collapse each title to create more space in the Assets panel.
Motiff lists the enabled libraries in the Assets panel.
You can create Instances by dragging components from the Assets panel to the canvas.

Libraries

This feature allows you to publish styles and components from your file as a library, which you can then use across files for styles and components.

If you need to access libraries from the Assets panel, you can open the Libraries modal by clicking .

Pages

Within a file, you can create any number of pages as needed. Each page has its own canvas, where you can explore and update your designs.