Code Export

With Sketch, it is possible to export some of your design as code. CSS, and SVG. Ideal for web designers.

CSS Attributes

If you select any number of elements in the Canvas, Control-click and choose Copy CSS Attributes from the shortcut menu. This will copy code straight to your clipboard containing the style information a layer may have, such as fills (including gradients), borders, shadows, corner radii, and full text styles. Below is the output of a simple shape.

1
2
3
/* Rectangle: */
background: #6DD400;
border-radius: 5px;

SVG Code

Similarly, SVG code export works the same way. Control-click a layer, and choose Copy SVG Code from the shortcut menu. This will copy the output for the entire layer, and is a huge timesaver as opposed to exporting as SVG first, and opening the file in a text editor.

1
2
3
4
5
6
<svg width="128px" height="128px" viewBox="322 214 128 128" version="1.1"; xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch - http://www.sketchapp.com -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <rect id="Rectangle" stroke="none" fill="#6DD400" fill-rule="evenodd" x="322" y="214" width="128" height="128" rx="5"></rect>
</svg>
Last modified on Oct 02, 2018

Was this article useful?

Yes
No

We’re really sorry about that.
Please let us know what you were looking for:

If you need more help or you’d like to report a bug with this content, please contact support.

Thanks for your feedback.
An error occurred, please try again later.

Start working faster today

Available exclusively on the Mac for just $99.