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.