logo
Resources
Table of content
Motiff AI
Interface
Layers and tools
Layer properties
Design systems
Prototypes
Dev Mode
Collaboration
Import and export
File settings
Account
File management
Team management
Sharing and permissions
Billing
Organization
Apps
Work with support
Help Center/Interface/Toolbar

Toolbar

The top toolbar includes a display of various tools, features, and status:

  • Main menu
  • Tools
  • Contextual tools
  • Multiplayers
  • Share settings
  • Zoom/view options

'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 and scale tools

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

When using the Move tool, you can select layers in the Layer panel and reorder the layer. You can also select or move layers on the canvas.

You can use the shortcut K or click '24_Toolbar_Zoom.svg' in the toolbar to switch to the Zoom tool.

Using the Zoom tool, you can scale layers proportionally. Learn more about Scale tool.

Frame and slice tools

'Frame.png'

Frame is an important and basic function in Motiff. Learn more about Frame.

You can use the shortcut F , or click https://conan-test.fbcontent.cn/atom-test/433pnmiey.svg in the toolbar to select the Frame tool. Then, click and drag in the canvas to create a new frame of any size or to select a preset frame size in the right sidebar.

You can also use the shortcut S or click https://conan-test.fbcontent.cn/atom-test/pbpg8sq6w.svg in the toolbar to select the Slice tool.

Shape tools

In addition to using the Pen tool to draw shapes, you can use the preset shapes in Motiff directly. Learn more about Shape tool.

Click ⌄ to the right of https://conan-test.fbcontent.cn/atom-test/nf6zdwgcz.svg to see the following preset shapes in the dropdown menu:

  • Rectangle R
  • Line L
  • Arrow Shift + L
  • Ellipse O
  • Polygon
  • Star
  • Image ⇧ Shift + ⌘ Command + K / Shift + Ctrl + K

'Shape tools.png'

Pen tool

You can 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.

Learn more about Pen tool and vector networks.

Text tool

You can create text layers with the Text tool https://conan-test.fbcontent.cn/atom-test/qskxbg63t.svg :

  • Click on the canvas to create a text layer that resizes with the text content.
  • Click and drag on the canvas to create a fixed-size text layer.

Learn more about Text tool.

Hand tool

You can change the canvas view with the Hand tool https://conan-test.fbcontent.cn/atom-test/tsh9on8rd.svg . When dragging the canvas with this tool, you will not accidentally trigger the hover state of the layer, make selections, or move the layers.

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

Comment tool

You can add comments to the canvas with the Comment tool https://conan-test.fbcontent.cn/atom-test/n89xrjfum.svg . Comments are accessible to anyone with view or edit permissions to the file.

Learn more about Comment tool.

Plugins

Click ⌄ to the right of https://conan-test.fbcontent.cn/atom-test/0jw5xo9ar.svg to see the available plugins in the dropdown menu. 'Plugins.png'

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'

Reset instance

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.

Edit

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.

Crop image

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.

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'