Inspect - get assets and specs from designs

Export and scale images

Export PNG, JPEG, WebP and SVG images from Sketch, Adobe XD, PSD, or AI designs in Avocode

Scale and export layers as PNG, WebP, JPEG bitmap images or SVG vector shape images.

Written by Bolek
Updated over a week ago

Optimize exported image assets for web in Avocode

Avocode automatically optimizes all exported PNG, JPEG and SVG assets during export. You can disable it at any time.

Written by Matous Roskovec
Updated over a week ago

Re-export image assets

When you're inspecting a new design version, you can re-export all redesigned assets with one click.

Written by Bolek
Updated over a week ago

Supported image formats for export in Avocode

You can export any layer to PNG, WebP, JPEG, SVG and Base 64.

Written by Matous Roskovec
Updated over a week ago

Slice design with the Slice tool in Avocode

Slice any area of a design and export it as PNG, JPEG or WebP.

Written by Bolek
Updated over a week ago

Get code and styles from layers

Inspect designs in Avocode

Generate web & mobile code from Sketch, XD, PSD, AI, and Figma layers, export images, colors, and measurements.

Written by Bolek
Updated over a week ago

Copy styles from the Design overview in Avocode

Instantly recognize and inspect same layer styles across PSD, AI, Sketch, XD, and Figma designs.

Written by Matous Roskovec
Updated over a week ago

Export CSS, Swift, Android & React Native code from design layers in Avocode

You can generate CSS, Sass, Stylus, Less, SCSS, CSS in JS, Styled Components, Swift, Android, React Native code directly from layers.

Written by Bolek
Updated over a week ago

Quickly copy HTML and export image assets via context menu in Avocode

Quickly export design layers as image assets, copy code, or copy text wrapped in html tags using the context menu.

Written by Bolek
Updated over a week ago

Supported code export languages in Avocode

Export pure standards-based CSS, Sass, Stylus, Less, SCSS, CSS in JS, Styled Components, Swift, Android, and React Native.

Written by Bolek
Updated over a week ago

Supported blending modes in Avocode

Avocode can display blending modes from Photoshop or Sketch in the Styles and Code panels.

Written by Bolek
Updated over a week ago

Create or import variables and replacements rules in Avocode

Create variables from colors, measurements and other properties. Customize the code output by using replacement rules.

Written by Matous Roskovec
Updated over a week ago

Import missing fonts to designs in Avocode

If some of the fonts in a design are missing, please import them from your Typekit, system Font Book or directly.

Written by Matous Roskovec
Updated over a week ago

Measure sizes and distances

How to use the Measure tool in Avocode?

View and copy sizes of any element. Measure dimensions between layers.

Written by Bolek
Updated over a week ago

How to show Layout, Grid, or Rulers/Guides in Avocode

Show guides, grid or layout on Sketch, XD, or Figma files, or create your own Dynamic Guides to measure custom distances.

Written by Matous Roskovec
Updated over a week ago

Align your website or mobile app with the Pixel checker tool in Avocode

Expand the design in a separated transparent window as a floating guide to compare the design with the coded result & make it pixel perfect.

Written by Matous Roskovec
Updated over a week ago

Pick colors

Supported color formats in Avocode

Currently we support these color formats: HEX, HEX8, HSL, UIcolor and RGBa.

Written by Matous Roskovec
Updated over a week ago

Pick and export color codes

Handpick any color code and copy it to your clipboard just by clicking on it.

Written by Bolek
Updated over a week ago

Change color code format

Switch between HEX, RGBa, HEX8, HSL, and UIColor color formats.

Written by Matous Roskovec
Updated over a week ago