Quickly hand-off any design version. Don't waste time with redlining or preparing assets and specs

With Avocode you can easily hand-off and share designs with others. The greatest benefit is that you don't have to prepare the design in any way.

Seamless design import

  • Sketch (directly by drag & drop from Windows, macOS, Linux, or the browser)
  • Adobe XD (directly by drag & drop from Windows, macOS, Linux, or the browser)
  • Photoshop (directly by drag & drop from Windows, macOS, Linux, or the browser)
  • Figma (directly from the Figma app - on Windows, Linux or macOS)

Private or public sharing links

When you added a design, you can easily share a private or public links with anyone or with people only outside your team so they can inspect it and comment on any OS without design tools.

Zero time spent on preparing assets or redlining

You don't need to rename layers or mark them as Exportables. Thanks to Avocode Monroe rendering engine, all layers can be exported or hidden - just like in a design tool. 

You also don't need to redline and explain specs, colors or fonts. The developer can easily get all the design information from the design in Avocode. Developers can even set any resolution for exported image assets, or choose a correct color and measurement unit format depending on the project.

Explain your design thinking

Thanks to Avocode Comment mode, you can easily start a design discussion right on top of any design version. When someone comments, you’ll get an automatic notification.

Keep design versions in sync and accessible to anyone

Finally, everyone on your team will know which version is final. When someone requests a design change, you just edit the design and sync it back to Avocode.

Easily get all assets and specs quickly on all platforms in a developer-friendly UI

Open layered Sketch, Adobe XD, Photoshop, or Figma design files on Windows, macOS or Linux. 

Export one or multiple layers as image assets

Thanks to Avocode Monroe rendering engine you’ll get full access to layers. You can select one or multiple layers, hide them, scale them, rename and export them as PNG, SVG, JPEG, or WebP. Plus if you're using our desktop app, your images are automatically optimized and compressed.

Get layer styles and auto-generated code in 10 languages

With Avocode you don't have to code your stylesheets from scratch. Just click on layers and copy styles or get CSS, Sass, Less, SCSS, Stylus, CSS in JS, Styled Components, Swift, Android, or React Native code.

Get measurements and colors in any format you need

You can precisely measure distances and sizes in pt, px or dp. You can also pick colors in HEX, RGBA, UIColor, and HEX8. 

Write code faster with Atom or Visual Studio Code integrations

Inspect designs directly in the window of your favorite text editor. Get Avocode integrations, open designs in Atom or VS Code and when you click on design layers and start typing code in your stylesheet, you’ll get automatic code suggestions.

Comment, collaborate and track progress

Discuss changes and give feedback with comments

Use Avocode Comment mode to highlight any area or point of the design and leave your comment. You can mention other team members with the @ symbol to invite them to the conversation.

Get notified when something changes

Connect Avocode to your team's Slack, pair channels with projects and receive notifications about new comments, designs, or design revisions.

Keep designs organized and in sync with your team

Move designs between projects and create subfolders to create more organization structure. All design versions are kept together in chronological order. This way you can easily open, comment or download any design version from Avocode.

Manage user access to selected projects

You decide who sees what. You can either invite team members with limited access or change their permissions at any time later on. When you need someone only to comment and have access to specific projects you can invite them as Guest users.

Finish projects faster with advanced project settings

When you create a new project, you can preset a platform (web, iOS, or Android) and also predefine the default code language for this project. This way all designs that you add to this project we inherit the correct settings - for example for iOS project the units will be in points, colors will be in the UIColor format and auto-generated code from layer styles will be in Swift. You can change any of these settings later on for the whole project or any specific design.

Did this answer your question?