Inspect designs, export assets and get specs without design tools

Inspect Adobe XD CC, Adobe Photoshop, and Sketch designs, export images and layer styles as CSS, Swift & Android code. Measure, pick colors, get font styles and more - all just by clicking.

Easily inspect most used UI design formats

After uploading designs to Avocode, you can open and inspect them with the Avocode desktop app on macOS, Windows or Linux or even in the browser.

Supported formats: XDPSDSketch

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?

Hand-off designs without preparing assets or renaming layers. Just upload your XD, PSD, or Sketch files to Avocode, inspect and export any layer as image or code.