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

Avocode Blog - Big releases, wanted features and product updates

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

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

## Avocode 2020 in Numbers

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

## Top 6 Releases in 2020

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

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

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

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

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

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

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

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

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

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

##Avocode Tools

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

## How did we build Avocode Write?

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

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

**Starting from the research & market fit**

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

**This is what we found out:**

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

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

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

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

**Project scope & technology**

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

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

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

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

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

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

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

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

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

**Text length**

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

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

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

## 1. In-app integration

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

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

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

## 2. Design tool integration

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

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

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

A couple of resource here:

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

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

**Text sync back to the design tool**

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

**Sketch** 

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

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

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

**Adobe XD**

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

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

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

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

**Figma**

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

## So... is Avocode Write public? 

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

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


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


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

So if you're interested in trying this cool tool - reach out to our [sales team](mailto:sales@avocode.com), and we will be happy to set it up for you.

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

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

large_hero.png

medium_hero.png

small_hero.png

thumbnail_hero.png

hero.png

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

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

The most common use case for Avocode is this:

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

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

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

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

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

... and we needed this:

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

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

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

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

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

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

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

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

So what was stopping us?

## Redefining our approach to product development with Shape Up

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

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

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

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

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

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

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

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

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

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

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

**So what is Shape Up about?**

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

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

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

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

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

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

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

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

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

Marker sketches - Showing the flow of the 2 apps.

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

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

**The first trade-off**

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

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

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

**Performance, performance, performance**

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

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

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

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

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

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

## Going across the finish line

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

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

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

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

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

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

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

## What's next?

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

Ever since [Avocode](https://avocode.com/) came to life, its goal has been to help designers and front-end developers from all around the world to efficiently collaborate and turn designs to code faster.

To help you get the most out of Avocode, we decided to point out 5 core features you should know about in this post.

Let’s dive in!👌

##1. Import any design format to Avocode with or without&nbsp;plugins.

Every designer has a different workflow and prefers a different design app.&nbsp;
No matter what design format you want to hand-off to your developer, Avocode can handle it.

**Why designers love importing designs to Avocode:**

- Add **Sketch, Adobe XD, Photoshop, Illustrator, or Figma** files to Avocode directly or with plugins.
- All image assets are automatically ready for developers. You don’t have to set layers as **Exportable in Sketch, mark them for export in Adobe XD or rename them in Photoshop.**
- Your job is done. The developer has everything he needs.

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

👉🏼 [How to add a new design to Avocode](https://help.avocode.com/import-and-manage-design-files/design-import/add-a-new-design-file-to-avocode)

##2. Avocode works in the browser and has a desktop app for all operating systems.
Same as designers also developers have different workflows and use different platforms. It doesn’t matter whether you work on macOS, Windows, Linux or in the browser. Avocode opens all design formats without their parent app installed on your computer.

**Avocode desktop app is available for:**

- macOS 10.11 and higher.
- Windows 7 and higher.
- Linux (The only design hand-off tool for Linux users on the market.)

👉🏼 [How to download & install Avocode desktop app](https://help.avocode.com/getting-started/step-2-download-install-avocode-desktop-app)

**Avocode web app is available for:**

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

<AdsBanner />

##3. Exporting assets and getting specs from Avocode is so simple.
One of the most common tasks for any developer is exporting assets and getting specs needed to turn a design file into the real product. Avocode makes this process so easy and straightforward.

**Why developers love exporting assets from Avocode:**

- **Scale, rename and export any layer** of the design. No need to ask a designer to mark layers for export beforehand.
- A dedicated layer panel gives you **full access to all layers**. You can **select multiple layers, export them** or hide them to see what’s below.
- Choose your format and export layers as **PNG, JPEG, SVG, WebP** or **Base64**.
- **PNG, JPEG, and SVG** are automatically optimized for the web. No need to use an additional service like TinyPNG.

<Video src="Z45DQJZ3lOI" />

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

**Why developers love getting specs from Avocode:**

- Generate production-ready CSS, Sass, Stylus, Less, SCSS, CSS in JS, Styled Components, Swift, Android or React Native code just by clicking on any layer. You can copy particular values, lines of code, or the whole selector.
- Click on layers and measure sizes in **px, pt (iOS) or dp (Android)**.
- Export colors in **HEX, HEX8, RGBa, HSL, and UIColor.**

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

👉🏼 [How to get assets and specs from Avocode](https://help.avocode.com/getting-started/step-5-inspect-get-assets-and-specs-in-avocode)

##4. Explain your design thinking and discuss changes the easy way.
If you’re working with your team or clients and contractors, Avocode is an awesome way to collaborate and push your project further.

**Why people love collaborating in Avocode:**

- Add a comment on any area of the design. Either click on a specific point or highlight the area of your design.
- Mention your colleagues, discuss feedback in threads and solve issues.

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

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

##5. Keep your designs organized and all versions backed up in the cloud.
Avocode makes it easy to organize your designs into projects, but it’s even better when your team knows which design version is the latest thanks to Version Switcher.

☝🏼*Tip: There is no limit to how many versions you add and how many projects you create.*

**Why people love file management in Avocode:**

- All uploaded designs are sorted in projects. You can rename them, search them, change their platform and delete them.
- Choose a project platform (Web, iOS, Android) when creating a project and Avocode will automatically prepare code and specs for the platform.
- Move designs between projects and subfolders to keep them organized.

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

👉🏼 [How to add a new design file to Avocode](https://help.avocode.com/import-and-manage-design-files/design-import/add-a-new-design-file-to-avocode)

**Why people love to keep versions backed up in Avocode:**

- Keep unlimited design version history per each design file.
- Download any version of each file down the road.
- Once you add a new version, everyone in your team is notified and knows this version is final.

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

👉🏼 [How to add a new design version in Avocode](https://help.avocode.com/import-and-manage-design-files/versioning/how-to-add-a-new-design-version-in-avocode)

Are you new to Avocode? We’d love have you try adding your first design and try our features. Grab a [14-day free trial, no credit card is required](https://avocode.com/signup).

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

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

5 things you should know about Avocode

5 things you should know about Avocode

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

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

##Avocode stats and news from&nbsp;2018

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


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

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

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

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

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

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

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

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

<AdsBanner />

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

##Leveraging our technology

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

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

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

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

##New teammates, new office, more efficient workflows

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

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

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

##What’s next?

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

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

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

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

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

2018 in Review: The journey and stats of Avocode

How do you prototype your web designs and mobile apps?

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

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

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

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

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

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

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

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

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


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

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

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

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

<AdsBanner />

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

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


Here’s how it works:

<Video small src="ITU9rY0N52w" />

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<AdsBanner />

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

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

<Video src="9a3vpvXRyuo" small />

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

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

<Video src="aAw4ZxTHh5s" small />

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

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

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

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

<Video src="HJvT7eWs8cM" small />

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

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

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

<Video src="xpWXXkq1q7A" small />

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

Learn more:

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

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

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

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

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

 The Avocode Integration with Adobe XD comes to Windows

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

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

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

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

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

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

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

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

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

<AdsBanner />

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

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

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

**Why is this great news?**

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

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

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

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

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

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

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

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

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

**You know best what suits you best**

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

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

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

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

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

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

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

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

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

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

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

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

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

<AdsBanner />

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

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

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

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

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

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


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

<Video src="1LGaba1KVJA" small />

##How to share a Sketch design via Avocode?

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

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

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

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

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

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

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

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

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

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

##One more&nbsp;thing…

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

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

Product Update

How we elevated the design to code workflows in 2020

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

How we shipped support for screen flows thanks to Shape Up

5 things you should know about Avocode

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

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

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

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

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