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.