Inspect designs, export assets and get specs without design tools

Inspect Photoshop & Sketch designs on Mac, Windows, Linux, or in the browser. Export design layers as images and layer styles as CSS, Swift & Android code. Measure distances, handpick colors, get font styles - just by clicking.

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

Export code for web, iOS and Android apps

Generate concise code (CSS, Less, Sass, Less, SCSS, Stylus, React Native, CSS in JS, Swift, and Android) including layer and font styles, units in px, pt, dp, rem, and colors in HEX, HEX8, HSLA, RGBA, or UIColor.

supported platforms: webiOSAndroid

Export images up to @4x or xxxhdpi resolution

Since every layer is fully rendered, you can export anything as PNG, JPEG, SVG or WebP image - no need to preset Exportables or rename layers. Upscale vector shapes and add more resolution variants to fit any desktop, iOS or Android screen.

Supported formats: svgpngjpegWebPBase64

Measure it, don’t eye-ball it

Instantly grab any layer size or distance between layers. Select multiple layers and measure their distance to another layers. View design Guides or create your own to check alignment and distances between objects.

Supported units: pxptdprem

Handpick #BADA55 colors from every pixel

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

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 all layer information like font-family, font-weight, font-size, and more.

Customize code output and define variables

Hide properties and reorder code lines. Create replacement rules and define any value (color, font, gradient, size, distance) as a variable and it will automatically appear in the exported code.

Are you ready to save 5 minutes on every layer?

Share designs without preparing assets or renaming layers. Upload your PSDs and Sketch artboards to Avocode, inspect and export any layer as image or code.