Need to transform design to code? Don't hardcode it, Avocode it!
See how
GET A FREE MONTH
Backstage
Β·
LAST UPDATED
March 3, 2017

Avocode 2.13: Optimized Image Export, Unified Notifications, New Support and more

Head of Product & Co-founder at Avocode and a former Lead Product Developer and Co-founder at MadebySource.

"I still write code. In fact that's what I love doing most."

Staying on top of your design project doesn't have to be hard

The more complex Avocode becomes, the more we strive to keep the UI unified and intuitive. Last year our company and customer base have grown by 3x. This means that Avocode is becoming more robust solution for various types of workflows. With more use cases and more designs in your project, we want you to stay organized and up to date. The 2.13 update will hopefully improve:

  • general oversight of what's happening in your project,
  • your upload experience,
  • and image export.

If there is something unclear while you're working in Avocode, please reach out to us. There is a new in-app chat and a new Help Center which should answer all your questions.

Now let's take a look at what's new.

1. Unified Notifications

πŸ”” In-app Notifications

We're redesigned the drop-down notifications in the Avocode App. The notifications will show up each time you're uploading a design. You can also access them from the πŸ””  icon in the Avocode Project Manager

Redesigned in-app notifications.

‍

The notifications are interactive, which means that you can click on them and be redirected to a specific design or a specific comment in a design. You can also  go back in time of your Notifications just by scrolling.

πŸ”” Slack Notifications

We have polished the preview of the design when there are new designs, revisions or comments added to your Avocode. For example, when someone comments, the Avobot will show you a preview of the respective design.

‍Redesigned Slack notifications.

2. New Avocode icon functionality

πŸ‘‰πŸΌ Direct Upload (on Mac, Windows, and Linux)

You can drag'n drop Photoshop designs, JPEGs and PNGs directly on top of the Avocode icon and they will be uploaded.

πŸ‘‰πŸΌ New loader (on Mac, Windows, and Linux)

There is also a little loader which shows you the progress of your upload. If you upload multiple files at once, Avocode will group them and show you the complete upload progress.

πŸ‘‰πŸΌ Red dot notifications (only on Mac)

Whenever somebody adds a new design or a new design revision, creates a new comment or replies, there will be a red dot on top of the icon with a number of new notifications.

πŸ‘‰πŸΌ Open recent designs (only on Mac)

When right-click on the Avocode icon, a contextual menu will show up. Then click on Open Recent and select a particular design.

3. Better upload experience

First drag & drop your Photoshop design in any project or on top of an existing design (as a design revision).

We are working hard on the option to drag and drop Sketch design. It should be ready in late spring 2017.

Then you can just sit back and watch the design hand-off in action. We've moved the upload bar from the bottom of the app and integrated it with the new notifications drop-down.

New upload notification design.

If you loose internet connection or the design upload fails, just click Try Again and the upload process will start again.

Once your design is processed you can click on it in the Notifications drop-down and it will be opened.

TIP: If you hold CTRL (on Windows and Linux) or CMD (on Mac) while you're clicking on the design, it will be opened in a new tab.

There are 4 ways to upload new design versions

1. Drag & drop it on the design tile in Project Manager

2. Click on the cog wheel in the bottom left corner of the design tile and choose β€œUpload revision.

Screenshot 2017-03-16 15.08.23.png

3. Drag & drop the design on the design which you're currently inspecting (in the Design View). The design needs to have the same name. If it doesn't Avocode will ask you in which project it should be assigned.

4. Click on the REVISIONS icon (looks like a clock with an arrow) in left bar in the Design View and hit +UPLOAD NEW REVISION.

Screenshot 2017-03-16 15.09.31.png

4. Export compressed and optimized images

Lightweight assets are key for a both web and mobile apps these days. That's why we have optimized the SVG export and also added a modern image format WebP.

πŸ“‰ SVG

When you export a vector shape as a SVG, it will be automatically optimized with SVGO. It's a Node.js-based tool which converts SVG-as-XML data into SVG-as-JS AST representation. The result? Lightweight vector shape file made only from the actual curves, no extra stuff like the editor metadata.

The SVGO optimization can save up to 80% of file size. Below you see the code description of an example vector shape. On the left it's the original, on the right it's the optimized version.

An illustration of the project Hindenburg.

πŸ“Έ  WebP

WebP is a relatively new image format (2010). These days it's developed by Google.

Based on Google's measurements conversion from PNG to WebP results in a 45% reduction in file size when starting with PNGs found on the web, and a 28% reduction compared to PNGs that are recompressed with pngcrush and PNGOUT.

The WebP is powerful not only thanks to it's great compression, but also because - like PNG - it supports transparency (alpha channel).

Currently it's fully supported only in Google Chrome and Opera.

If you want to export an image as a WebP from Avocode, just double click on the layer and select WebP in the Export Assets modal.

‍

5. Search designs while you're inspecting

Until now you would have to go back to the Project Manager to search your designs.

Now you can search your designs also while you're in the Design View. Just hit CMD/CTRL + F and the search in project manager will show up.

Search bar appear on top of your Design View.

Then just type in the name of the file you're looking for. You can set the search either inside your current project or All projects.

Type in what you're looking for.
When you click on a design and hold CMD/CTRL, the design will open in a new tab.

If you want to go back to your design from the Search bar, just hit ESCAPE.

6. Ask away

πŸ“ž  In-app Chat

From now on, you can chat with us live from the Avocode App. No matter what you need, we're here for you. If you happen to catch us in a busy time, just leave your question with your e-mail directly in the chat and we'll get back to you.

In order to open the chat, click on the blue circular button in the top right corner. If you want to hide the chat click on the blue button again.

Chat with Connor or Bolek from our customer support in real time.

πŸ“ž  New Avocode Help Center

We have updated and redesigned our Help Center. We're going to be updating and adding new articles based on the most frequent requests. Please send us a recommendation for a new article to team@avocode.com if you have any ideas.

If you don't find your answer in our new Help Center, just use the chat. We'll be happy to talk to you.

‍

How to get the 2.13 update?

Mac & Windows

Just open Avocode and click on UPDATE.

Linux

Avocode is now in APT repository, which means you can update it exactly as you would update any other app on Ubuntu or other Debian-like distribution. If that is your case, open the terminal and type in: sudo apt-get install avocode

Direct Download

You can also download Avocode 2.13 directly here

‍

What's next for Avocode?

☝🏼 New Sketch plugin to upload designs

We are working on improving of your Sketch extension. We already have a working prototype of a new simplified plugin which should be released in April, 2017.

☝🏼 New Account Settings

Currently we're working on new Account Settings which will give your team a more intuitive way to invite new members, manage permissions and your billing.

☝🏼 Integration of project notifications with Slack channels

If you're in the Business or Enterprise plan, soon you will find a new Slack button in each project in Avocode. If you click on it, you will be able easily pair particular projects with specific channels in your Slack.

πŸ’‘ Got an idea?

If you have any suggestion to our future roadmap, please create new ideas on our UserVoice or drop us a line in the comments.

‍

get guacamole
Free 3-in-1 UI kit
Are you a modern designer with taste? Get Guacamole
- a free UI kit  for Adobe Xd, Photoshop and Sketch.
Get a free UI kit
Available for: