5 things you should know about Avocode
Product Update

5 things you should know about Avocode

Juraj MihalikJuraj Mihalik

Ever since Avocode came to life, its goal has been to help designers and front-end developers from all around the world to efficiently collaborate and turn designs to code faster.

To help you get the most out of Avocode, we decided to point out 5 core features you should know about in this post.

Let’s dive in!👌

1. Import any design format to Avocode with or without plugins.

Every designer has a different workflow and prefers a different design app.  No matter what design format you want to hand-off to your developer, Avocode can handle it.

Why designers love importing designs to Avocode:

  • Add Sketch, Adobe XD, Photoshop, Illustrator, or Figma files to Avocode directly or with plugins.
  • All image assets are automatically ready for developers. You don’t have to set layers as Exportable in Sketch, mark them for export in Adobe XD or rename them in Photoshop.
  • Your job is done. The developer has everything he needs.

👉🏼 How to add a new design to Avocode

2. Avocode works in the browser and has a desktop app for all operating systems.

Same as designers also developers have different workflows and use different platforms. It doesn’t matter whether you work on macOS, Windows, Linux or in the browser. Avocode opens all design formats without their parent app installed on your computer.

Avocode desktop app is available for:

  • macOS 10.11 and higher.
  • Windows 7 and higher.
  • Linux (The only design hand-off tool for Linux users on the market.)

👉🏼 How to download & install Avocode desktop app

Avocode web app is available for:

  • Chrome v. 69 and higher.
  • The two latest versions of Safari and Firefox.

3. Exporting assets and getting specs from Avocode is so simple.

One of the most common tasks for any developer is exporting assets and getting specs needed to turn a design file into the real product. Avocode makes this process so easy and straightforward.

Why developers love exporting assets from Avocode:

  • Scale, rename and export any layer of the design. No need to ask a designer to mark layers for export beforehand.
  • A dedicated layer panel gives you full access to all layers. You can select multiple layers, export them or hide them to see what’s below.
  • Choose your format and export layers as PNG, JPEG, SVG, WebP or Base64.
  • PNG, JPEG, and SVG are automatically optimized for the web. No need to use an additional service like TinyPNG.

👉🏼 How to export an image asset from Avocode

Why developers love getting specs from Avocode:

  • Generate production-ready CSS, Sass, Stylus, Less, SCSS, CSS in JS, Styled Components, Swift, Android or React Native code just by clicking on any layer. You can copy particular values, lines of code, or the whole selector.
  • Click on layers and measure sizes in px, pt (iOS) or dp (Android).
  • Export colors in HEX, HEX8, RGBa, HSL, and UIColor.

👉🏼 How to get assets and specs from Avocode

4. Explain your design thinking and discuss changes the easy way.

If you’re working with your team or clients and contractors, Avocode is an awesome way to collaborate and push your project further.

Why people love collaborating in Avocode:

  • Add a comment on any area of the design. Either click on a specific point or highlight the area of your design.
  • Mention your colleagues, discuss feedback in threads and solve issues.

👉🏼 How to comment on design in Avocode

Join 30K+ designers & developers by subscribing
to our monthly newsletter

5. Keep your designs organized and all versions backed up in the cloud.

Avocode makes it easy to organize your designs into projects, but it’s even better when your team knows which design version is the latest thanks to Version Switcher.

☝🏼Tip: There is no limit to how many versions you add and how many projects you create.

Why people love file management in Avocode:

  • All uploaded designs are sorted in projects. You can rename them, search them, change their platform and delete them.
  • Choose a project platform (Web, iOS, Android) when creating a project and Avocode will automatically prepare code and specs for the platform.
  • Move designs between projects and subfolders to keep them organized.

👉🏼 How to add a new design file to Avocode

Why people love to keep versions backed up in Avocode:

  • Keep unlimited design version history per each design file.
  • Download any version of each file down the road.
  • Once you add a new version, everyone in your team is notified and knows this version is final.

👉🏼 How to add a new design version in Avocode

Are you new to Avocode? We’d love have you try adding your first design and try our features. Grab a 14-day free trial, no credit card is required.

If you liked this post, you also might like The process behind building Avocode features and 2018 review: Avocode 3, SDK, 48 updates and more.

Did you like this article? Spread the word!

What is Avocode?

It’s an all-in-one tool for teams that want to code and collaborate on UI design files 2x faster.