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/Develop mode/Get started with Develop Mode

Get started with Develop Mode

Develop Mode in Motiff connects designers and developers by offering detailed design views, code previews, and streamlined asset exports. With features like annotations, unit scaling, and export presets, it ensures accuracy and efficiency throughout the handoff process.

To start using Develop Mode, you can easily switch between Design Mode and Develop Mode in any Motiff file:

  1. 1.Open the Motiff file.
  2. 2.Toggle the Develop Mode switch on the right sidebar or use the shortcut ⇧ Shift +D.

Notes:

  • The copied links of files, pages, and layers will be marked in Develop mode.
  • You will automatically enter Develop Mode when you open a Motiff design file with a Develop Mode link.

Toolbar

In Develop Mode, you can view and check any file version by clicking 'Vector.svg' - File - Show version history in the upper left corner of the toolbar. 'Toolbar.png'

The left sidebar allows users to quickly view layers, including the page list and layer list, as well as using the Search feature.

Learn more about Select layers in Develop Mode.

Advanced inspect

The layer properties that can be viewed in the right sidebar include:

  1. 1.Basic button: View layer names and types and see when the layer was last updated.
  2. 2.Component: Main component, variants, and other components.
  3. 3.Box model.
  4. 4.Code or Properties.
  5. 5.Selection colors.
  6. 6.Export. 'View annotations.png'

Tip: The annotations in the right sidebar can be clicked or selected to copy.

Code settings

Click on the blank area of the canvas to toggle the Language, Unit, and Scale. 'Code settings.png'

Change language and unit preferences

  1. 1.Click on the blank area of the canvas.
  2. 2.Set Language preferences: Click to select an option.
    • CSS: Web
    • iOS: UI Kit or SwiftUI
    • Android: XML or Compose
  3. 3.Set Unit preferences: Click to select a Unit. The available units depend on the language selection.

Set unit scale

Unit scaling allows you to set unit dimensions relative to a specified size, such as the width, height, and coordinates of the design. For example, you can set all annotations to be displayed at a unit scale of 2x, or adjust the root font size for CSS rems.

  1. 1.Click on the blank area of the canvas.
  2. 2.In the right sidebar, click to set Unit and Scale.

Export

You can export the selected layers as images at the bottom of the right sidebar.

You can also click on '路径.svg' to open the Export panel to view and export everything within the selection.

You can apply export settings to layers to define the format and any other export settings. Motiff supports the following export formats: PNG, JPG, SVG, and PDF.

Learn more about Export. 'Export.png'