We just shipped Avocode on the web with 7 new features

Published in

Avocode — From Design to Code

4 min readAug 25, 2017

We know how important it is for you to quickly access your designs. So we’ve built a new — more unified version of Avocode which works also in the browser. Yes — commenting, inspecting, design and code settings — all on the web.

So what’s the difference between the web and desktop app?

Well, for start there are no more differences in the user interface, it’s all unified. Also, the new app.avocode.com will replace the outdated manager.avocode.com environment.

The Avocode on the web is faster and works out of the box — no need to install anything else. It’s a quick way to access your designs. You can also directly upload Photoshop files online, however, Sketch files still require a Sketch plugin and the desktop app. Sketch drag & drop upload is coming in the autumn.

While the web app allows you to save exported assets only to the Download folder, the desktop app gives you options to set default export paths for different projects or choose the export path for each asset.

Last but not least, the desktop app allows you to keep inspecting designs even if you lose internet connection.

2. Export layers as styled-components for React and React Native apps

Based on user request we added a new code language option. If you recently got used to writing CSS code into JavaScript components, you’re going to enjoy this feature. Just go to the code panel and switch the code language to Styled-components, click on any layer and copy the code output. There is also an option to customize the code output in the App preferences.

3. Export letter-spacing from PSD text layers

Letter-spacing property specifies the spacing behavior between text characters. We know that this was a feature requested and awaited by many of you. We’re really sorry for the wait. It might seem small, but only the recent updates of our code base allowed us to add it. Now you can finally pick letter-spacing as part of any code language output from text layers — both from Sketch and Photoshop designs.

4. New optimization for PNG images

We’ve implemented a new automatic PNG optimization method, which minifies images slightly better than TinyPNG. You can disable it in the App preferences.

5. Sketch file organization is not messy anymore

If you had tens or hundreds of Sketch artboards in Avocode, you might have been struggling a bit with finding the one you’re looking for. Well, not anymore. Artboards are no longer scattered all over your projects. Instead, each Sketch file is wrapped into a folder. You either display all artboards or switch between individual Pages.

6. Share links with a design preview

Thanks to our new image resizing technology, we can attach automatically generated design previews to public links you share with colleagues and clients, so they know what they’re clicking on.

7. More compact Project manager and new Team settings

It took us some time to do, but we have completely redesigned the Team settings to help you invite new people, manage project permissions and check your billing more easily.

There are four simple tabs to switch between:

your team members
payment details and billing information
your team’s name
integrations (Currently Slack. Dropbox, GDrive are coming soon.)

Tip: If you’d like to receive Avocode invoices at a specific e-mail address, just go to Billing, scroll to the Billing information section and click EDIT INFO.

Soon we’ll be adding a better files organization with subfolders for all designs. Keep up to date with our updates on Twitter.