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.

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