logo
Resources
Table of content
Motiff AI
Interface
Layers and tools
Layer properties
Design systems
Prototypes
Develop mode
Collaboration
Import and export
File settings
Account
Teams, projects, and files
Billing
Professional plan
Organization plan
Apps
Work with support
Help Center/Interface/Introduction to Motiff editor

Introduction to Motiff editor

The Motiff editor is designed to be intuitive and user-friendly, providing a seamless design experience. It comprises four key areas: the Canvas, the Toolbar, the Left Sidebar, and the Right Sidebar. Understanding each of these areas will empower you to design effectively and efficiently.

Canvas

The Canvas is your central workspace where all the designs happens. It's where you create, arrange, and manipulate design layers.

The canvas provides a large working area, spanning from -65,000 to +65,000 on each axis.

Learn more about Work with canvas.

Toolbar

The Toolbar is located at the top of the interface and includes a display of various tools, features, and status.

'toolbar.jpeg'

Clicking https://conan-test.fbcontent.cn/atom-test/m8zxmqs7i.svg icon will open the Main menu, which contains almost all features in Motiff. When you forget how to access a feature, you can find it here.

Tools

  • Move tool: When you open a file, Motiff will set the default setting to the Move tool V .

  • Scale tool: Use the shortcut K or click '24_Toolbar_Zoom.svg' in the toolbar to switch to the Scale tool.

  • Frame: Use the shortcut F , or click https://conan-test.fbcontent.cn/atom-test/433pnmiey.svg in the toolbar to select the Frame tool.

  • Slice tool: Use the shortcut S or click https://conan-test.fbcontent.cn/atom-test/pbpg8sq6w.svg in the toolbar to select the Slice tool.

  • Shape tool: Motiff provides rectangle, line, arrow, ellipse, polygon, and star.

  • Pen tool and vector networks: Create custom shapes to build vector networks by using https://conan-test.fbcontent.cn/atom-test/dmclsv0a9.svg to draw and adjust anchor points, paths, and Bezier curves.

  • Text tool: Create text layers with the Text tool https://conan-test.fbcontent.cn/atom-test/qskxbg63t.svg .

  • Hand tool: Change the canvas view with the Hand tool https://conan-test.fbcontent.cn/atom-test/tsh9on8rd.svg .

    Tip: Hold Space to temporarily switch to the hand tool.

  • Comment tool: Add comments to the canvas with the Comment tool https://conan-test.fbcontent.cn/atom-test/n89xrjfum.svg .

Contextual tools

The contextual tools will display different content and tools based on your editing status and selection.

Create components

Components are structures that can be reused in design. They help designers to maintain consistency across different design files.

After selecting layers, you can see https://conan-test.fbcontent.cn/atom-test/60uw3m6ln.svg in contextual tools. Clicking https://conan-test.fbcontent.cn/atom-test/60uw3m6ln.svg will create a component from the selected layer. When you select multiple layers, you can click ⌄ to the right of https://conan-test.fbcontent.cn/atom-test/60uw3m6ln.svg to use features of Create component, Create multiple components, and Create component set. 'Create components.png'

When an instance is selected, you can see https://conan-test.fbcontent.cn/atom-test/1n4t7qofd.svg in contextual tools. You can click https://conan-test.fbcontent.cn/atom-test/1n4t7qofd.svg and reset all changes to the selected instance.

Use as mask

Masks can display specific areas of a layer while hiding the rest.

After selecting layers, you can see https://conan-test.fbcontent.cn/atom-test/dkf6oso8k.svg in the contextual tools. Clicking https://conan-test.fbcontent.cn/atom-test/dkf6oso8k.svg will set the selected layer as a mask.

Boolean operations and flattened selection

Boolean operations can combine selected layers into new shapes according to certain rules. Learn more about Boolean operations.

The combine feature can flatten multiple layers into one layer.

After selecting multiple layers and clicking ⌄ to the right of https://conan-test.fbcontent.cn/atom-test/q0o1l156s.svg , you can see Union selection, Subtract selection, Intersect selection, Exclude selection, and Flatten features in the dropdown menu

Tips:

  • When a vector layer is selected, you can see https://conan-test.fbcontent.cn/atom-test/9m221rcxh.svg in the contextual tools. Click https://conan-test.fbcontent.cn/atom-test/9m221rcxh.svg to enter the vector editing state for that layer.
  • When an image is selected, you can see https://conan-test.fbcontent.cn/atom-test/rlmpfncqc.svg in the contextual tools. Click https://conan-test.fbcontent.cn/atom-test/rlmpfncqc.svg to enter the crop state for that image.

Multiplayer and follow mode

Files in Motiff support multiple users editing or viewing at the same time. The avatars of users currently accessing the file will be displayed on the right side of the toolbar. This allows you to see other users who are accessing the file at the same time.

You can click on other users' avatars to enter follow mode and view their actions in real-time, which is very suitable for presentations and design reviews.

Learn more about Multiplayer and observation mode.

Share settings

Click Share button to open the file's share settings. You can manage who has the right to view and edit the file.

Learn more about Share a file.

Zoom/view options

The far right of the toolbar will display the current canvas zoom ratio. Click Zoom button to expand the Zoom/view options. You can adjust the zoom ratio and view options through this menu. 'Zoom options.png'

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'

You can 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 + \

Tips: 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. 1.Hover the cursor over the right edge of the sidebar, where a double arrow will appear.
  2. 2.Drag to adjust the panel width.
  3. 3.Release to complete the sidebar width setting.

Layers Panel

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.

Tip: 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.

Learn more about Manage pages and layers.

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.

If you need to access libraries from the Assets panel, you can open the Libraries modal by clicking 'Vector (1).svg' .

In the right sidebar, the design panel allows you to view or adjust the properties of any layer, and the prototype panel allows you to view prototype flow, create interactions, and set interaction properties.

Tip: What you have access to in the right sidebar depends on your permissions in the file and your seat type.

Design panel

In the Design panel, you can view, add, remove, or change the properties of layers.

When nothing is selected on the canvas, you can view the local styles of the current file in the Design panel and edit the canvas background. 'Right sidebar 1.png'

After selecting a layer, the design panel will include more settings. The type of layer selected will determine which specific settings are displayed in the design panel. 'Right sidebar 2.png'

In the design panel, inactive properties are displayed in gray, while active properties are displayed in black.

Prototype panel

The second option in the right sidebar is the prototype panel, where you can view prototype flow, create interactions, and set interaction properties. Learn more about prototyping features in Motiff.