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/Dev Mode/Guide to Dev Mode

Guide to Dev Mode

Dev Mode supports features such as viewing files, exporting slices, and converting design content into code. Designers and developers can stay in sync, ensuring that important details are not lost during collaboration. In Dev mode, you can:

  • View design content with richer annotation features.
  • View the corresponding CSS, iOS, and Android code for all layers.
  • Set the units and scales of the values in properties and code as needed.
  • Use export presets to to download assets with different scales all at once.

Enter Dev Mode

Dev Mode provides a set of independent operation interfaces for developers. To toggle between Design Mode and Dev Mode in any Motiff file, you can:

  1. 1.Open the Motiff file.
  2. 2.Toggle the Dev Mode switch '16_Common_DevMode.svg' on the right sidebar or use shortcuts ⇧ Shift + D .'Enter Dev Mode.png'

Notes:

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

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

Learn more about Select layers in Dev Mode.

Toolbar

In Dev Mode, you can view and check any file version by clicking '16_Panel_TextAlignJustified.svg' - File - Show version history in the upper left corner of the toolbar.

'toolbar.png'

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.Export.

'right sidebar.png'

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

Units and scales

Click on the blank area of the canvas to toggle the Language, Unit, and Scale.

'Unit and scales.png'

Export

You can export the selected layers as images at the bottom of the right sidebar. You can also click '16_Panel_BatchExport (1).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'