Smooth design to code workflow

Open PSD & Sketch designs on Mac, Windows, and Linux with Avocode. Generate CSS, Swift & XML straight from layers and export images, colors, fonts, styles, sizes and measurements.

Try Avocode for free
Format support

Open .psd & .sketch without Photoshop & Sketch

Avocode renders Photoshop and Sketch designs on its own. Therefore, you can open and inspect all designs you upload to Avocode on any OS system without other design tools.

Supported formats: PhotoshopSketch

Code generation

Export CSS, Swift, Android & React Native code from a design

Generate concise CSS, Less, Sass, Less, SCSS, Stylus, Swift, Android, & CSS in JS code including layer and font styles, units in px, pt, and dp and colors in HEX, UIcolor or HEX8.

supported platforms: webiOSAndroid

Image export

Export images up to @4x or xxxhdpi resolution

Selects a layer, multiple layers or a slice of the design and export it as an image. Add more variants for various resolutions. You can even upscale and export vector shapes to fit any desktop, iOS or Android screen.

Supported formats: svgpngjpegWebP

Color export

Handpicked #BADA55 colors

Manually copying colors and converting them... that is so yesterday. Just pick a color and the color code will be immediately added in your clipboard, so you can paste it where you need it.

Supported formats: hexhex8rgbahslauicolor

Text export

Export text layers as plain text, images or html code

When you select a text layer, you can export it as an image, copy plain text or copy text with html tags. The STYLES panel will show you everything like font-family, font-weight, and font-size.

Sizes & Distances

Precise measurements, no eye-balling

Instantly grab any size or distance. Add, move, and remove guides that allow you to check precise alignment. You can also use them to measure a distance from any object to any place. #goodbyemarqueetool

Supported units: pxptdp

Variables and code output

Define anything as a variable

You can customize the code output by hiding and reordering its parts. Define and replace any value (colors, font, gradient, size, distance) in the code as a variable and it will automatically appear in the exported code.