Specs, colors, fonts, styles, sizes… all in Avocode

Export image assets easily. Get auto-generated code snippets, export colors, sizes, styles, fonts –you name it. Choose to scale up or scale down any vector shape, pick an image format and your retina graphics are ready. Suddenly, you'll have plenty of time left to spend on perfecting your code. Or just chilling.

Button Avocode
Designed for developers

Don't waste time and money on
Photoshop and Sketch

Avocode was designed for developers so there are no distracting or insignificant features inside. You'll only find handy tools and buttons a developer like you can benefit from. The real deal is the intuitive interface which lets you preview and inspect any design straight in Avocode without using Photoshop or Sketch.

Friendly with Mac, Windows, and Linux
Designed for developers
FONT inspection

Font styles and paragraph styles in a breeze

Font-family, font-weight, font-size… all the details that really matter in typography. Now you don’t have to inspect each text layer and manually transform it into CSS. Code panel will automatically do that for you. Even if the layer has multiple font styles!

Font inspection
image export

Producing retina graphics is a piece of cake

Designing for multiple screens also means having image assets in multiple formats and resolutions. How annoying, right? With Avocode you don’t have to worry. Just choose to scale up or scale down your vector shapes, pick your image format and your retina graphics are ready!

Supported formats: SVG PNG JPEG
Image export
Sizes & distances

Need a perfect fitting? Get the right measures

Struggling with a peculiar resolution? Instantly grab any size or distance. Add, move, and remove guides that allow you to check precise alignment. You can also use them to measure a distance from any object to any place.

Sizes and distances
Code Export

From layer styles straight to code

Tired of tons of hand-coded CSS? Avocode kills this pain.
It accurately translates layer styles, font styles and paragraph styles into CSS. Need Less, Sass, Stylus, Swift, XML or CSS in JS for React Native apps? It's all there.

code export
Color export

Handpicked #BADA55 colors

Manually copying colors and converting them... that is so yesterday. Just pick a color and the code appears immediately in your clipboard.

Supported formats:
HEX
RGBA
HSLA
UIcolor
HEX8
color export
Text export

<h2>It’s all just copy and paste</h2>

Customize the code output even more by using variables. You can define any value in the code as a variable – things like colors, fonts, gradients, sizes or distances.

text export
VERSION CONTROL

All revisions in your vision

Whether it’s just a small update or an entire re-design, you’ll never miss it. Give specific feedback while visually comparing design versions. Then you can discuss all the changes in real time.

Get notified about new revisions on Slack
version control
Sharing

Avocode is the best way for designers to share designs with you

Feel like you're missing something? Leave comments and notes literally on top of the design to your colleagues in real time. Once the change is implemented you'll be notified about the design update via Slack or E-mail, just like you're used to. Yes, it's also possible that Avocode handles also e-mail notifications.

sharing
Notes

Receive notes from the designer and discuss anything

No need bother with confusing e-mail chains. Now you can receive notes from the designer directly in Avocode and you can even highlight any area right in the design and leave your feedback. When others reply to it, Avocode will notify you via e-mail or Slack. Let the work flow!

Get notified about new revisions on Slack
notes

Any ideas what you'll do with all the extra time?

Well, that's up to you. Now enjoy the first 14 days with Avocode for FREE. No credit card required.

Get started now – for free!