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

The Avocode product, as you know it today, is going away at the end of 2022. We’re doubling down our focus on pursuing our mission to unlock design for everyone.

Ceros, a no-code content creation platform for interactive design, [acquired Avocode in October 2021](https://avocode.com/blog/we-re-joining-forces-with-ceros). Not only do we share the same mission with Ceros, but our company values and culture are almost identical. That’s why we’re confident we can create new revolutionary products for the community while offering a smooth transition for our existing customers.

Read more about this change, what’s next, and our exciting free Inspect tool and a collection of Avotars NFTs.

## **Avocode Story**

It’s not easy for us to say goodbye. Over the past several years, together with our users, we’ve transformed the design-to-code space.

When we started, there was no easy way for designers to hand-off their work to their fellow developers. Developers had no way to quickly and accurately inspect designs and extract all assets. Avocode was the first tool to solve this common problem.

But how? To offer our unique solution, we had to first create a way to unlock the design process. We needed to develop a way for everyone to access design files, no matter the design tool or operating system.

And we did it. We invented a universal design format called Octopus, a custom Monroe rendering engine, and built Avocode on top of it. Suddenly, anyone could open designs without having the right design tool or OS.

<Image caption="Avocode Launch, 2015" alt="Avocode Launch, 2015" src="https://cdn.marketing.avocode.com/pupushify-staging/launch_of_Avocode_0875a44cdd.jpeg" external/>

And we went even further by adding collaboration and copy editing features, versioning, and prototype viewing.

This was a massive shift in the industry, and everyone followed us. Today, handoff is not just a word but a core feature in every design tool. We pioneered this movement, and as far as we can see, Avocode alternatives still have a long way to go before they can provide their users with the same quality experience 🥺

<Image caption="Avocode Christmas Party, 2019" alt="Avocode Christmas Party, 2019" src="https://avocode.com/static/images/blog/posts/42/gif.gif" external/>

## **What’s next?**

Avocode product will sunset at the end of 2022. But the [Open Design](https://opendesign.dev/) technology that powers Avocode will live on and prosper. Together with Ceros we will create an entire ecosystem of new exciting tools.

## **Meet Inspect**

We're excited to bring a new and free [Inspect](https://inspect.ceros.com/) tool to the community. 🎉

<Image caption="Inspect tool" alt="Inspect sneak peek" src="https://cdn.marketing.avocode.com/pupushify-production/Inspect_6906fa565e.png" external/>

Inspect enables you to generate code and export design assets for free. This means existing Avocode customers will still be able to hand-off and inspect designs on preferred terms. If you're using Avocode already, you can migrate your design files from Avocode to the new Inspect tool with just a click of a button. **Note**, that this feature is only available in the web app, and it is not possible to move Figma design files. 

<Image caption="How to move your files into Free Inspect" alt="moving to Inspect" src="https://cdn.marketing.avocode.com/pupushify-production/Screen_Shot_2022_09_20_at_15_05_03_67a7a241fb.png" external/>

Of course, we will not stop there. We have an exciting roadmap ahead of us, but we’ll keep it secret for now. If you follow the space - you won’t miss it.

## Avotars NFTs

Over the years, Avocode users formed a strong community. We want everyone to keep a piece of Avocode after its sunset date.

That's why we are happy to present [Avotars](https://avotars.xyz/): a unique collection of 5555 NFT artworks of our cute mascot Avocado. 

<Image caption="Avotars NFTs preview" alt="Avotars NFTs preview" src="https://cdn.marketing.avocode.com/pupushify-production/avotars_de5b8c5af9.png" external/>


## FAQ

###What's going to happen to my subscription?

You can still use Avocode for now. However, we will eventually cancel your account. You will receive a notice with the exact date later this year. All unused time will be refunded in full.

### I want to keep using Avocode for free until its sunset. What should I do? 

If you're paying for Avocode and want to continue using it for free from now on - you can use this [promocode link](https://avocode.com/checkout?promoCode=avocode-sunset) to switch to a free plan and keep all your features. 

###How can I contact support?

Since we’re not actively focusing on Avocode development, we’re stopping to provide technical support. You can email us at [team@avocode.com](mailto:team@avocode.com) to request a refund.

###I am having a technical issue with Avocode. What should I do?

Unfortunately, we will not be able to fix this for you. You can contact us for a refund instead via [team@avocode.com](mailto:team@avocode.com) email.

###I am interested in trying Avocode.

You can still sign up for an account with Avocode. However, we cannot guarantee the same stability and quality of the service anymore. If you're not satisfied with Avocode performance, you can contact us for a refund at [team@avocode.com](mailto:team@avocode.com)

###I am having issues paying for Avocode.

If for some reason you're not able to subscribe to Avocode via our checkout, we won't be able to assist you. 

If you want to use Avocode after your trial expires, we recommend creating a new trial account.

###I have a yearly subscription that expires in 2023. What's going to happen to my account?

Unfortunately, you will not be able to use Avocode after 2022. Our finance team will reach out to you, and issue a refund for the unused prepaid period. 

###What will happen to my projects in Avocode at the end of the year?
You won't be able to access your Avocode account and data from January 2023. You can always download your projects before that date.

Avocode product, as you know it today, is going away at the end of 2022. We’re doubling down our focus on pursuing our mission to unlock design for everyone. 

Sunsetting Avocode. Free version of Inspect is out.

large_Sunsetting.png

medium_Sunsetting.png

small_Sunsetting.png

thumbnail_Sunsetting.png

Sunsetting.png

In 2015 we launched the first public version of Avocode with a simple purpose to make it easier for developers to turn designs into code. It all started with just us trying to solve our own problems, and we never expected it to become a global product used and loved by thousands of companies.

I can't even express how grateful we're to have such a fantastic community of customers, users, supporters, and partners. We wouldn't be here today without you.

Thank you all. We love you! ❤️️

Today, we are excited to announce we are embarking on a new chapter in the pursuit of our mission to unlock design for everyone.

### Avocode is being acquired by [Ceros](http://ceros.com), a no-code content creation platform for interactive design.

## Why Ceros?

When I try to imagine a company where Avocode can continue its mission, Ceros is unquestionably the best team to join.

Not only do we share the same mission to unlock design for everyone, but our company values and culture are almost identical. That's why we're confident Ceros is the right company where our team can thrive.

<Image alt="avocode-x-ceros" src="https://cdn.marketing.avocode.com/pupushify-staging/avocode_x_ceros_73036a89f3.gif" external/>

We quickly realized this back in 2019 when we started working with Ceros on an integration allowing designers to save significant time by converting PSD, Illustrator, and Sketch design files into interactive online content inside the Ceros Studio.

With Ceros backing us, we're planning to accelerate the roadmap of [Open Design](https://opendesign.dev/), creating an open infrastructure that simply doesn’t exist today in the creative world.

With the Open Design API at the center of the Ceros universe, we will be moving towards a unified and universal file format for interactive experiences and removing barriers to unlock creative potential.

> We are insanely excited about the Avocode team and technology becoming part of the Ceros family. Our businesses and cultures could not be more aligned, and our shared vision of the future is palpable. The world at large undervalues the importance of design and creativity, Ceros is determined to change that. Avocode and their Open Design API means we are one step closer to a more connected, open, and impactful design space for businesses and creatives.

<Bio name="Simon Berg" role="CEO of Ceros" image="https://cdn.marketing.avocode.com/pupushify-staging/Simon_Berg_44b3ef1458.jpeg"/>

## What does this mean for the Avocode product?

Avocode product you know and love is not going anywhere right now. We will continue to support all our customers with the same passion that we are known for.

Ceros is retaining and expanding the Avocode team with the focus on leveraging the Open Design API to scale the Ceros Studio further and helping its users increase time-to-value and reduce time-to-market.

### [Learn more about the acquisition](http://r.avocode.com/ceros-x-avocode) 👉🏼

Ceros’ acquisition of Avocode promises to bring a unified and universal file format for interactive experiences and remove barriers to unlock creative potential.  

We're joining forces with Ceros

large_525a3850_min_ccc6a1b8c6.jpeg

medium_525a3850_min_ccc6a1b8c6.jpeg

small_525a3850_min_ccc6a1b8c6.jpeg

thumbnail_525a3850_min_ccc6a1b8c6.jpeg

525a3850_min_ccc6a1b8c6.jpeg

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 Beta

Good copy is essential to driving engagement and conversions. So we’re happy to built Avocode Write, 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, click on text in any artboard, and start rewriting it. Avocode Write 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 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, 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

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?

Before we start adding new features, we need to hear from you. I’ll welcome any feedback at <a href="mailto:josefkettner@avocode.com">josefkettner@avocode.com.</a>

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

large_hero.png

medium_hero.png

small_hero.png

thumbnail_hero.png

hero.png

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. 

Product Update

Sunsetting Avocode. Free version of Inspect is out.

We're joining forces with Ceros

How we elevated the design to code workflows in 2020

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