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>