Use code snippets in Dev Mode

Motiff supports converting design content into CSS, iOS, and Android code. In Dev Mode, when you select a layer in the canvas area, the corresponding code of that layer will be displayed in the right sidebar.

Code settings

Click on the blank area of the canvas to access the Code Settings in the right sidebar.

Change language and unit preferences

Click on the blank area of the canvas to change the Language and Unit preferences in the right sidebar.

1. 1.Set Language preferences: Click to select an option.
   • CSS: Web
   • iOS: UIKit or SwiftUI
   • Android: XML or Compose
2. 2.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.

View code

In Dev Mode, you can see the code snippets when you select a layer on the canvas in the right sidebar. The Code section will display relevant information depending on the type of layer and language selected.

Copy code snippets

You can copy a code snippet and transfer it to a text editor.

1. 1.Select the layer you want to generate code for.
2. 2.Find the code snippet you want to copy under the Code section of the right sidebar.
3. 3.Hover over the code snippet and click Copy in the top right corner.