1. Switch to the Select tool in the tool panel

TIP: Just hold “V” key, to select the Select Tool.

2. Make sure you're switched in the Code panel

3. Set code language you want to export

Click the cog wheel icon in the code panel (on the right) and select your preferred language.

You can select from:

  • CSS,
  • Sass,
  • Stylus,
  • Less,
  • SCSS,
  • CSS in JS,
  • Swift,
  • Android,
  • React Native

Note: When you create a new project and you set the Platform

  • as Web, the default code output will be pre-set as CSS
  • as iOS, the default code output will be pre-set as Swift
  • as Android, the default code output will be pre-set as Android

You can always change the code output no matter the project platform later - as described above.

Tip: If you're a fan of React Native, have a look at our open source Nachos UI kit with 30+ pre-coded components.

3. Customize the code output

Go into the code template settings to hide and/or reorder code parts.
You can use variables or replace rules to customize the output even more.

4. Export code from layers

Now, that you've set everything the way you want it you can start getting the code.

Make sure you're using the Select tool.

Click on any layer and the generated code snippet will immediately appear in the Code Panel on the right.

Copy the entire code snippet to your clipboard by clicking on the “Copy all” button. 

You can also copy only a few lines by dragging your mouse over the line numbers.

If you want just a specific code line or a specific code value select it with your mouse.

In all cases, the selected text will be automatically copied to your clipboard, so you can paste it into your code editor right away.  

Switch between Code panel and Styles panel

You can also switch the Code panel to Styles panel, which shows you the list of styles and you can easily copy only the values instead of the whole lines with attributes and values. Easily click on the value to copy it into your clipboard. If it is a color, you can either click it to copy its color code or hover over it and create a variable from it.

TIP:
Use the “L” shortcut to switch between the Code and Styles panel.

 
 
Learn more:

Did this answer your question?