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:
- Styled Components
- CSS in JS,
- 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.
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.