Code mode

At code mode you can inspect your designs to get specifications such as object properties, measurements and distances. You can also get code snippets for styles (currently CSS only but more coming) and SVG markup.

Inspect designs

You can activate Code mode from the View mode. Click the code button at the middle of the navbar. Then you will see two sidebars:

  • At the left sidebar you can see the layers tree. Select a layer to inspect it.
  • At the right sidebar: you can switch between Info and Code tabs to get design specifications or code.

codemode

Distances and measurements

You can easily get measurements and distances between an object and other objects and artboard edges.

To get distances:

  • Click on an object or select it at the layers panel.
  • Hover other objects to see the distances between them and the selected one.
  • Hover a free space at the artboard or the area around it to get the distance from the object to the artboard edges.

codemode

Info panel

At the info panel you can see specifications about style and content of an object. Different types of objects can have different sets of properties.

codemode

Copy properties

You can copy property values individually or full sections of them pressing the copy buttons that are shown at the right when hovering. For example you could copy all the layout properties or only the width.

codemode

Code panel

Press the code tab to get actual code snippets. Select an object to get ready to use code for styles (currently CSS only but more coming) and SVG markup.

codemode

Export

Export option is available at the bottom of the Info panel. Export presets set at the workspace will be available at the Code mode. New export presets can be added ath the Code mode but will not persist (won’t be found at the workspace).