Be the first to know about our product updates. Become an Avocode super-user and know all the bells and whistles of our tool. Read behind the scenes tech stories from our top developers.

Avocode Blog - Big releases, wanted features and product updates

What a year! What a year indeed for all of us. We all had to make sacrifices in 2020. We all struggled in different ways dealing with the new reality, and the challenges 2020 threw at us. We can only hope that you, too, were able to cope, make sense of it, and come out stronger on the other side.

And how did we do at Avocode? Did we stay focused on our mission **helping teams to build great digital products by making the design process inclusive for everyone?** It was not always easy. But we pushed through it. We are proud of what we managed to accomplish and want to share the highlights with you! 

## Avocode 2020 in Numbers

- Can you believe it’s been 5 years since we first launched Avocode? We want to thank our users for being with us all this time and helping to improve Avocode. 🎉
- Our Product team [shipped 29 new features and 39 product improvements](https://avocode.com/changelog) requested by our community.
- We have improved our design file processing performance for large files (2x), design view performance (2x), and app performance by significantly decreasing its CPU usage. 
- Our API uptime and processing uptime were at 99.99%.
- We redesigned our [website](https://avocode.com/), improved the menu for easy navigation, added lots of playful illustrations and screencasts showcasing Avocode, and received almost 1 million unique visitors.
- Our Marketing team released [30 articles](https://avocode.com/blog) featuring inspiring stories, best practices, & community news.
- We published [6 helpful ebooks](https://avocode.com/books) full of tips, data, and useful insights designers and developers would undoubtedly love.
- We successfully launched [The Grit 2](https://www.producthunt.com/posts/the-grit-season-2) and [Avocode Write](https://www.producthunt.com/posts/avocode-write) on Product Hunt. 
- Our Customer Success team answered over 14,000 of your questions and comments, with a 94% satisfaction rate.
- Last but not least. We developed new and cemented existing partnerships with [Ceros](https://avocode.com/blog/case-studies-open-design-api-ceros), [Adobe XD](https://blog.adobe.com/en/publish/2020/09/14/avocode-write-plugin-adobe-xd.html), [Figma](https://www.figma.com/community/plugin/821674268995163810/Avocode), and [Sketch](https://us17.campaign-archive.com/?u=d0d26003e4fc2a50827731b93&id=80d4b273f9). They've been tremendously great partners, we really enjoyed working with them. Cheers! and thank you for your help! 

## Top 6 Releases in 2020

### <img src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/odapi.png" alt="Open Design API" width="18" style="margin-right: 10px;">Open Design API

It is hard to underestimate the value of the technology behind Avocode. We always knew its enormous potential. But year, we are excited and proud to launch [Open Design API](https://opendesign.avocode.com/).

<center><img width="95%" src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/opendesign-api.png" alt="Open Design API"></center> 

👉🏽 [How Ceros launched Sketch, Photoshop, & Illustrator import thanks to the Open Design API by Avocode](https://avocode.com/blog/case-studies-open-design-api-ceros)

As developers in the design space ourselves, we understand the struggle of accessing data from design files.

- Even a simple square has a very different code representation in Sketch, Figma, Photoshop, Illustrator, and Adobe XD file formats.
- To work with each format, devs need to study new APIs, write new parsers, and maintain them against constantly evolving design tools - which is a costly activity that also defocuses product teams from building user-centric products.
- Design teams in larger organizations work with different design tools, and design systems cannot be auto-synced due to incompatibility issues.

We’re here to change that. We’re here to open design formats with one readable and well-documented format, one API that runs in the cloud and can also work in the private cloud for an extra layer of security.

> We’re here to open design formats with one readable and well-documented format, one API that runs in the cloud and can also work in the private cloud for an extra layer of security.

With the Open Design API, developers can easily access design data and use it to sync design systems, different file versions, enable the import of design files into their product, and much more.

Would you like to solve some of your internal design workflows with our API? [Let us know](mailto:team@avocode.com).

##Avocode Tools

The multiartboard design rendering in the browser enables us to build various features on top of it - to support workflows like copywriting, user flows, or better design review. 

### <img src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/avo-write.png" alt="Write" width="16" style="margin-right: 10px;">Avocode Write

Good copy is essential to driving engagement and conversions. So we’re happy to release [Avocode Write](https://avocode.com/design-copywriting), our new tool for crafting and editing copy online directly from Adobe XD, Sketch & Figma files.

<center><video width="95%" autoplay controls loop style="pointer-events: none;"><source src="https://avocode.com/static/images/homepage/product/design-copywriting/screencast.mp4" type="video/mp4"></video></center> 

Upload your design to Avocode, click on text in any artboard, and start rewriting it. Avocode will count your characters & indicate if the new copy is not overlapping text layer bounds.

Every copy iteration is recorded on a timeline so you can pick the best one during the final review and pull the text changes back to the design file.

We hope you will enjoy using Avocode Write to run more copy experiments in 2021 and grow your business. 

### <img src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/avo-flow.png" alt="Flow" width="15" style="margin-right: 10px;">Avocode Flow Beta

It is essential to understand the logic among various screens in your new app or website. The same goes for presenting, coding, and testing its functionality. [Avocode Flow](https://avocode.com/flow) solves this problem.

<center><video width="95%" autoplay controls loop style="pointer-events: none;"><source src="https://avocode.com/static/videos/flow-demo.mp4" type="video/mp4"></video></center> 

Finally, you can easily create & share screen flows from Adobe XD, Figma & Sketch design files and play them on both desktop and mobile devices. Simply sync your design into Avocode, edit screen connections, create new ones, and click through the flow.

Now everyone on your team will understand the user flow and have the opportunity to provide feedback and discover potential UX fails early in the process. So you can save valuable time to focus on making your product better. 

### <img src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/avo-comment.png" alt="Comment" width="15" style="margin-right: 10px;">Avocode Comment Beta

We redesigned the way commenting works in Avocode. Based on our users’ feedback, we have been working hard on bringing you this new feature. 

<center><img width="95%" src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/avocode-comment.png" alt="Avocode Comment "></center> 

With [Avocode Comment](https://help.avocode.com/en/articles/4480205-commenting-in-avocode), you can comment and review UX changes on multiple artboards from one view, filter and preview the most relevant comments, and get notifications when someone mentions your name. 

We hope it will help you to explain your design thinking & share feedback in a seamless way. 

### <img src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/Avocode+Private+Cloud.png" alt="Cloud" width="18" style="margin-right: 10px;">Private Cloud & SSO

At Avocode, we are driven by two fundamental principles in our approach to [security](https://avocode.com/security): transparency and defense-in-depth. This year we made significant strides to bolster the safety of our users and their data.

That’s why apart from being compliant with the most notable industry-standard certifications, like SOC 2, we took an extra step to establish trust with our Enterprise customers and added an extra layer to our defenses - [Avocode Private Cloud](https://avocode.com/books/private-cloud).

<center><img width="95%" src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/campaigns/private-cloud/private-cloud.png" alt="Private Cloud & SSO"></center> 

Avocode Private Cloud provides isolation at the infrastructure level as opposed to just the application level, thus eliminating entire classes of security issues like cross-tenant privilege escalation, so your most sensitive data can be safe with us.

And you can further secure your teams by requiring users to authenticate with [Single Sign-On](https://help.avocode.com/en/articles/3720329-how-to-use-single-sign-on-sso-to-log-into-avocode) (SSO). 

### <img src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/img/logo_black.png" alt="Custom Avatars" width="16" style="margin-right: 10px;">Custom Avatars

Avocode is a collaboration platform. So for this holiday season, we prepared a little gift 🎁 for you! You can now make your Avocode team even more personal by setting your own custom avatar or selecting one from our gallery of cute Avocode characters.

<center><video width="95%" autoplay controls loop style="pointer-events: none;"><source src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/avotars-avo.mp4" type="video/mp4"></video></center> 

And the good news is - you don't have to worry about the file size of your custom image or its format. Just pick a photo or image you love, and Avocode will do the rest. Go to your [profile settings](https://app.avocode.com/personal-account/profile/) to add your avatar. 

## **Remote work & new teammates**

We stayed focused. This year a number of new talented people joined our team. We created new meeting spaces and started ordering healthier snacks for our kitchen. Yet, overnight, we found ourselves working remotely and connecting via Zoom calls. And it worked!

<center><img src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/avo-hoffice.gif" alt="Avocode Home Office"></center> 

We were lucky to go into this new work mode without any issues. Sure, we still miss seeing one another in the office, but we make it work by having an occasional virtual drink or playing an online game together during lunchtime. Turns out, one can even stay in shape, challenging your teammates to do a set of push-up every day at 11 am.

## **What’s next?**

It was a challenging year, but we also learned a lot on the way. And we won’t stop making Avocode even better in 2021, so you can build your products faster and grow your business.

To see what’s next feature-wise, keep checking our [product roadmap](https://avocode.com/product-roadmap). But, to give you a little sneak-peek about the Open Design API:

- We will be adding rendering endpoints to the API to enable developers to preview sharp designs and export assets at scale.
- We will be improving design file format support, especially for Figma and Adobe XD.
- We will be releasing more design file converters, starting with Figma to Sketch.

Sign up for our [newsletter](https://avocode.com/blog) to stay up to date on the latest product updates, trends, best design stories & tips. And join us on social media to become a part of the community.

**Cheers to the new year and all the great things to come! 🥳**

An annual review of our favorite updates and stats from the past year. 2020 was not always easy. But we pushed through it. We are proud of what we managed to accomplish and want to share the highlights with you!


How we elevated the design to code workflows in 2020

large_2020-review.png

medium_2020-review.png

small_2020-review.png

thumbnail_2020-review.png

2020-review.png

How Avocode elevated the design to code workflows in 2020

Copywriting in UI design is much more than in traditional advertising, where its main focus is on storytelling conveyed through short messages.

In web and mobile design, copywriting serves the key role in User Experience. The difference here is not just a one-time purchase or quick content consumption, but recurring usage of the given app or interface.

Great User Experience stems from an elegant combination of design and text. Labels, body text, headlines, call to actions, and microcopy - they all create the story, and **how they are laid out** in design creates the structure, the narrative of the message that your audience receives.

> Great User Experience stems from an elegant combination of design and text.

OK, so here you have it - black and white, two paragraphs about how much copy and design come hand in hand. But how come these professions are still made in silos?

Designers work in design tools like Adobe XD, Sketch, Figma, or others.

Copywriters work with Microsoft Word, Google Docs, Dropbox Paper, or others.

For the sake of collaboration, both visual and text tools are moving towards shared environments and real-time editing - which is great, but only in each silo.

**There IS nothing in between**—only screenshots with redlines, PDFs with comments, and never-ending email threads.

Scratch that - **there WAS nothing in between** - until last week, when we [launched Avocode Write](https://www.producthunt.com/posts/avocode-write/).

> It’s about time to break the silo scheme between designers and copywriters to increase efficiency and start saving time.

The need was huge. Look, we have been working on websites, emails, mobile apps, and desktop interfaces for long enough to realize the time wasted by unclear communication between Copywriters, Designers, and other stakeholders relying on this workflow.

It’s about time to break the silo scheme between designers and copywriters to increase efficiency and start saving time. And yes, even when your [designers are also partially copywriters](https://creativepublic.com/copywriter-designer.php) or vice versa. Why? "Why? Because copywriting is interface design." - as [this article](https://uxplanet.org/copywriting-is-interface-design-10cb931ecb53) very well summarizes. And please, for the sake of the argument (and your precious time) - let’s not get into the chicken-egg problem if you should start with copy or design. Just make sure that you dedicate resources to both and that you let these departments work together.

When you invite copywriters to the design table, you can move your entire business to new heights. What do I mean?

- A) better UX
- B) better information structure
- C) higher conversions
- D) better onboarding
- E) increase in retention

You do the math. Cooperation between the text and design profession has extreme implications when it comes to business growth. Period.

> When you invite copywriters to the design table, you can move your entire business to new heights.

<Image src="69/1.png" caption="" />

**Clearly, the time to bridge the gap was years ago**, but in spring 2020, we finally had the technology that would allow us to do that.

## How did we build Avocode Write?

I think you (like other [500+ people on Product Hunt](https://www.producthunt.com/posts/avocode-write/)) might understand the why. Now let’s get to the how.

Since early 2020, we’ve been using the [Shape Up product development framework](https://basecamp.com/shapeup) to build new things here at Avocode. In short, we see two benefits of using this methodology. 1) Shorter time for feature development projects = smaller and faster releases. 2) Thanks to a fixed time frame for each Shape Up project, we are forced to prepare each project very well (in terms of research, market fit, and project scope & task planning).

**Starting from the research & market fit**

We asked around 60 copywriters and 50 designers around the world who work with larger product teams about their pain points - both from our user base and [publicly](https://www.designernews.co/stories/109554-how-do-you-work-with-copywriters-to-edit-text-in-designs).

**This is what we found out:**

- Generally, copywriters need to see copy or replace lorem ipsum in the design context, but designers are afraid to give the edit right not to change the design layout accidentally.

 <Image src="69/2.png" caption="" />

- Copywriters are not well-versed in using design tools. (Only a few UX writers and UX designers are, but they are more likely to use prototyping tools like Balsamic or Axure.)
- In theory, if copywriters would replace text in design text layers, it’s important they a) fit into the given length of a text layer bounds and b) when they don’t, designers could easily polish layout, brake lines, or style fonts.

> Copywriters need to see copy or replace lorem ipsum in the design context, but designers are afraid to give the edit right not to change the design layout accidentally.

**Project scope & technology**

The possibility of editing text layers in Avocode, was mentioned by one of our rendering developers about a year ago. Since then, we had the idea saved, and in April 2020, it finally got through our Betting table (a meeting where we decide what project we’ll address in the next ShapeUp cycle).

Since Avocode is powered by our [custom rendering technology to display proprietary layered design files in the browser](https://avocode.com/technology), we knew that this project would be mainly considering the front-end. We needed to create some interface on top of design files, where people could interact with text layers. Luckily, one of our previous previous projects [Avocode Flow](https://avocode.com/blog/how-we-shipped-support-for-screen-flows-thanks-to-shape-up) (currently still in Beta) - a new tool to edit prototype connections, technically laid down the ground work for Avocode Write - it worked with multiple artboards rendered side by side in the browser. As most of the technology was ready, we were quite certain we could pull the front-end part in 6-8 weeks.

> We needed to create some interface on top of design files, where people could interact with text layers.

After a couple of UX checks with our [Private Beta Testing Group](https://www.notion.so/avocode/Slack-community-close-down-message-bb764b56867840c797c6b36794835588#36fc52a08b104eb4a69b40f359f1fac7), we had a simple design. We decided not to enable in-line text editing, for now, and only let people change actual text content - without touching font styling.

Also, we came up with a simple way to record copy suggestions on a timeline - for each field you could add any number of copy variants. This was based on feedback from agencies that need to present multiple copy variants to their clients.

<Image src="69/3.png" caption="Avocode Write interface for editing text layers and suggesting multiple variants per each text field." />

If you need to hide the text edits altogether to present the last variant from the design file, just hit the switch.

Also if you need to revert to some previous copy variant, you simply click on a previous version and hit save.

<Image src="69/4.gif" caption="" />

**Text length**

We also added a simple character count and visual monitoring if the text length overlaps original text bounds. We decided to enable copywriters to save even variants when the text does indeed overlap, but they are always informed.

<Image src="69/5.png" caption="" />

Long story short, we released Avocode Write the beginning of summer **under a feature flag**... but two things were still missing.

## 1. In-app integration

Avocode Write is a new tool, and we need to integrate it better into the Avocode app. We need to enable Avocode users to switch easily in between the "tools" (Inspect, Comment, Write, & Flow), to open designs in any tool directly from our file manages, and also to use them in our [desktop app](https://avocode.com/download).

FYI, currently, this view is still in transition - we’ll add contextual comments for each tool on top of multiple artboards next month. And in the meantime, we are also working on enabling the [Inspect tool](https://avocode.com/hand-off-and-inspect) on top of multiple artboards (not just one). If you’d like to give us feedback on the UI, please [sign up here](https://avocode.typeform.com/to/BM6uy7zR).

<Image src="69/6.png" caption="" />

## 2. Design tool integration

Avocode Write currently enables browser-based text editing for Adobe XD, Sketch, and Figma design files.

In the case of XD & Sketch - you can sync the designs to Avocode either by plugin or even directly by drag and drop (in this case, you don’t need to own the design tool). 

Regarding Figma, you need to use our [Figma plugin](https://www.figma.com/community/plugin/821674268995163810/Avocode).

A couple of resource here:

- [Sync Sketch designs to Avocode](https://help.avocode.com/en/articles/1802662-import-sketch-design-files-into-avocode)
- [Sync Adobe XD designs to Avocode](https://help.avocode.com/en/articles/1483075-import-adobe-xd-design-files-into-avocode)
- [Sync Figma frames to Avocode](https://help.avocode.com/en/articles/1696758-import-figma-designs-into-avocode)

If you read carefully, one of the key use cases people were asking for in the research phase was the ability to **pull copy suggestions back to the design** - in case something needs editing.

**Text sync back to the design tool**

This took us some time to pull off - to the extent that we had to postpone the original product announcement, but we are glad we did. 

**Sketch** 

In July, we first added a "Pull text changes" functionality to our Sketch plugin. This action is easily reversible by CMD+Z (for example, if you just want to preview the changes.

[Learn more about Avocode/Sketch integration](https://help.avocode.com/en/articles/4146526-how-to-edit-sketch-design-copy-with-the-avocode-write).

<Row col="2">
 <Image src="69/7.png" caption="" />
 <Image src="69/8.png" caption="" /> 
</Row>

**Adobe XD**

Then we joined the XD Dev Days 2020 hackathon to quickly build a completely new Avocode Write plugin to both sync artboards to Avocode and pull text changes - just by pasting a link into the plugin. 

To install our Adobe XD plugin, simply [click this link](https://adobe.com/go/xd_plugins_discover_plugin?pluginId=1f763b08) or go to Adobe XD plugin manager, search for **Avocode Write**.

[Learn more about Avocode/Adobe XD integration](https://help.avocode.com/en/articles/4290266-how-to-edit-copy-for-adobe-xd-designs-with-avocode-write).

<Image src="69/9.png" caption="Avocode Write is now listed among copywriting & localisation plugin collection in the Adobe XD plugin manager." />

**Figma**

And what about Figma? For now, you can only sync Figma Frames to Avocode, where you can inspect, edit copy, comment, and change screen connections - without being afraid to accidentally manipulate design layout. Pulling text changes back to Figma files will be coming later this year.

## So... is Avocode Write public? You bet.

After nearly three months of work on Avocode Write, we were happy to take off the BETA label, launch it to our entire user base, and to [announce it to the community on Product Hunt](https://www.producthunt.com/posts/avocode-write/) - as an asynchronous copywriting collaboration tool for all copywriters, UX writers, designers, and stakeholders.

<Image src="69/10.gif" caption="" />


Both Adobe XD and Sketch plugins/integrations turned out to be a good call. This was one day after the release:


<Image src="69/11.png" caption=""/>

## Try it and change the way you collaborate on design copy.

We wanted to help you try Avocode Write without any string attached. Simply check this page: [https://avocode.com/design-copywriting](https://avocode.com/design-copywriting) and sign up for a **14-day free trial**.

This is how to use it:

<Row col="2"><Image src="69/12.png" caption=""/> <Image src="69/13.png" caption=""/> </Row>
<Row col="2"><Image src="69/14.png" caption=""/> <Image src="69/15.png" caption=""/> </Row>

## What’s next?

Most importantly, we need to hear from you if it brings you value and how you would like to use such a tool.

[If you’d like to give us feedback on Avocode Write, leave your contact here](https://avocode.typeform.com/to/BM6uy7zR).

From the product perspective we are planning:

- contextual comments in the Avocode Write tool (so copywriters and stakeholders could not only discuss messaging but also fonts and overall readability/legibility),
- Figma text sync,
- and also maybe in-line text editing to address text styles (like bold, etc.)

We are also preparing to launch a series of Webinars at the end of September with a live demo to help you start using the tool and answer any questions. Stay tuned... and write. ✏️

 Need to improve UX? Let designers work with copywriters better. Avocode Write is the first Design Copywriting tool for Adobe XD, Sketch, and Figma designs with browser text editing & plugins to pull text changes back to design. Try it now - 14 day free trial.

Introducing Avocode Write - The bridge between copywriting and UI/UX design workflows

large_hero.png

medium_hero.png

small_hero.png

thumbnail_hero.png

hero.png

Avocode Write - The Bridge between Copywriting and UI/UX Designers

Our mission at Avocode has always been to help different stakeholders in the design process work more efficiently with design files - with a primary focus on [front-end engineers](https://avocode.com/hand-off-and-inspect). 

The most common use case for Avocode is this:

- designers need to focus on the design process so they share files with developers via Avocode so they wouldn’t have to export stuff for them
- developers then come in and take all assets and specs directly from Avocode - this saves them time and helps them code faster

Most of the Avocode tools & features are built to help these two parties collaborate. Besides discussing things via comments, we always knew that developers also need to understand screen flow logic. 

So back in 2018, we have built a simple Prototype player - any design file that contained some logic made via connections could be clickthrough also in Avocode. This was a nice little addition, but as developers ourselves, we understood we haven’t solved this fully.

To make it crystal clear, we had this...

<Image src="63/01.png" />

... and we needed this:

<Image src="63/02.png" />

Initially, our app has been built to display one design artboard at a time... and now we clearly need to display more - kind of like Sketch, Adobe XD, or Figma do.

To pull this off in the browser, that means that you need to parse uploaded design files, render them via C++, compile the result by Emscripten into machine-readable JavaScript code, and thanks to WebGL display the result. By the way, besides the parsing part, this is similar to how Figma renders design frames in the browser.

The design parsing is crucial to enable us to render all sorts of design file formats in the browser - like the afore-mentioned Sketch & Adobe XD.

Developing such technology isn’t a piece of cake. Luckily, [we started building it years ago](https://avocode.com/technology). 

In early 2020 our rendering technology reached the state that it was not only displaying design artboards side by side in the browser (while making sure they remain sharp when the user pans or zooms), but it was working relatively fast. See below how our rendering works (for example, this is some Adobe XD artboard).

<Embed src="https://stage-embed.avocode.com/embed/c6816d5b51904cd0a4a3923f465a7353?autoplay=0" />

**It was time to test it on a new project**. Displaying (and editing) screen flows seemed like a great fit. 

So what was stopping us?

## Redefining our approach to product development with Shape Up

Although we had the technology ready, we had to design & build a completely new front-end and tweak many APIs. Based on previous product development experience, we always treat new feature development as experimental, meaning we don’t want to burn too much time on a project that doesn’t have an ensured value. 

During the research phase of my "shaping" this project, I found out a few things worth mentioning here: 

- Roughly 60% of Sketch designers we have in Avocode already create screen flows in Sketch
- Having one overview of all screens with links between them was important to 90% of all respondents (we got answers from ~550 people - both designers & developers)
- 76% of respondents (sourced on forums and from our [Blog subscribers](https://avocode.com/blog)) who are not currently using Avocode would switch to Avocode if it could create or edit screen flows

Our take on screen flows (in the MVP) was to make design flows fully accessible online - even without design tools. We wanted to enable:

- overview of screen flows created in Figma, Adobe XD, and Sketch
- editing of screen flows created in Figma, Adobe XD, and Sketch
- creating new flows (from scratch) within Photoshop, Illustrator, Figma, Adobe XD, and Sketch files - i.e. all file formats we support in Avocode
- presenting the flow as a simple clickable prototype in the browser (aka sharing via link)

> Our goal was to make screen flows fully accessible online - even without design tools.

Until the end of 2019, our process was a combination of Agile and Scrum. Most of our developers were dedicated to large-scale projects with only weekly sprint checks. When something was taking a little longer, it was simply tracked as "{task_name} Volume XY" - based on how many weeks it took.

From a business perspective - this is not a healthy approach because you don’t have clear deadlines.

So how could we change the culture and enforce fixed dates of release to innovate faster and ship more frequently? In a way that all team members would be motivated and wouldn’t feel pressured by strong directives?

Well, dear reader, I feel I may have found the solution. Have you ever heard of Shape Up? 

Me neither... until the summer of 2019, when one of my friends sent me a book called [Shape up](https://basecamp.com/shapeup) by Basecamp. Spoiler alert - we implemented this methodology and it seems to do wonders for us. 

**So what is Shape Up about?**

The Shape up really takes into account the preparation where an assigned person (called the Shaper) shapes (aka prepares) the concept of the feature in advance. Meaning, the Shaper will dive deep into the problematics in a few basic steps.

1. Customer research, data analysis, surveys
2. Draft solution
3. Address rabbit holes
4. List out no-gos

The key takeaway is that you'll spend 6-weeks on a project, and after that, you'll validate how it went. Whether the project turns out to be successful (read: you’ll ship something) or a failure, you spend "only" six weeks, not six months.

Excited by stumbling upon the Shape up as something new and unexplored, I estimated that using this process we could ship and validate the first version of prototyping in Avocode 1-2 Shape cycles, i.e. between 6-12 weeks.

**TIP:** *If you want to know more about our path to adopting shape up, stay subscribed to our blog - the article is in progress!*

### So let’s see how we applied this "magic" process

In the first Dev cycle (read six weeks), we wanted to have an MVP, which would allow you to view artboards from one design file in the browser and enable you to drag connections from design elements (layers and layer groups).

This is a rough sketch of what I had in mind - connecting the Flow app with our current Design file manager.

<Image src="63/03.png" />

Marker sketches - Showing the flow of the 2 apps.

On this project, I worked with a 5-person team consisting of 2 front-end developers, 1 backend developer, and 1 rendering developer. One of the front-end developers was also assigned the role of the lead developer. This person was responsible for the whole project since day one of the development cycle. 

My role was to supervise and help answer possibly unclear specifications.

**The first trade-off**

The first technical challenge emerged right after the first couple of days, regarding the file formats. It is true that Avocode fully supports Sketch, Figma, Adobe XD, Photoshop, and Illustrator files.

- However, Photoshop files - based on our data from over 8,000,000 designs, rarely have more than one artboard.
- Also, our current support for the Illustrator file format doesn’t count with exact coordinates of Illustrator files, although we can render them correctly so the developer could inspect their layers. In short, adding the information about Illustrator artboard coordinates in our AI parser would bloat the scope of the project.
- Lastly, Photoshop and Illustrator are less and less the go-to tools for UI design, which makes sense as these tools were never meant for UI design anyway.

So we reached an inevitable trade-off - to launch prototyping "only" with the support of Sketch, Figma, Adobe XD files.

**Performance, performance, performance**

The next challenge was putting our rendering technology under a performance test. 

Displaying all artboards at once, even for big files containing lots of images. The overall performance had to be good, loading times had to be fast, zooming, and panning had to be smooth - no lagging or waiting times. No pressure, right?

- **The first optimization was to avoid processing duplicated images.** We started to analyze the files during the opening, which helped us to identify duplicates of images, so then we only process the images once and not multiple times. This optimization helped us to cut the loading time and reduce the memory load.
- **Then we optimized image upload by implementing queues**. In the beginning, we processed all images at once, which negatively affected the smoothness of the tool in the initial state; it lagged a lot. The queuing helped us achieve the desired smoothness, display enough for smooth user interactions, and process everything in the background.

**Tip:** *[Learn how we scale designs thanks to concurrent design rendering.](https://avocode.com/blog/how-we-made-avocode-faster-with-concurrent-design-rendering)*

We also spent a lot of time discussing how to decrease loading times in the Present mode - namely, not having to load artboards one by one. For example, we thought of pre-loading fragments of particular artboards. However, it’s challenging since artboards can be connected completely randomly across the whole file.

Therefore, we decided not to do any "magic" and just hide the artboards we don’t need. In reality you'll always see the desired artboard in the flow, but the rest of the artboards will still be loaded and present, just hidden. By this solution, we've achieved smoothness and reduced loading time dramatically. 

## Going across the finish line

Six weeks were over. What did we end up with?

- The first beta version with the ability to connect screens and layers in Sketch, Adobe XD, and Figma files.
- We have built a new product feature on our new rendering technology and verified its potential.
- Presenting clickable prototypes & sharing was not finished.

Overall - I would say quite a success. Internally, we decided that this project deserves to be kept alive, and we dedicated six more weeks before going live with it. 

**In 12 weeks we were able to ship Avocode Flow with:**

- 3 supported formats
- Private and public sharing
- Editing existing prototype connections (created in Sketch, Adobe XD, and Figma)
- Option to open and edit designs in the Avocode Flow from Avocode file manager
- Mobile/desktop friendly Present mode for all clickable prototypes (still needs some love though)

**What’s the added value for our users?**

Besides helping developers understand flow logic in design files, we also created a tool for UX specialists and other stakeholders who need to create simple clickable flows and diagrams. 

## What's next?

We plan to enable creating multiple Flows per file, enabling movement of artboards, better adjustments of flows like editable arrows, and perhaps also some labels.

However, before we start adding new features, we need to hear from you, what would be most useful. So please go ahead and [try it in our app](https://avocode.com/flow), and if you have some feedback, I’ll welcome it at <a href="mailto:josefkettner@avocode.com">josefkettner@avocode.com.</a>

**#letitflow**

Learn how we leveraged our design rendering technology and the Shape Up process by Basecamp to enable overview & editing of user flows made in Sketch, Adobe XD, and Figma.

How we shipped support for screen flows thanks to Shape Up

Ever since [Avocode](https://avocode.com/) 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&nbsp;plugins.

Every designer has a different workflow and prefers a different design app.&nbsp;
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.

<Image src="https://cdn-images-1.medium.com/max/2400/1*_u6lmJwfZbdAlzfh0jJ1ug.png" small external />

👉🏼 [How to add a new design to Avocode](https://help.avocode.com/import-and-manage-design-files/design-import/add-a-new-design-file-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](https://help.avocode.com/getting-started/step-2-download-install-avocode-desktop-app)

**Avocode web app is available for:**

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

<AdsBanner />

##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.

<Video src="Z45DQJZ3lOI" />

👉🏼 [How to export an image asset from Avocode](https://help.avocode.com/inspect-get-assets-and-specs/export-and-scale-images/export-png-jpeg-webp-and-svg-images-from-sketch-psd-ai-and-xd-designs-in-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.**

<Image src="https://cdn-images-1.medium.com/max/2400/1*PGcWow7rw0fppvtOsZGoLg.png" small external />

👉🏼 [How to get assets and specs from Avocode](https://help.avocode.com/getting-started/step-5-inspect-get-assets-and-specs-in-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.

<Image src="https://cdn-images-1.medium.com/max/2400/1*F2lNWBXMWgoy5A8Qh_gkRg.png" small external />

👉🏼 [How to comment on design in Avocode](https://help.avocode.com/import-and-manage-design-files/view-inspect-and-comment-on-designs/comment-on-designs-in-avocode)

##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.

<Image src="https://cdn-images-1.medium.com/max/2400/1*2vcEwB9F6VNA0b2pfoV6Kw.png" small external />

👉🏼 [How to add a new design file to Avocode](https://help.avocode.com/import-and-manage-design-files/design-import/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.

<Image src="https://cdn-images-1.medium.com/max/2400/1*0EO3b73zQUh3WcKrHeqXEQ.gif" small external />

👉🏼 [How to add a new design version in Avocode](https://help.avocode.com/import-and-manage-design-files/versioning/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](https://avocode.com/signup).

If you liked this post, you also might like [The process behind building Avocode features](https://blog.avocode.com/how-we-come-up-with-what-to-build-next-for-avocode-4c25452752e2) and [2018 review: Avocode 3, SDK, 48 updates and more](https://blog.avocode.com/2018-review-avocode-3-sdk-48-updates-and-more-5bff9acf7be9).

A deep dive into 5 core features that help all designers and front-end developers efficiently collaborate and turn Sketch, Adobe XD, Photoshop, Illustrator or Figma designs to code faster with Avocode.

5 things you should know about Avocode

5 things you should know about Avocode

Thanks to you, Avocode will be four years old in January (since the launch of v. 1.0). All those years have been thrilling, but this year was the most exciting so far.

I think of Avocode as the underlying solution for teams that take screen design seriously. Doing business as Software as a Service is hard and takes a lot of responsibility. We need to ship fast and reply promptly.

##Avocode stats and news from&nbsp;2018

- We have shipped [48 product updates](https://avocode.com/changelog) (most in our history). If you deduct holidays, that’s almost one update every week.
- Our released updates contained 28 features that were specifically requested by our community members.
- We have started supporting 3 new formats ([Figma](https://blog.avocode.com/introducing-a-new-integration-to-import-figma-design-frames-into-avocode-c295e783317a), [Adobe XD](https://blog.avocode.com/avocode-app-now-integrates-with-adobe-xd-cc-2e684f1d179), and [Adobe Illustrator](https://blog.avocode.com/how-to-open-adobe-illustrator-design-files-online-126774fc1785)).
- We were the first design hand-off tool to support [Adobe XD on Windows](https://blog.avocode.com/good-news-for-all-adobe-xd-windows-users-new-avocode-integration-here-2c09358279aa).
- We started supporting [Sketch, XD, and Figma prototypes](https://blog.avocode.com/cover-your-sketch-xd-and-figma-prototyping-workflow-in-one-place-2c6e5629f930).
- For the first time ever we have offered a design hand-off tool that works without plugins and design tools.
- We have improved our design file processing performance (~10x), desktop app launching performance (~3x), and design view performance (~3.2x).
- We managed to unify our product and marketing visuals.
- Finally you can import new designs and sync versions from Dropbox
- [Support for Adobe Illustrator file format](https://avocode.com/adobe-illustrator). We actually became the first design hand-off tool to support AI.
- Plugins for Sketch and Photoshop have been completely rebuilt and are much faster now.
- Customer Support Satisfaction Rate averaged 99%.
- Customer ticket response time averaged 10 minutes.
- Our API uptime was 99.9839% and our processing uptime 99.9425%.
- Our [web](https://avocode.com/) traffic has doubled.
- Month over month user growth was the fastest yet.


##Product and marketing are working more closely than&nbsp;ever

With the release of Avocode 3 we have been able to unify our design across product and marketing and introduce a new look that is cleaner, flat on the product site and supported with creative illustrations on the marketing site.

<Image src="https://cdn-images-1.medium.com/max/1600/0*qBMsFsA1VO6W5ZbN.png" small external />

It may seem strange that the year when Apple releases the Dark mode and so many tools like Sketch launched it as well, we switched to White. But don’t worry, you can still use the Dark theme if you want. You see, Avocode was ’Dark’ since its inception (before it was cool) and many users have requested the opposite.

##We were working with top talent from the design/dev community

After successful collaboration with various illustrators on our [2017 UI Design Report](https://avocode.com/design-report-2017), we have started working with some of them more closely (as seen on our [homepage](https://avocode.com) or our [SDK page](https://avocode.com/sdk)). The 2018 Design report is currently in the works and you can expect it sometime during the winter. Additionally, we have started with design interviews on our blog and we had a few hits just right of the bat — for example we had a talk with [the most followed person on Dribbble](https://blog.avocode.com/mike-creative-mints-getting-influenced-by-new-trends-slows-down-your-growth-as-a-specialist-ed2fae5ba0f0), [AI interface designer](https://blog.avocode.com/whats-it-like-to-design-for-the-future-of-transportation-and-consumer-ai-with-gleb-kuznetsov-7af1317fc22), [senior designer from McKinsey](https://blog.avocode.com/self-promotion-is-everything-says-senior-designer-at-mckinsey-company-315711d126fa), or [Janis — the talented illustrator](https://blog.avocode.com/hand-drawing-is-the-most-important-skill-for-a-designer-says-janis-andzans-b1b84937043a) who worked on illustrations for Facebook, Harvard University and our new homepage.

##The technology was, is, and will be key for&nbsp;Avocode

When we started this venture, we were just trying to improve our personal workflow. Years ago, when we had a small digital agency, we hated preparing designs for development. Especially, redlining and spec’ing was a pain in the a**. Unlike other design hand-off tools on the market, we have bet everything on red: technology.

<AdsBanner />

We knew that we could either compete with other plugin-based solutions that are dependent on third party APIs, or we could build our own solution — a parsing and rendering infrastructure. It’s our great pleasure to have released it in spring 2018 along with the most sophisticated version of our product yet — [Avocode 3](https://blog.avocode.com/introducing-avocode-3-worlds-first-truly-cross-platform-design-hand-off-tool-b204d518e07f). Our rendering is invisible to the user but does all the magic when you’re simply dragging a design file in any format to an Avocode project like you’re used to. But that’s just the beginning.

##Leveraging our technology

As the design space evolves, teams all around the world are facing one giant problem — design format incompatibility. For example, think about an enterprise that is using various design tools in various teams, but needs one central design system to keep everyone in sync. Or think about products that need to import and display design files (to present them, or to connect layers in a prototype, work showcase fonts, etc.), but they can’t because most design formats are not easily readable or incompatible with some operating systems.

At the end of the summer, we have answered these issues by announcing [Avocode SDK](https://avocode.com/sdk) — a platform agnostic solution to make design files accessible to everyone — in any product. A few forward-thinking companies have already contacted us and we can’t wait to build great things together in 2019.

<Image src="https://cdn-images-1.medium.com/max/1600/0*6FoYNQ_ixPvIVeNI.png" small external />

This year has really confirmed that our bet on technology paid off and allowed us to become more competitive. Next, we plan to keep improving our cross-platform solution for design hand-off as well as explore new areas of the screen design workflows that we could improve.

##New teammates, new office, more efficient workflows

It was not just our product and our technology that have evolved. Six talented people have joined our team which was one of the reasons to move to a bigger office in the heart of Prague, Czech Republic (where most of our team is based). We have done a lot of improvements in customer support, DevOps, and in-house Q&amp;A which has helped us release more stable updates. Speaking of updates, our releasing workflow has gotten more streamlined, which has allowed us to release an update almost every week of the year.

<Image src="https://cdn-images-1.medium.com/max/1600/0*gOKvKZ0PhXNL7tBR.JPG" small external />

All this has called for new processes. We have found out that 14-day sprints are not good for us and cut them down to a week. In terms of planning, our Marketing went from using Gitlab to Dropbox Paper and back to Gitlab. We have given more responsibility to dedicated team leaders and started syncing with them during regular meetings. While this might sound obvious and maybe even boring, for us it’s new. Our team has reached 30 people which is kind of a breaking point when these processes become necessary, and you need to be extra careful not to get flooded in Wiki’s, meetings and sprint plans. We have started to make [calculated decisions about priorities on our product roadmap](https://blog.avocode.com/how-we-come-up-with-what-to-build-next-for-avocode-4c25452752e2) and the result of this effort should be evident already at the beginning of 2019.

##What’s next?

We will keep working on local processing of designs. This means that opening design files will be significantly faster (up to 3x) faster processing for PSD files has already been released; XD and Sketch will follow. We’re also working on full support for Figma files — so you could export images from Figma designs in Avocode. To see what’s next feature-wise, keep checking our [product roadmap](https://avocode.com/product-roadmap).

As mentioned, we have done significant improvements in our DevOps and backend architecture. In 2019, we hope to be ready to offer Avocode for companies that need to keep their design data within their walls. So you can look forward to offline and private cloud options.

Last but not least, we’re aiming to focus much more on UX and performance. We know your time is precious so we want Avocode to be the best assistant for you when dealing with designs. We’re also starting a special program for people who would like to regularly (monthly) test our product and report UX issues. If that’s something you might be interested in, check our [Slack community](https://community.avocode.com/) during the first week of January 2019.

An annual review of our favorite updates and statistics from the past year. In 2018, we shipped Avocode 3 - the new generation of our product, 48 products updates, support of three new formats (Figma, Adobe XD, and Adobe Illustrator) and more.

2018 review: Avocode 3, SDK, 48 updates and more

2018 in Review: The journey and stats of Avocode

How do you prototype your web designs and mobile apps?

Do you use a dedicated prototyping tool or have you shifted your prototyping workflow to a primary design tool like Adobe XD (maybe you even voice-prototype? 🔊), Sketch, or Figma?

Based on the feedback from our users we found out, that more than 50% have already made the shift — for example from InVision to Sketch.

So we got curious: **Are other designers also embarking on prototyping in primary design tools?** To find out, we shared a [little survey on Designer News](https://www.designernews.co/stories/97702) a month ago.

So far, we have collected 162 answers. These are the results:

<Image src="https://cdn-images-1.medium.com/max/1600/1*m1uJb1lX6bgyYjVQ-Qpe4g.png" small external />

While these results surely don’t represent the whole design community, it’s evident that Sketch, XD, and Figma have recently gained traction in the UI design prototyping market and have become direct competitors to dedicated prototyping tools.

Just like designers, developers also prefer using fewer tools that can cover most of their workflow. Who doesn’t right?

Some design tools are even stepping into the design hand-off game, by providing a sharing link to design specs. However, in this workflow the front-end developer still ends up with:

- One link to the design prototype,
- One link to specs,
- A lot of hand-coding — e.g. because design tools currently don’t generate customizable code output
- A lot of miss-communication — e.g. when the designer forgets to mark some layers for export in the design tool, the developer has to ask for it, the designer has to correct it in the design tool, update the link and send it again. If they lose their patience, developers ask for the entire design file, and have to open it in the design tool.


> So instead of making multiple tedious steps in the design to code workflow, we wanted to offer ONE LINK — that would cover everything.

We wanted to extend the amount of work that you can cover in Avocode.

Avocode could already read and import all the design file data so the developer wouldn’t need an extra design tool. The only information that we were missing, were the relations between screens. While it’s handy to get specs and assets without design tools, the developers were still missing the context — especially when it came to more complex files — like a Sketch design with 30 connected screens.

Finally, we have added the information about connections between screens and hotspots for Sketch, Adobe XD, and Figma files.

<AdsBanner />

Today, we’re proud to introduce to you the [re-imagined design-prototype-to-code workflow with Avocode.](https://avocode.com/flow)

- It still doesn’t matter who imports the design prototype — it can the designer, developer, or someone else in the process.
- You don’t need design tools to open design prototypes in Avocode.
- You can share ONE LINK that leads developers (or anyone else) straight to the preview of the prototype. By clicking through connected screens and hotspots everyone understands the flow first. And because Avocode generates a unique link for any artboard, you can navigate your colleagues to any point in the flow.
- Developers can switch straight to specs in the Inspect mode from any artboard of the flow… or straight to the Comment mode, where they can discuss feedback and clarify things about the design.


Here’s how it works:

<Video small src="ITU9rY0N52w" />

Along with the whole Sketch file, Avocode imports also the relations between screens, both connections between hotspots and also entire screens (currently only Adobe XD and Figma have this feature).

Additionally, when you set some artboard as the Home screen (Sketch and XD) or the Starting frame (Figma) you can play the flow from the start, even when you have more of them (currently only Sketch has this feature).

👉🏼 Just click on the [link](https://app.avocode.com/view/d22814bf85694b4e926ccdb3a80753de/_/prototype/), to click through a demo.

<Image src="https://cdn-images-1.medium.com/max/1600/1*PcJqf2GJCcEIURkjV560EA.png" small external caption="Audit UI Kit — courtesy of <a href='https://www.behance.net/yogeshscas' target='_blank'>Yogesh Rajendhiran</a>" />

This update is our first step to cover prototyping as the essential part of your workflow. We plan to improve it over time but to do it right, we need to know what feature you need the most. If you’d like to help us make Avocode even better, please share your feedback regarding prototype hand-off on <a href="mailto:team@avocode.com">team@avocode.com</a>.

Preview your Sketch, Adobe XD, and Figma prototypes in on place with Avocode, and see how your entire design workflow is connected before you start coding. Click through connections and comment on point.

Cover your Sketch, XD, and Figma prototyping workflow in one place

Play your Sketch, Adobe XD, and Figma prototypes with Avocode

With every new update, Adobe XD strives to make the work of designers a bit easier and smarter. The latest release is no different, however, the benefit for designers is not as visible as usual. So, what’s the big news? This time, Adobe XD opened up their integration for 3rd party tools also on Windows.

While Avocode remains the only design hand-off tool that can import XD files directly by drag & drop — without design tools and on any operating system — we understand that sometimes you don’t want to leave your favorite design tool environment to hand-off designs. Starting today, you can sync XD artboards to your team in Avocode just by pressing CTRL + ALT + E and selecting a project.

All you need is the latest [Adobe XD app](https://www.adobe.com/products/xd.html) (btw, it’s free) and the latest [Avocode desktop app](https://avocode.com/download).

<Image src="https://cdn-images-1.medium.com/max/2400/0*zWABqArXOJ5MXgGy.gif" small external>

Avocode imports the whole Adobe XD document by default. If you’d like to select artboards that **should not be synced**, add a dash “-” or an underscore “_” prefix to your artboard name.

##5 reasons to share your XD files to developers via Avocode

##1. Designers save time on preparing asset and describing specs
If you’re new to [Avocode](https://avocode.com/) — it's a tool for turning designs to code faster.

Unlike other design hand-off tools, Avocode doesn’t force designers to mark layers for export before syncing the design. We’re using a custom rendering technology that displays the whole layered design inside our app. This approach gives the developer complete access to layers, layer groups and of course — image export.

<AdsBanner />

##2. Developers can toggle layers and batch-export bitmap images (even from the repeat grid)
With Avocode layer panel you can hide layers, for example, to reveal what is beneath overlays.

1. Hide layers that you don’t need at the moment to see what is below them.
2. Select multiple layers (in this case from the repeat grid), either from the layer panel or by clicking on the canvas and holding the SHIFT key.
3. Hit Export.
4. If you want to batch-export layer separately, just uncheck “Merge layers”.
5. Adjust the format (PNG, JPEG, SVG, WebP) and edit scale.
6. Rename each image asset to your liking.
7. Hit Export.

<Video src="9a3vpvXRyuo" small />

##3. Developers can edit export path and change image format for each asset
Avocode gives you an option to set (and always change) platform (Web, iOS, Android) and export path on the level of projects or subfolders. While all children designs automatically inherit these default settings, you can always change it on the level of the design or for each and every asset.

For example, while your default **Web** Project settings predefines **CSS** code, units in **px**, and colors in **HEX**, and for example an export path to folder in **Users/matt/Desktop/testing**, on the level of the design, you can change the code to **Sass**, units to **pt**, colors to **RGBa**, and during image export edit the export path to **Users/matt/Desktop/testing/img/icons** and change the image format **from PNG to SVG**.

<Video src="aAw4ZxTHh5s" small />

**Tip:** *If some object like a logo consists of multiple shapes, you can select them by dragging over the canvas and exporting them together (Merged), still as SVG.*

##4. Developers can change code language and adjust the code output to fit their dev stack syntax conventions
Avocode currently auto-generates code from layer styles to CSS, Sass, Stylus, Less, SCSS, CSS in JS, Styled Components, Swift, Android and React Native. Just like with color format and units, default code export is pre-set by the Project settings, however, you can always change it on the level of the design.

Each code language can be [adjusted](https://help.avocode.com/app-settings/app-preferences/change-code-preferences-and-customize-code-output-in-avocode) to your conventions and also with [variables](https://help.avocode.com/assets-and-specs/get-code-and-styles-from-layers/how-to-create-or-import-variables-and-replacements-rules-to-avocode).

Below, you can see an example of a developer inspecting a shape with a gradient hiding comments in the Android code.

<Video src="HJvT7eWs8cM" small />

There are many other features, that can speed up the process of bringing a design to code, such as:

- [automatic image export optimization](https://help.avocode.com/assets-and-specs/export-and-scale-images/avocode-image-asset-export-optimization),
- [creating slices](https://help.avocode.com/assets-and-specs/export-and-scale-images/slice-tool),
- [getting measurements and dimensions](https://help.avocode.com/assets-and-specs/measure-sizes-and-distances/measure-tool),
- [picking colors](https://help.avocode.com/assets-and-specs/pick-colors/pick-and-export-color-codes),
- [Visual Studio Code integration](https://avocode.com/integrations/visual-studio-code#how-to-install),
- or the [Atom integration](https://avocode.com/integrations/atom).

##5. Both developers who need to inspect and stakeholders who need to comment can quickly navigate between screens and versions
No matter what XD artboard you’re currently inspecting you can quickly switch to other artboards from the name breadcrumbs or to previous versions from the version number drop-down.

<Video src="xpWXXkq1q7A" small />

When you’re commenting on a design, you can do the same, plus you can change versions with the version slider. Each comment is design-version specific and will keep showing on all versions until you solve it.

Learn more:

[About Avocode version control system](https://help.avocode.com/projects-and-designs/design-organization/avocode-design-version-control-system)
[About the technology that makes it possible to import designs directly and access layers in Avocode](https://blog.avocode.com/introducing-new-adobe-xd-integration-for-windows-linux-macos-and-the-web-7160699f98c)

Just a quick reminder, all you need to share and inspect XD documents via Avocode is:

the latest [Adobe XD app](https://www.adobe.com/products/xd.html) (btw, it’s free),
and the latest [Avocode desktop app](https://avocode.com/download).
If you don’t have an Avocode account yet, you can [create one for free here](https://avocode.com/signup/pro).

If you’re using Adobe XD, you can now sync your XD artboards to Avocode just by pressing CTRL + ALT + E and selecting a project. This way, you do not have to leave your favorite design tool to deliver designs to development.

Good news for all Adobe XD Windows users: New Avocode integration here

 The Avocode Integration with Adobe XD comes to Windows

What is a Design overview? 
D-e-s-i-g-n s-y-s-t-e-m-s. Everyone is talking about them, but are they really that big of a deal?

To find out, we have conducted research specifically around Design Systems — we have collected over 400 responses from the design community and this is what we have found out:

- Only **18%** of respondents already use a Design System, while **54%** of respondents **currently use only a style guide** (mostly in the form of a separate design file).
- The top 2 things that teams do (or want to) document in **style guides** are **fonts (90%)** and **colors (85%).**
To help developers create consistent stylesheets from the design and speed up the way they create selectors, we have built a new feature that we call the **Design overview**.

- It's kind of a style guide on the level of the design screen (artboard).
- It lists all **fonts** (including font-size) and **colors** that appears right next to the design.

**Here’s how Design overview works:**

1. When you inspect an artboard (Sketch, XD, Figma) or a whole file (PSD) in Avocode, select the artboard in the layer panel or click out of the design canvas. Then you can pick one color or a font, click on “Show layers”, and all layers with this style will be selected both on the canvas and in the layer panel.
2. If you hold the **ALT**key and click on a layer in the layer panel, the design canvas will automatically reposition so you can see it.
3. When you’re using the Design overview, you can also select a **font** and click **View in Typekit** or **View on Google Fonts** in the dropdown to get to the respective font file in the browser so you can copy the CSS rules to specify the font family.
4. When you select a color, you can transform it to a [code variable](https://help.avocode.com/assets-and-specs/get-code-and-styles-from-layers/how-to-create-or-import-variables-and-replacements-rules-to-avocode).

<Image src="https://cdn-images-1.medium.com/max/2400/0*hOoVev6MPHIL7dlS.gif" small external />

The **Design overview** currently works on the design file level only for PSD designs and for Sketch, XD, Figma it works on the level of artboards. Next, we’d like to expand this feature to the level of the file (for all formats), and then we’d like to add ever more sophisticated features to generate [style guides and UI kits](https://avocode.uservoice.com/forums/277080-feature-voting/suggestions/8797150-tool-to-create-styleguides-and-ui-kits-from-the-de) to help you quickly create code components from design objects.

But we want to do it right, so if you can spare 2–3 minutes, please **[fill in this survey](http://r.avocode.com/design-systems-survey)**. The more answers we have, the more relevant and helpful the feature will be for you.

<AdsBanner />

##Preview designs from Avocode on mobile devices
Nowadays, design hand-off, inspecting and coding is still tied to desktop based workflow. Therefore, the fully-featured Avocode experience (inspecting, commenting, file management) is available only in our [desktop app](https://avocode.com/download) (macOS, Windows, Linux) and [in the browser](https://app.avocode.com/) (Chrome, Firefox, Safari). Optimizing the whole feature set for all devices, screens and across all browsers is not possible at the current stage. To keep moving forward we sometimes have to make difficult decisions like [abandoning support for 32-bit systems](https://avocode.com/changelog) that are being used less and less. On the other hand, whenever we see an opportunity to enhance the user experience, we do it. Here’s an example:

<Image src="https://cdn-images-1.medium.com/max/2400/1*YdYEeXRSmiNb_GXZOKVF1g.gif" small external />

We have figured out a way to **preview design files** that you access via an Avocode link on **mobile devices and in browsers that were unsupported until now**. Not only can you look at the design, but you can also switch between its versions.

**Why is this great news?**

- When someone sends you an Avocode based design via Slack or e-mail, you can **have a look at it** no matter the device and instantly understand the context of the conversation.
- The method that makes this possible will make it very easy for us to build **design preview integrations**. Very soon we’ll be bringing you JIRA and Dropbox paper integrations that will be followed by many others so you can plug Avocode design previews into your favorite tools.
- Next you will be able to add comments in both the mobile preview and in the embeded player integration.

##Navigate faster between screens and versions
While opening all design file artboards in one view is currently possible only for PSD files (for Sketch, XD, Figma it’s coming later this year), we wanted to give you a quick option to navigate between design screens.

To go to a different artboard (Sketch, XD, or Figma) in the same design file, just click on the breadcrumbs design name in the Inspect mode or in the Comment mode.

When it comes to PSD, PNG and JPEG files, the name dropdown will lead to other PSD, PNG or JPEG files in the same parent project or project subfolder.

<Image src="https://cdn-images-1.medium.com/max/2400/1*eVK9cpEH-oPmf_Hu-1q_mA.gif" small external />

There is also a new faster way to **change versions**.

Versions are no longer hidden in a separate tab in the left panel, but the version number now appears next to the artboard/design name. When you click on it you can see a list of all versions and easily switch between them.

The new version dropdown works both in the Inspect mode and in the Comment mode (there you can also use the version slider).

<Image src="https://cdn-images-1.medium.com/max/2400/1*mYii0exQzujrxlkJvrnFAQ.gif" small external />

**You know best what suits you best**

If you'd like to give [Avocode](https://avocode.com/) 3.1 a go, there's nothing easier than [trying it out](https://avocode.com/signup) on a project. Let us know what you think.

Oh and if you'd like to help us build more sophisticated style guides and design system management in Avocode, [just tell us more about your workflow](http://r.avocode.com/design-systems-survey), so we do this right.

With Design Overview in Avocode, you can create consistent stylesheets and see all fonts, including font-size and colors listed right next to your design. Learn more about how the Design overview in Avocode works. 

Meet Design overview - the first step to design systems in Avocode

Meet Design Overview - the first step to Design Systems in Avocode

Are you running on macOS? Do you want to collaborate on your Sketch files with people who are on different platforms — such as Windows or Linux? It all comes down to what you need to do.

**Need other designers to edit your Sketch file on a different OS?**

The only way to date to edit a Sketch file on Windows and Linux is to open it in a different tool (like Figma or Adobe XD) which will irreversibly convert the Sketch file into a different format — so there is no way of going back if someone else would like to pick it up in Sketch again.

**Need developers to open and inspect your Sketch file on a different OS?**

**When it comes to developers**, they don’t really need to **edit** the file. They just need to **open it, inspect it and export assets** for the project they are building, right?

**So, how do developers tackle this?**

Well, if they are on Mac, they can buy the Sketch app (and pay for a tool which has been built for designers, not developers).

When they are on Windows, they can only work with Photoshop and Illustrator designs, so they will ask the designer to somehow hack and convert the [Sketch design to Illustrator.](https://blog.avocode.com/blog/how-can-you-turn-sketch-to-adobe-illustrator)

<AdsBanner />

And if the developer is on [Linux and can’t run Illustrator in Wine](https://www.youtube.com/watch?v=amCuGfkGmzI) he can ask the designer to export all images for him, send color codes, attach a PNG of the entire design and eyeball the sizes and distances.

Whatever works, right? Right, if you’re like me not satisfied with these options, you might want to keep reading.

##Share designs via a cross-platform tool built for designers and developers

If you want developers to open your file, store it in cloud, and still be able to download the original Sketch file (in the Sketch format) — [**Avocode**](https://avocode.com/) is the way.

It is a tool for sharing and inspecting Photoshop and Sketch designs — not just on Mac, but also on Windows, Linux and in the browser (Chrome). We’ve built it as a bridge between designers and developers — one can seamlessly share designs and the other can inspect and export assets without limitations. When it comes to the Sketch design format, there are a few things you might like:

- Upload Artboards directly from the Sketch app with a CMD + J shortcut (or drag & drop the whole file into Avocode).
- Your team will be automatically notified via e-mail or Slack
- You can upload multiple [design versions](https://help.avocode.com/projects-and-designs/design-upload/add-a-new-design-version) and keep them together
- Anyone on your team will be able to open and [inspect the file](https://help.avocode.com/projects-and-designs/design-view/design-view-inspect-mode)
- The developer can [export any layer](https://help.avocode.com/assets-and-specs/export-and-scale-images/export-layers-as-images) at any resolution directly (You don’t have to **bother with pre-setting Exportables** or **renaming layers** with special symbols like + * & or&nbsp;.png.)
- You can also [share the design via a public link](https://help.avocode.com/team-and-sharing/share-designs) and let others [comment](https://help.avocode.com/team-and-sharing/comment-and-give-feedback/add-a-new-annotation)


**This is how Avocode helps teams all around the world:**

<Video src="1LGaba1KVJA" small />

##How to share a Sketch design via Avocode?

All you need to share a Sketch design via Avocode is the [Sketch app](https://sketchapp.com/) and the [Avocode app](https://avocode.com/). Just [sign up here](https://avocode.com/), download and install the app. It will automatically install a Sketch plugin to your Sketch app.

Next, open any&nbsp;.sketch design in the Sketch app. If you want to upload only particular artboards, **select them with the SHIFT** key and hit **CMD + J.** You can also go to the window menu bar to **Plugins**, select Avocode and click on **Export Selected Artboards**.

<Image src="https://cdn-images-1.medium.com/max/2000/1*Vf_BJDTpvknUnfZ42fq_UQ.png" small external />

If you want to upload all artboards from this Sketch file to Avocode press **CMD + ALT + J**.

<Image src="https://cdn-images-1.medium.com/max/1600/1*YaDpGBnxWiVesSh50otueQ.png" small external />

Your Avocode app will automatically open and you will be [**Create a new project**](https://help.avocode.com/projects-and-designs/design-organization/create-a-new-project). If you already have a project in Avocode, just select it from the projects dropdown menu (above the green **ADD TO PROJECT** button).

<Image src="https://cdn-images-1.medium.com/max/1600/1*Po-gvGFf2Nx6-OxxJ1ZFzA.gif" small external caption="[EDITED]: The shortcut CMD + E has been replaced with CMD +&nbsp;J." />

You can keep working in Sketch during the design upload which syncs quietly in the background.

**NOTE**: *We realize there can be situations when you have a Sketch design on your computer but don’t have the Sketch app to open and upload the design to Avocode. Therefore we’re working on technology to parse and render the Sketch design, so you would be able to upload the Sketch file to Avocode directly without Sketch — just drag and drop. Stay tuned; it’s coming soon.*

By this time, also make sure [your fellow developer is invited to your Avocode team](https://help.avocode.com/team-and-sharing/manage-your-team/invite-a-new-member), so he/she can comment and inspect the design once you upload it.

##One more&nbsp;thing…

Do you really love Sketch? 💎 Need to convert Photoshop files to Sketch? We just released a **Beta of a [free online PSD to Sketch Design Converter](https://avocode.com/convert-psd-to-sketch)**.

Are you running on macOS? Do you want to collaborate on your Sketch files with people who are on different platforms — such as Windows or Linux?

How to handoff Sketch Artboards and assets to developers — no matter their OS

##1. Export any layer without “Making Exportables” (and yes, there is batch export)
**Add variants and change image format and resolution**

Select a layer, a selection of layers or a layer group and hit export. When it comes to single layers, you can also double-click.

- Everything is automatically exportable. No need to set layers as Exportables in Sketch, rename them in Photoshop or mark them for export in XD.
- Feel free to add as many variants of the exported image as you need.
- Choose different scale (choose anything up to @4x or type in your specific resolution) for each asset.
- Choose a different format (JPG, PNG, SVG, WebP) for each asset.

<Video src="Z45DQJZ3lOI" small />

**Rename layers and export multiple assets at once.**

- Hold the SHIFT key to select multiple layers at once.
- Uncheck “Merge layers”.
- Feel free to rename each image asset, change its resolution or format.

<Video src="ZmJd1_lLHoc" small />

##2. Inspect nested Symbol components with overrides
Sketch Symbols look and behave like a normal layer — even with color, or text overrides or resize rules.

- If you need to access Symbols master, just click on Open Symbol and the master version will open in a new tab.
- Symbol Overrides work with designs that are imported directly to Avocode or with the Avocode Sketch plugin v. 50.0.0 and higher.
- There is no limit to how many nested Symbols you can have. You can click through them pretty much indefinitely.

<Video src="ODUoYfSPmak" small />

##3. Adjust the exported code output (in 10 languages)
While inspecting the design, click on the cogwheel below the code panel. Choose any of the 10 currently supported code languages and click on “Code settings”.

- Show/hide comments
- You can customize the code template by selecting (show/hide) or dragging the properties below to reorder them in the code output.
- Use the **Advanced settings** to: change color format or unit (CSS, CSS in JS, React Native); choose a selector type — class, id, element (CSS); change mixin libraries for Less (Less Hat), Sass (Compas, Bourbon), Stylus (Nib) and SCSS (Compas, Bourbon), wrap styles in a shape element or an item element (Android)

<AdsBanner />

- To access these settings from anywhere, either press a **CMD/CTRL + ,** shortcut or click on the avatar in the top right corner of your Avocode windows bar and select “**App preferences**” and switch to the second tab called Code.
- To customize the code even further, you can create or [import a list of your own variables](https://help.avocode.com/assets-and-specs/get-code-and-styles-from-layers/how-to-create-or-import-variables-and-replacements-rules-to-avocode), that will be synced across all designs in one particular project.

<Video src="NCRD2Tug93k" small />

##4. Flexible Project settings and Design settings
We’re trying to give you as much flexibility as you need.

**Change project settings**

When you create a new project you can adjust the project settings, but of course, you can always come back and edit them later.

- Rename a project at any time.
- Change interface measurements units, color format, and code export language.
- Change default code language for all children designs.

<Video src="rr_WNKcEBHs" small />

**Adjust Design settings.**

All children designs automatically inherit project settings, however, you can always change them for each file.

- Rename the design file at any time.
- Change the measurement units, color format, default code export language (even on the level of artboards inside a design file).

<Video src="f8XEaBtYnic" small />

##5. Move designs between projects and subfolders
Select one or more design files, click on Move to and select a project or a subfolder.

- You can also create a new project while moving a design.
- Note that you can only move whole design files (not individual Sketch, Adobe XD artboards or Figma frames which would cause conflicts when syncing new versions).

<Video src="I1kDosZAK4k" small />

##6. Pre-set export path in the desktop app
Once your project is created, your Export path will be pre-set by default to your Download folder.

**Change the default export path in the App preferences.**

<Video src="dNUHcOaCQEc" small />

**Change project export path for all children designs.**

<Video src="uI67StotbVI" small />

**Change export path for any asset in the design**

Even though you have a preset default folder for exported assets for the whole project, you can always change individually each time you actually hit export while inspecting the design.

<Video src="W8PADKCGmBU" small />

##7. Zoom in and out on the design canvas
Just hold CMD (macOS) or CTRL (Windows, Linux) and scroll up/down to zoom in/out.

- You can zoom smoothly by one percent at a time between 20% and 1000%.
- You can also enter a precise value like 76% in the zoom input in the bottom right corner.

*Tip: Hold the SPACE key or use the hand tool to pan around the canvas.*

<Video src="kePQ-eb482Q" small />

##8. Search designs and subfolders from anywhere
Whether you’re in the Project manager, Inspect mode, or the Comment mode, you can always press **CMD + F** (macOS) or **CTRL + F** (Windows, Linux) and start typing what you’re looking for.

- Switch between the currently open project or all projects.

<Video src="-9iJ5kwfw5M" small />

##9. Go straight to the design file from various places

**Open design from in-app upload notification.**

- Just click on the bell icon, and then click on any design file name that was recently uploaded.

<Video src="F316kHGFd7U" small />

**Open design from the Activities sidebar.**

- Open a project to see the Activities panel. If you click in the area of a particular notification you’ll be taken to the design file location (in the case of Sketch and XD files you’ll see artboards).
- If you click directly on the design artboard preview, the artboard will open in the Inspect mode.

<Video src="7iOUdOf9zqQ" small />

**Open design from a Slack notification.**

- Make sure you have connected the Avocode project or your entire team in some [channel in Slack](https://help.avocode.com/account-settings/notifications/integration-of-slack-notifications). Whenever there is a new design version or a new comment synced to Avocode, you’ll be informed in this channel.
- Click on the Slack notification and you’ll be taken to the opened design file in the Avocode Project manager.

<Video src="82kDghSRMSw" small />

##10. Hit SPACE to preview designs before opening them
Preview helps you browse designs without opening them. Select a design thumbnail in the Avocode Manager and hit the **SPACE** key, you will get a preview of the design without the need to open it.

- Switch between a full preview — “**Fit to screen**”, or an “**Original size**” preview.
- Use arrows to navigate between artboards.

<Video src="KRsFP6bpsaM" small />

There are many reasons people love using Avocode: powerful inspect mode, team collaboration, design management, and many hidden features that can rapidly improve your workflow. In this article, we cover the 10 most important ones.

10 things you might not know about Avocode

10 power-user Avocode features you might not know about

After 3 years from launching Avocode 2.0 we’re extremely excited to launch the Avocode 3 — the new generation of our product with **new features that were requested 2,722 times**. We're grateful for all these tips and your activity in pushing our product further!

However, you might be wondering, why did it take so long to build?

>We wanted to answer the call of many designers and developers who need to hand-off, open and inspect design files in various formats without depending on design tools.

To offer such solution, we had to rethink the way how people access design files. To be completely independent on design tools while offering a way to access the design files contents on any operating system, we needed to build a **new universal design format called Octopus and also a custom Monroe rendering engine.** This project is finally at the stage when it can power the new Avocode.

The new rendering comes hand in hand with advanced codebase and significantly improved performance.

###Design loading looks and feels different
- We have changed the way the design is rendered the first time you open it to minimize the number of requests on our server. Your designs now load up to 10x faster both on the web and in the desktop app.
- We have redesigned the design loading state, to show you a design preview as soon as possible.
- Sketch artboards are now processed in parallel, therefore when you want to access artboards that were already processed you don’t have to wait for the rest of the file.

###Moving around the canvas is faster
- We have deployed a new version of our design view codebase, and the result is smooth panning, zooming and scaling.

##1. New look with the Light theme
Before we dive into all the new features, we’d like to unfold our new UI look. Just press **CMD/CTRL +**, to open **App preferences** and choose if you want to use Avocode in the old **Dark theme** or the new **Light theme**.

<Video src="WuIS-m0B2cY" small />

We hope the new Light theme will give you more clarity and focus on the contents of your projects. If you open the Avocode Project manager (picture above) you can see that we’ve also added a new Activities panel that helps you track design changes and comments.

The new lighter look is accompanied by a facelift of our brand and new illustrations you can see on our [homepage](https://avocode.com/).

Once you decide which theme you prefer, let’s see what can you do with the new Avocode.

##2. Import Sketch files without the Sketch app

<Image src="https://cdn-images-1.medium.com/max/1600/0*4Xs7FeHhVmih34IG." small external />

Whether you’re on Windows, on Linux or macOS without the Sketch app installed on your machine, you can now import Sketch files to Avocode just by drag and drop.

It even works in the browser at [https://app.avocode.com/](https://app.avocode.com/). 💥

Once the file is imported, you can inspect all layers, and export any layer as an image asset. You don’t need any plugins or preset the layers as Exportable.

<AdsBanner />

Sketch Symbols with overrides and resize rules are displayed correctly in any artboard so the developer can inspect them as any other layer. There is also an option to click through nested Symbols to access the master version without the override.

☝🏼 **TIP:** *You can of course still use the **Sketch plugin** if it fits your workflow better than drag & dropping files. Thanks to our rendering technology, the Sketch plugin no longer has to deal with too many actions and is significantly faster. (The plugin is automatically installed with our [macOS desktop app.](https://avocode.com/download))*

##3. Import Adobe XD files on any operating system

<Image src="https://cdn-images-1.medium.com/max/1600/0*jHZZ_O8bOJBzoxjW." small external />

Thanks to the Monroe rendering we’re now able to [directly import and render layered Adobe XD files](https://blog.avocode.com/introducing-new-adobe-xd-integration-for-windows-linux-macos-and-the-web-7160699f98c) on **Windows**, Linux or macOS — even if you **don’t have Adobe XD app** installed on your machine. It works just like with Sketch or PSD files.

##4. Import Figma frames and turn them to code faster

<Image src="https://cdn-images-1.medium.com/max/1600/0*2eehN-yIGmoW1o_7.gif" small external />

We have worked with the amazing Figma team to connect Avocode to their platform. Thanks to their API it’s now possible to [import Figma design frames to Avocode!](https://blog.avocode.com/introducing-a-new-integration-to-import-figma-design-frames-into-avocode-c295e783317a)

The integration works both from Figma web and desktop app and always launches Avocode web app so you can assign designs to a particular project. Then you can inspect layer styles, measure, pick colors, and take advantage of the Avocode [code export in 10 different languages](https://help.avocode.com/assets-and-specs/get-code-and-styles-from-layers/export-css-swift-android-react-native-code-from-design-layers-in-avocode) and [customized code output](https://help.avocode.com/app-settings/app-preferences/change-code-preferences-and-customize-code-output-in-avocode).

Toggling and exporting layers is currently limited since we cannot receive full layers through their API. This feature might be added later on.

##5. View Photoshop artboards together

<Image src="https://cdn-images-1.medium.com/max/1600/1*ShPGc9g49ssNBYmdfiWmUA.png" small external />

Thanks to our improved Photoshop parser it’s now possible to display Photoshop Artboards together in one design view — both for inspecting and commenting on the design.

☝🏼**FYI:** *We’re working on a way that would enable us to display Sketch and Adobe XD artboards together in one design view as well.*

##6. Import a list of variables to any project

<Image src="https://cdn-images-1.medium.com/max/1600/0*69tpwhLJ6PO2AMNI.gif" small external />

If you’re using variables in your dev stack we’ve got good news. Now you can [import a list of your currently used variables](https://help.avocode.com/assets-and-specs/get-code-and-styles-from-layers/how-to-create-or-import-variables-and-replacements-rules-to-avocode) to any design and they will be automatically accessible from all designs in this project and synced with the rest of your team. Whenever a particular value of the variable — such as a color — appears in the design, it will be automatically replaced with the variable in your exported code.

You can still create, edit or remove variables, and newly you can also export them.

##7. Align your pixels with the Pixel checker tool

<Image src="https://cdn-images-1.medium.com/max/1600/1*hi6zqsV4SRP7ad1skncvdA.gif" small external />

Pixel checker is a new tool in the Inspect mode which allows you to expand the design in a separate transparent overlay to check it against the coded result.

This feature can help you align your pixels and code the design just as beautiful as the designer created it. Also, when you’re editing a website or a mobile app that has already been coded based on a new design iteration, the Pixel Checker will help you find the differences so you can quickly implement them.

And if you like to be fast, the Pixel Checker [comes with some handy shortcuts](https://help.avocode.com/projects-and-designs/how-to-use-the-pixel-checker-tool-in-avocode).

##8. Invite Guest users to access certain projects
A Guest user is a new Avocode team role. You can think of Guests as Reviewers.

This role is perfect for clients, colleagues, and stakeholders who only need to access specific projects, open designs and comment. You can invite up to 5 ([Company plan](https://avocode.com/pricing)) or unlimited number ([Enterprise plan](https://avocode.com/pricing) purchased after April 4th, 2018) of Guest users at no extra charge.

##9. Adjust privacy and target of sharing links

<Image src="https://cdn-images-1.medium.com/max/1600/1*zvZGE5Fh2IXVt6dTo0ECng.png" small external />

Any Sketch, Photoshop, XD, or Figma design that you have in Avocode can be shared with others. Just open it, hit SHARE and set the target to either inspect, comment, or preview and the access to Only team or Anyone with the link.

If you’d like to share the design with people outside your team, just make the link public and targeting the preview of the design.

##10. Mention others when you’re giving feedback
We have also added a heavily requested feature to enable you to mention other teammates in comments. To mention someone from your team, just use the @ symbol in any annotation or general comment and start writing the name of the person you want to mention.

<Image src="https://cdn-images-1.medium.com/max/1600/1*iuPxRjLIF8vS-KkVXITzOA.gif" small external />

##11. Manage your design files with subfolders

<Image src="https://cdn-images-1.medium.com/max/1600/1*1n8y0fOwvdA09rUThgGEWA.gif" small external />

To create a new project or [new subfolder](https://help.avocode.com/projects-and-designs/how-to-create-subfolders-in-avocode-design-projects) (only in the Company or Enterprise plan) press:

- **CMD + SHIFT + N** (macOS)
- **CTRL + ALT + N** (Windows or Linux)
- **SHIFT + N** (on the web).
You can create an unlimited number of subfolders and pre-set their platform (Web, iOS, Android) that defines measurement units and color formats for all designs files in this subfolders. Also, you can specify a default code language for each subfolder.

All design files automatically inherit the settings of the subfolders, however you can always go back and change it for the subfolder or override it for each design in the Design settings.

**… and a lot of little details hidden under the hood**
Besides this list, there are tens of small features that are barely noticeable but still improve the performance and make the UX more seamless.

##Test it on a project to see if it works for you
It’s one thing to pitch new features, and it’s a different thing to see how they work on a real project.

If you’d like to plug the new [Avocode 3](https://avocode.com) to your workflow and see if it speeds up your team’s work, just [create an account](https://avocode.com/signup) and test all the features during a 14 day free trial with no strings attached.

After 3 years from launching Avocode 2.0 we?re extremely excited to launch the Avocode 3???the new generation of our product with new features that were requested 2,722 times.

Introducing Avocode 3  —  World’s first truly cross-platform design hand-off tool

👉🏼 **TIP: If you want to try the new XD integration right away, just go to [avocode.com](https://avocode.com/) and log in to your account or create a new one.**

Ever since the launch of Sketch, the screen design space has changed for a lot of designers. But there were a lot of creative folks who have been slightly left out — all Windows and the Linux users. Luckily, Adobe has offered a screen design solution that was not just well crafted and surely competitive to Sketch, but also available on Windows.

When Adobe XD introduced their platform to integrate with 3rd party tools, we were excited to be invited to the table. After we introduced the macOS integration in January 2018, our Apple users were happy, but something was missing…

- To import an XD design to Avocode, you needed **to have the Adobe XD app installed** on your machine. Since some people only need to preview the design, get specs and assets — this was a major blocker for them.
- And of course, the integration was available **only to macOS users**.
Soon after the release, we were getting messages like:

<LineQuote>
Why everything is for mac? There are several Windows users who are getting started in UX and use Adobe XD. Do pleaase make this possible, it’ll help a lot of users.
</LineQuote>

And we had to agree. This was evident even from our stats soon after the release. At the time Avocode supported Sketch, PSD, and XD, and only 3% of all imported designs per day on average were in the XD format.

> So we decided to build a new integration, that would enable anyone to import, preview and inspect Adobe XD files also on Windows and Linux and completely independently on the Adobe XD app. It even works on the web, so you can import your files just by using the browser (at best Chrome or Safari).

Only two days after releasing it, the number of imported XD design designs has more than doubled (to 7% of all designs that are imported to Avocode) and continues to grow.

##Would you like to try the cross-platform import of XD files?
Log into your Avocode account at [app.avocode.com](https://app.avocode.com/) or get one at avocode.com/signup and test it for 14 days for free. Then grab any XD file and drag and drop it to any project in Avocode. Once the file is uploaded, you’ll be able to open it and inspect it. If there are some fonts missing, [just upload them](https://help.avocode.com/projects-and-designs/how-to-import-missing-fonts-to-avocode).

##How we learned to read and render the .xd data format
To import designs independently of the design tool, plugins or the operating system, we had to improve our Monroe rendering. Every time we add a new format (currently we support Photoshop, XD, Sketch, and Figma) we need to:

- **Understand how the design is represented** how its file data structure works.
- **Parse the design**, i.e. convert the format data structure into our 🐙 Octopus file format (app-independent design format).
- **Render the design** in the Octopus format so it’s as close to the original as possible — including layout, all named layers, shapes, and text fields.

<Image src="https://cdn-images-1.medium.com/max/2400/0*6gxbMX4gg01WrSoE.png" external />

This approach allows us to provide platform independent design hand-off, but also to give the developer the freedom to have real access to layers — to export anything without having to ask the designer to prepare it for him.

Now, let’s have a look at how the XD file looks under the hood. The data structure of the .xd format is packaged much like a ZIP file. The first step to translating the file to Octopus (our app-independent design format) is, therefore, unpacking the file.

<Image src="https://cdn-images-1.medium.com/max/1600/0*hO3hc9a3BPi-Ze8s.png" small external caption="Adobe XD file structure." />

Adobe XD file structure.
Once we have all the resources (like bitmap images), we start the actual parsing process. First, we pre-process the source data, and then we assemble our own geometric model of the design. Then we convert layer effects, data about text layers, repeat grids, masks, etc.

With each format, there are some data that are easily readable and some are rather tricky. The most tricky part of the .xd format for us is that there is no explicit representation (i.e., position and dimensions) of the **bounding box of objects.**

> The bounding box of an object is extremely important for us, not just to assemble and render the design correctly, but to give the developer the information about sizes and distances between objects while inspecting.

Some formats, like Sketch, give you a number that represents either an absolute or relative position **so calculating the bounding box is quite easy.** XD uses a so-called transformation matrix to depict where each point, shape, curve and so on is positioned. The transformation matrix is a consistent way to represent affine transformations. It uses six values (a, b, c, d, tx, ty) to describe a mathematical combination of the object transformation — such as translation, rotation or scaling.

To calculate the bounding box of an object, we need to first apply the transformation matrices to the underlying objects and then extract the bounds positioned in our coordinate system. This description is consistent with a model used by an open-source JavaScript library [paper.js](http://paperjs.org/) that we’re using to calculate the bounding box of each layer and also the layer group.

<AdsBanner />

This way when you click on individual layers or select multiple layers in [Avocode](https://avocode.com/) — you always know the right size of the selected object. The size is shown in our [Measure tool](https://help.avocode.com/assets-and-specs/measure-sizes-and-distances/measure-tool) as well as in [auto-generated code](https://help.avocode.com/assets-and-specs/get-code-and-styles-from-layers/export-css-swift-android-react-native-code-from-design-layers-in-avocode) that you can pick from any layer.

While trying to figure out the transformation matrices in XD, we stumbled upon a few curious cases:

For example, when you draw a simple rectangle in Adobe XD, this is how it’s represented in the .xd format.

<Image src="https://cdn-images-1.medium.com/max/1600/0*j8wDQxV8XQY2JeoW.png" small external />

It looks quite readable, right? OK, let’s rotate this rectangle.

<Image src="https://cdn-images-1.medium.com/max/1600/0*I0dwtIvg0DDHH45S.png" small external />

And things start get more complicated, when you rotate each layer, group the whole thing and then rotate a bit more. You might expect that in this case, you’ll have three different representations of the object position: 1) red rectangle, 2) blue rectangle, and 3) the whole group. Well, yes, and no.

<Image src="https://cdn-images-1.medium.com/max/1600/0*VTg4pAbnYS7tlNn8.png" small external />

There are indeed three different representations of the coordinates, however, also the pivot point (the default center point how the rotation is calculated) is changed.

One more challenge worth mentioning is a gradient fill on a vector shape. You surely know that a gradient is set by sort of a linear curve that represents the direction from point A to a point B — like this:

<Image src="https://cdn-images-1.medium.com/max/1600/0*5FYj1ADUGaBwLjXB.png" small external />

A gradient is just a property of fill, which is a property of a shape (the layer itself). Regarding the data representation, you can think of a gradient direction as a temporary helping object.

The tricky part is when you change the direction (and angle) of the layer with the gradient, or even when you rotate the whole shape. In both cases the A and B points of the gradient’s direction change. This has forced us to create a new geometric model that would calculate the temporary helping object’s coordinates and keep them with the layer’s data at all times.

##How do layered XD files look inside Avocode? The same…
Now that we have parsed the design format, it’s time to represent it visually. To do that, we’re using our custom **Monroe rendering engine.** It’s a set of sub-systems, each is responsible for a part of the design — design layout, vector shapes, text layers, and layer effects and all of them work side by side thanks to our orchestrator — the core of the rendering engine.

The trickiest part of design rendering is text layers. We’re using an open-source library called [Free Type](https://www.freetype.org/), that is also used by Linux or iOS to render fonts. It’s rather old but works pretty well. The challenge is when the design tool that has created the design (like Adobe XD) is using a different font rendering library. For example, when there is a different method to do type anti-aliasing, there could be little differences in how the rendered result differs from the original 〜 up to 1%.

> However, in 99% of all cases, the result of our Monroe rendering looks just like the original.

See for yourself:

<Image src="https://cdn-images-1.medium.com/max/2600/0*6VES1tZZS2RZstmp.png" external caption="Navigo Transportation UI Kit for Adobe XD, by Aurélien Salomon
" />

Navigo Transportation UI Kit for Adobe XD, by Aurélien Salomon
We believe that true design to code collaboration should not be blocked by different platforms. Therefore we keep developing the Octopus (our universal design format) along with our Monroe rendering engine to create one platform that gives people access to a wide range of design formats — without having to own the actual design tool. At the moment we can directly import PSD, XD, and Figma designs on any platform, and Sketch designs on macOS.

##What’s next?
Releasing the cross-platform Adobe XD integration has verified that our updated Monroe rendering can deliver close to 100% design rendering accuracy. Therefore, we’re excited to announce, that in a matter of weeks, we’ll be releasing a new **Sketch integration!** It will allow our users do the same as with XD — to import Sketch designs on Windows, Linux, macOS, or the web — without the Sketch application installed on their machine.

Up next, we’re planning to release our all new [Avocode 3.0](https://avocode.com/update-3-0) in a brand new coat. And then? Then we’re also planning to add a feature to play Sketch and Adobe XD prototyping flows in Avocode.

Stay tuned and [check out Twitter](https://twitter.com/i/notifications) for updates.

Ever since the launch of Sketch, the screen design space has changed for a lot of designers. But there were a lot of creative folks who have been slightly left out — all Windows and the Linux users.

Introducing new Adobe XD integration for Windows, Linux, macOS and the web

Would be nice if you can upload your Figma design to Avocode. Figma is a new design tool which is very similar to Sketch,** but Figma is web-based, has Windows and Mac, apps and multiplayer editing**.”, said the Avocode user who first suggested integrating with Figma back on Oct 10, 2016.

Ever since then we have dreamed of integrating with Figma and thanks to Figma Web API we’re super excited to tell you that the moment is finally here. Let us give you a quick tour of how the integration between Figma and Avocode works…

##How to import Figma designs into&nbsp;Avocode

Go to Integrations and select Avocode.

<Image src="https://cdn-images-1.medium.com/max/1600/1*p65urS556r1A_gu83YIJqg.png" small external />

Once you click “Avocode” the integration will be enabled. You only need to enable the Integration once, and the option to export your frames to Avocode will always be there — no matter which Figma file you open.

Then select one or multiple frames and hit CMD + SHIFT + E or go to File/Export.

<Image src="https://cdn-images-1.medium.com/max/1600/0*5l5TEgX4StbF_gvR.png" small external />

👉🏼 *NOTE: If the frame you’re syncing is on a different Page of the same Figma file, it will be added to a new design file in Avocode. To keep frames together in Avocode, we suggest having them on one Page in Figma.*

Click on the “Image” dropdown and select Avocode.

<Image src="https://cdn-images-1.medium.com/max/1600/0*pG3AxLH6kBynoAd7.png" small external />

As you switch to Avocode the frames you have selected will be listed below.

<Image src="https://cdn-images-1.medium.com/max/1600/0*lpaeq530Xxvq5Uvz.png" small external />

Click Export and Avocode will open in a new tab of your browser.

👉🏼 *NOTE: If you have multiple teams in Avocode, make sure to switch to the right one first, and then sync the design from the start.*

Select a project where you want to import this design.

<Image src="https://cdn-images-1.medium.com/max/1600/0*Elc7bKK7jQKi5rk2.png" small external />

**NOTE:** If you already had a Figma file with the same name in the project, the design will be added as a new version.

If you’d like to know more about how to import designs, please visit our [Help Center](http://help.avocode.com/projects-and-designs/how-to-import-figma-designs-into-avocode).

##… and now it’s time to inspect your Figma frames in&nbsp;Avocode

There are many things that will ease your design hand-off, coding, collaboration, versioning and more.

<Image src="https://cdn-images-1.medium.com/max/1600/1*9zB5LM_d-V4ts9N0878KFQ.png" small external />

**Measure sizes and distances**

Select a layer to find out its precise size and hover over other layers to see distances. You can also select multiple layers at once.

**Pick colors**

Switch to the Color Picker tool and then click on any layer to automatically copy the color code. Web projects have colors pre-set as HEX, Android projects as HEX8, and iOS projects as UIColor. You can change the color code at any time between these codes as well as RGBa or HSLA. If you press and hold your mouse, you’ll get a looking glass to select precise pixels to pick colors from.

**Export code from layer styles**

Avocode currently generates 10 different code languages from layer styles: CSS, Less, Sass, SCSS, Styled Components, CSS in JS, React Native, Android, and Swift. Once you click on a layer, it’s styles will be translated into code which will be displayed in the right sidebar. You can change the code language at any time. There are also multiple ways to [customize the code output](https://help.avocode.com/app-settings/app-preferences/code-preferences), and you can even [create variables from certain properties](https://help.avocode.com/assets-and-specs/get-code-and-styles-from-layers/variables-and-replacements-rules).

<AdsBanner />

**Slice the design and export bitmaps**

You can use the Slice tool to cut out any part of the design and export it either as a JPG, PNG, or WebP image. You can move the selected area of the slice anywhere and also create multiple slices by selecting them while holding the SHIFT key and exporting them at once. To get rid of a selected slice area, just select it and hit DELETE.

##You can also share designs, comment and keep versions in&nbsp;sync

**Share designs via private or public links**

You can share a public link with anyone or you can share a private link with people from your team only. You can also set the target of the link — either Inspect mode, Comment mode or the Preview mode.[ Learn more](https://help.avocode.com/team-and-sharing/manage-your-team/share-designs-via-public-or-private-links).

**Comment on designs**

Everyone in your Avocode team with access to the design, as well as people with the public link to the design, can open the design in [Comment mode](https://help.avocode.com/projects-and-designs/design-view/design-view-comment-mode). There you can start a discussion either about the whole design (via General comments), or on a specific point (via pinpoint Annotations), or on a specific area (via area Annotations).

<Image src="https://cdn-images-1.medium.com/max/1600/0*xamsb5dp4xGC6lzx." small external />

**Keep design versions from Figma in sync**

If you change a Figma frame and then sync it back to Avocode, it will automatically be added as a new version to the previous design. This way your team always knows which version is final. Then you can [switch between the versions](https://help.avocode.com/projects-and-designs/design-organization/avocode-design-version-control-system) chronologically — in both Inspect and Comment mode.

##How to try the new Avocode integration with&nbsp;Figma

All you need to do is to log in to your [Avocode account](https://app.avocode.com/) in the browser and open [Figma](https://www.figma.com/).

If you’re new to Avocode, just [sign up](https://avocode.com/signup) for a free trial and see for yourself if you find Avocode helpful. Avocode also works with Sketch, Adobe XD, and Photoshop files — on all platforms. Also, make sure to check out our [upcoming major update Avocode 3.0](https://avocode.com/update-3-0).

Since this is the first version of Avocode with the support for Figma designs, please let us know at <a href="mailto:team@avocode.com">team@avocode.com</a> if you’re experiencing any trouble or have ideas for improvements.

Would be nice if you can upload your Figma design to Avocode. Figma is a new design tool which is very similar to Sketch...

Introducing a new integration to import Figma design frames into Avocode

We strongly believe that design hand-off should be smooth — no matter the design tool you’re using. Therefore we couldn’t be more excited to tell you that Adobe XD CC now integrates with [Avocode](http://avocode.com/). After months of a fruitful cooperation, we’re ready to release the first version of Avocode which supports the xd file format.

##It’s time to add your Adobe XD documents to&nbsp;Avocode

We wanted to bring you this integration as soon as possible. It’s packed with functionality that will help you turn designs to code faster. Let’s have a look.

- **At this moment, the integration only works on macOS and requires you to have Adobe XD CC (version 4.0 or newer) installed on your machine.**


##3 ways to import a&nbsp;.xd file into&nbsp;Avocode

Before you do so, please make sure you have saved the XD document.

**1. Open Avocode and drag &amp; drop it into a project**

Avocode will automatically detect if Adobe XD app is installed, and if yes, it will launch it, and import the&nbsp;.xd file.

<Image src="https://cdn-images-1.medium.com/max/1600/0*LSEGRse4wDV1B70K.png" small external />

**2. Open Avocode and press +ADD DESIGN in any project**

Browse to select the design file you wish to upload. Avocode will automatically detect if Adobe XD app is installed, and if yes, it will launch it, and import the&nbsp;.xd file.

<Image src="https://cdn-images-1.medium.com/max/1600/0*zYGMvnAhRb-6dvKK.png" small external />

**3. Open the design in Adobe XD app and go to File/Export/Avocode**

Avocode app will be launched and import the xd file into your project.

<Image src="https://cdn-images-1.medium.com/max/1600/0*NJTzPv6OJ-XUkBJc.png" small external />

*Tip: You can also use a shortcut **CMD + ALT + E**.*

Avocode imports the Adobe XD document by default. If you’d like to select artboards that should not be synced, place a dash “-” or an underscore “_” in front of the name of the artboard.

[Learn more about how the Adobe XD integration works](http://r.avocode.com/adobe-xd-cc-helpcenter).

##How to inspect designs created within Adobe XD in&nbsp;Avocode?

There are many things that will ease your design hand-off, coding, collaboration, versioning and more.

**Export any layer as image asset**

Thanks to our new Monroe rendering engine, you can export all layers (**without marking them for export inside Adobe XD**), scale vector shapes, hide layers, and export multiple layers at once. Here are supported image formats:

- PNG
- JPEG
- [SVG](https://blog.avocode.com/the-best-way-to-export-a-clean-svg-from-sketch-designs-1d8af00c12ee)
- WebP


You can also **toggle layer visibility** or **rename assets** when you're exporting them. If you're using the Avocode desktop app, you can [set the path for export to a specific folder](https://help.avocode.com/app-settings/project-settings/change-project-export-path). On the web all assets are exported into your download folder.

**Measure sizes and distances**

Select a layer to find out its precise size and hover over other layers to see distances. You can also select multiple layers at once.

**Pick colors**

Switch to the Color picker tool and then click on any layer to automatically copy the color code. Web projects have colors pre-set as HEX, Android projects as HEX8, and iOS projects as UIColor. You can change the color code at any time between these codes and also to RGBa or HSLA. If you press and hold your mouse you’ll get a looking glass to select precise pixels to pick colors from.

<AdsBanner />

**Export code from layer styles**

Avocode currently generates 10 different code languages from layer styles: CSS, Less, Sass, SCSS, Styled Components, CSS in JS, React Native, Android, and Swift. Once you click on a layer, it’s styles will be translated into code which will be displayed in the left sidebar. You can change the code language at any time. There are also multiple ways how to [customize the code output](https://help.avocode.com/app-settings/app-preferences/code-preferences) and you can even [create variables from certain properties](https://help.avocode.com/assets-and-specs/get-code-and-styles-from-layers/variables-and-replacements-rules).

**Slice the design and export bitmaps**

You can use the Slice tool to cut out any part of the design and export it either as a JPG, PNG, or WebP image. You can move the selected area of the slice anywhere and also create multiple slices at once, select them by holding the SHIFT key and export them at once. To get rid of a selected slice area, just select it and hit DELETE.

**Share designs with a public link**

You can get a public sharing link to any design that has been uploaded to Avocode and share it with anyone.

**Comment on designs**

Everyone in your Avocode team with access to the design as well as people with the public link to the design are able to open the design in the Comment mode. There you can start a discussion either about the whole design (via General comments), or on a specific point (via pinpoint Annotations), or on a specific area (via area Annotations).

**Keep design versions from Adobe XD in sync**

If you drag and drop an updated document from Adobe XD above an existing design from Adobe XD in Avocode, it will be uploaded as a new version. Then you can [switch between the versions](https://help.avocode.com/projects-and-designs/design-organization/avocode-design-version-control-system) chronologically — in both Inspect and Comment mode.

**Download original files**

Avocode also works as a cloud service. All Adobe XD documents that are synced to Avocode can be later downloaded.

*Please note that all of these features also work with other supported formats (Adobe Photoshop and Sketch).*

##How to try the new Avocode integration with Adobe XD' CC?

All you need to do is to update your [Avocode macOS desktop app](https://avocode.com/download) and get the latest version of [Adobe XD](http://www.adobe.com/products/xd/features.html).

If you’re new to Avocode, just [sign up](https://avocode.com/signup) for a free trial and see for yourself if you find Avocode helpful.

Since this is a first version of Avocode with the support for Adobe XD CC, please let us know at <a href="mailto:team@avocode.com">team@avocode.com</a> if you’re experiencing any troubles or got ideas for improvements.

After months of cooperation, we’re ready to release the first version of integration with Adobe XD. We believe you should not be limited by the design tool just to open and inspect a design file - with Avocode all you need is a browser.

Avocode now integrates with Adobe XD

{\rtf1\ansi\deff0{\colortbl;\red248\green248\blue242;\red40\green42\blue54;\red255\green121\blue198;}
{\fonttbl{\f1\fmodern JetBrains Mono;}{\f2\fmodern Hack;}}

\s0\box\cbpat2\cb2\cf1\fs20
\cf1
\f1
\i0\b0

Okay, Google: How do I open a Sketch on\u8230?\line

\line

<Image src="https://cdn-images-1.medium.com/max/800/0*6tNbnRoBBbE8hvrY.png" small external />\line

\line

\u8230? or without Sketch app? We\u8217?ve got good news. You don\u8217?t have to search any longer.\line

\line

**From now on, [Avocode](https://avocode.com/) enables anyone to import, open and inspect layered Sketch designs on Windows, Linux (yes Ubuntu too), or on macOS without Sketch app. It even works in the browser.**\line

\line

How is this possible? We can [read the Sketch data format](https://blog.avocode.com/how-we-learned-to-read-and-write-sketch-app-data-format-ecf711e19c47), translate it into our app-independent format called Octopus and then render it with our Monroe rendering. Wait, my head is spinning, all I care about is: **Will my design look the same?** Yes, [try it on your own here](https://avocode.com/signup/pro) and see for yourself below:\line

\line

<Image src="https://cdn-images-1.medium.com/max/2560/1*08J5M-SQZ3YEh1ZaSh7NCg.png" external caption="Designed by Filip Gre\u0353?" />\line

\line

**Just to clarify:**\line

\line
\cf3

- \cf1

You don\u8217?t need the Sketch app to import designs to Avocode now.\line
\cf3

- \cf1

You can import a Sketch file to [Avocode desktop](https://avocode.com/download) or [web app](https://app.avocode.com/) from any platform.\line
\cf3

- \cf1

You don\u8217?t need to prepare assets or set Exportables. Since Avocode renders the whole design, you can select and hide layers, layer groups or multiple layers at once, and export them in any resolution.\line

\line
\cf3

##\cf1

Building world\u8217?s first cross-platform Sketch integration was challenging\line

\line

Sketch is currently the most popular screen design tool on the market. It has been disrupting the design tool market ever since its release in 2010. It gained popularity especially because of the early introduction of Artboards; granular smart components called Symbols and its extremely lightweight vector format. Recently it added Libraries for Design System Management and Prototyping.\line

\line

Avocode has been supporting the Sketch app since November 10th 2014. Until now, the only way to import designs to Avocode was [via a Sketch plugin](https://help.avocode.com/projects-and-designs/design-upload/upload-sketch-designs-via-avocode-sketch-plugin) (quite like with other design hand-off tools). Unfortunately, this solution has many setbacks:\line

\line
\cf3

- \cf1

**The person who wants to hand-off and inspect the design is forced to have Sketch. Since the Sketch app works only on macOS, this person by definition has to be an Apple user.**\line
\cf3

- \cf1

It takes too long to upload a design, because the plugin has to send every layer as a PNG.\line

While Sketch offers a great platform for 3rd party developers, its format development and new features pose a lot of challenges for our integration. With every new version of Sketch, we have to check if our plugin works and often tweak it so it would\f2

\u8202?\f1

\u8212?\f2

\u8202?\f1

which is always slowing us down.\line

\line

We have always wanted to be independent on design tools, so we could give designers and developers the freedom to open and access virtually any design format on any platform. However, to do that, we had to build a complete rendering service. We needed to account for every design part representation of the Sketch design format. Even though we learned how to parse and render most of the design format quite quickly, we still needed the Sketch plugin to send us the rest\f2

\u8202?\f1

\u8212?\f2

\u8202?\f1

for example, text layers. Since we had to assemble parts sent by the plugin and parts that were rendered on our side, the result was not always as precise as we would like. The only solution to that problem was to render everything\f2

\u8202?\f1

\u8212?\f2

\u8202?\f1

including text layers and Symbols.\line

\line

<AdsBanner />\line

\line

We have already described some of the obstacles of our text rendering in [our previous article about Adobe XD](https://blog.avocode.com/introducing-new-adobe-xd-integration-for-windows-linux-macos-and-the-web-7160699f98c), so let\u8217?s focus on Symbols now. When you import a Symbol to a particular artboard in Sketch, the layer data are not actually there. The only available reference is the **Symbol Master\f2

\u8202?\f1

**\u8212?\f2

\u8202?\f1

a layer or an artboard containing the Symbol\u8217?s actual data.\line

\line

So when you upload a Sketch artboard via the Sketch plugin to Avocode, we only receive the information that **this is a Symbol** and we get **its Master**. As you might have guessed this gets especially tricky when you want to contextually change the Symbol\u8217?s color (apply an Override) or the Symbol\u8217?s width (apply resizing rules).\line

\line

We had to find a way to recalculate the resizing rules and build a Symbol expander that would expand the Symbols to all of its nested states. This way we can display the Symbol as a normal layer in the [Design view](https://help.avocode.com/projects-and-designs/design-view/design-view-inspect-mode). When you\u8217?re inspecting a button inside the context of a given artboard, you only see the correct layer with applied overrides and don\u8217?t have to bother with the Symbols master.\line

\line

For example, the logo below, which is actually a set of multiple shapes, can be easily selected and exported as SVG.\line

\line

<Image src="https://cdn-images-1.medium.com/max/1200/0*Kf-z7c3J6Yce6YIs.png" external />\line

\line

At the same time, all the layers of the logo are actually nested inside a bigger header Symbol. If you need to access Symbols master, just can click on **Open Symbol** and the master version will open in a new tab.\line

\line

<Image src="https://cdn-images-1.medium.com/max/1200/0*W7f4v0MjnduHEjjS.png" external />\line

\line

Thanks to our Symbol expander we\u8217?re finally able to fulfill the [wishes of our customers](https://avocode.uservoice.com/forums/277080-feature-voting/suggestions/17982586-nested-symbols-this-needs-to-be-addressed). Additionally, the new Monroe rendering has also dramatically sped up design processing, improved Sketch rendering precision and **most of all allowed anyone to have access to Sketch designs without the Sketch app**.\line

\line

Here\u8217?s a list of supported features of the Sketch format:\line

\line

<Image src="https://cdn-images-1.medium.com/max/800/1*avlhug9yYXcg5eo60QhU6Q.png" small external />\line

\line

There are still a lot of things that could be done better to make our design import faster. We\u8217?re also planning to add the long requested **Sketch Grid**, **Layout** and **Guides**, so you know how wide design columns should be while inspecting. Up next we\u8217?d like to give you an option to play **Sketch Prototypes** in Avocode.\line

\line
\cf3

>\cf1

That\u8217?s all cool, but I really just want to open a Sketch designs without the Sketch app.\line

\line
\cf3

###\cf1

Getting started\line

We understand. Just start by [logging in to your Avocode account](https://app.avocode.com/) or [grab a new one here and try the Sketch integration free for 14 days](http://r.avocode.com/2-24-new-sketch-integration-signup?utm_source=newsletter&utm_medium=email&utm_campaign=2-24-product-update).\line

\line

Then open any project and simply drag & drop the designs inside. If you\u8217?d like to add a new design version, just drag & drop it on top of a Sketch file.\line

\line

<Image src="https://cdn-images-1.medium.com/max/1200/1*L78BZvI8ZbzWccz3vbXwkA.png" external />\line

\line

Then just double-click to open the file and double-click on any artboard inside.\line

\line

[You can find out more in this tutorial](https://help.avocode.com/projects-and-designs/how-to-import-sketch-designs-into-avocode).\par}

From now on, Avocode enables anyone to import, open and inspect layered Sketch designs on Windows, Linux (yes Ubuntu too), or on macOS without Sketch app. It even works in the browser

Product Update

How we elevated the design to code workflows in 2020

Introducing Avocode Write - The bridge between copywriting and UI/UX design workflows

How we shipped support for screen flows thanks to Shape Up

5 things you should know about Avocode

2018 review: Avocode 3, SDK, 48 updates and more

Cover your Sketch, XD, and Figma prototyping workflow in one place

Good news for all Adobe XD Windows users: New Avocode integration here

Meet Design overview - the first step to design systems in Avocode

How to handoff Sketch Artboards and assets to developers — no matter their OS

10 things you might not know about Avocode

Introducing Avocode 3 — World’s first truly cross-platform design hand-off tool

Introducing new Adobe XD integration for Windows, Linux, macOS and the web

Introducing a new integration to import Figma design frames into Avocode

Avocode now integrates with Adobe XD

Major update: Open and inspect Sketch designs on Windows, Linux, and macOS