OK, now that we have a design inside Avocode, lets open it and inspect it.
All your projects will display here. Double clicking the project reveals designs inside of it. Double click again and the design will open up in a new tab. Once it appears, you can click the plus button to add more documents if needed.
To the left is a layers panel, you can show, hide or select layers from here. Each layer is have an icon representing its type - bitmap, vector text… and we even support smart objects. For example double clicking this smart object will expand that into a separate document.
On the bottom left we have the tools panel - the selection tool, measure tool, color picker and hand tool.
Selecting an element with the selection tool reveals the CSS code on the right side, the ability to export it as an image, and the option to add as variable accordingly.
See our next video to learn more about exporting techniques in Avocode.