Design Tools in 2020: To the Cloud and Beyond

Do you make money online?

So you have a website, mobile app, or a newsletter, correct?

And how did you make them? How long did it take you to design and develop them?

Or, more importantly, how fast can you redesign them?

As Thomas J. Watson, the former CEO of IBM said: "good design must primarily serve people.” Well, since he said that people have become really picky. You surely know that to impress and win attention, you need to ship new digital experiences faster than Zara ships new fashion collections.

This high demand for new, different, better, and more advanced UX has completely changed the world - and the importance of design departments in the past decade.

From our research and calls with hundreds of companies, we found out that engineering is no longer n.1 focus for digital businesses.

It’s design.

The current state of UI design tools

Nowadays, new digital experiences are done mainly in Sketch, Figma, and Adobe products.

To put the importance of UI design into perspective, Sketch just hit 1M paying users milestone. If we consider the UX Tools 2019 survey, Figma has about 60% of what Sketch has in terms of market share and Adobe XD 35%.

There is lots of money to be made in the design tools space.

Design tools are innovating - no doubt about that. But for the end-user, not much has changed… since Sketch came out.

First, everyone copied Sketch - Adobe, InVision, Figma…

Then Figma got a bit ahead.

Now everyone is copying Figma.

While the UI changes slightly based on fresh new features, the designer workflow remains pretty similar. Why? Because design tools are still trying to catch up on what has been known in development for ages.

Take Component states in Adobe XD. Finally, you don’t have to copy whole design states, but you can tell the design tool to show only a different instance. Something that has been known in CSS for a decade is now celebrated in design because designers can finally do things the way they work in code. Same story as with smart constraints or components in general.

How can you ship new digital experiences faster?

UI design tools are going to the web.

If something can be on the web, it will be. The tech stack is ready.

Figma has changed the game with a browser-first design tool.

Adobe XD is saving all your files as cloud documents first - by default.

Sketch is about to do the same as XD in early 2020.

And as Framer says, it’s coming to the web too.

Why is everyone moving to the cloud?

Collaboration. As design operations grow, teams look for one place for all their assets. Suddenly people who are not really pushing pixels need to work with the contents of a design file. New positions are being created all the time - things like Microcopy Specialist, or Delightful Design UX Expert.

All these people need to access the design content, but it doesn’t mean they need the whole file (with all of the exploration artboards) inside a designer-first interface.

No wonder new tools that work with design file content are springing up like mushrooms after the rain, and there is plenty of space for them. Overflow is a good example. Or Avocode, as a matter of fact.

But…

There is still one problem.

Design file formats are almost never compatible when you pull its content outside the parent graphics editor.

As a single freelance designer using Sketch, this is probably not an issue for you. You’re lucky. (Unless you have to work with agencies and fields from various departments of a larger company.)

But if you work in a large company with several design teams, you know what I mean. The connectivity, integration, and compatibility between the major file formats (Figma, Sketch, Adobe XD, Photoshop, Illustrator) is still a big pain.

If team A uses Figma, team B prefers Sketch & Abstract, and team C works with Adobe XD… how can you have a single source of truth for your design system?

How do you maintain such an operation?

Well, you have to hire a maintenance department that makes sure all new things in Figma are recreated pixel perfectly in Sketch.

Considering your organization has a couple of hundreds if not thousands of designers, this can be quite challenging.

And good luck with “shipping fast”.

Larger business realize this and therefore are building internal tools as workarounds to achieve what’s currently impossible in design tools. Since design file formats remain either closed or incompatible with other tools, this is a very challenging process.

But how can your business do something like this across design formats?

For example, if you want to take data out of Sketch files and save them in your Adobe XD-based design system, you would have to write a Sketch parser, Adobe XD writer and keep both up to date as new features like Responsive resize, Artboard guides arrive.

Well, what if someone has already built and maintained that technology to help tools understand each other’s formats?

We did.

And now we’d like to offer it to you - kind of like the Figma API, but for all major design file formats.

What’s coming in 2020 in Avocode?

Avocode’s feature set and infrastructure stability have matured to the extent that every day thousands of teams come to Avocode to collaborate on websites, mobiles apps and newsletters. Our rendering technology reached 99% precision across all currently supported design formats.

With our current dev stack we’re ready to focus on UX improvements and building more advanced features for more demanding teams.

Avocode Cloud API for enterprise customers

After developing Avocode for 5 years, we have built a technology that can:

• Read Sketch, Figma, Adobe XD, AI, and Photoshop file formats - including their latest features like Smart Layout.
• Translate all design formats into one universal file format called Octopus. A simple JSON object that has a representation for pretty much everything that can occur in the aforementioned design formats.
• Render all design elements that appear in these file formats.

We realize that many enterprise businesses that are taking advantage of Avocode design hand-off solution need to automate certain workflows or pull data from design files to do things that design tools interfaces don’t enable (yet).

It’s my great pleasure to announce that in 2020 we’ll be offering our design format parsing technology as Avocode Cloud API on demand to extend your design operation workflows.

Interested in Avocode Cloud API? Learn more

Avocode Private Cloud

We have also built a fully dockerized backend infrastructure that can run pretty much on anything that offers Kubernetes (Google Cloud, AWS, Microsoft Azure…). It meets all of the security market-standards.

If our secure public cloud solution is not enough for your security department, starting January 2020, we’re starting to offer Avocode Private Cloud solution on demand as part of our Enterprise subscription package.

Interested in Avocode Private Cloud?

Shoot an email to my colleague Sam at sales@avocode.com, and he’ll be happy to have it set up for you.

Design embed for your design system

Many businesses are building a design system to ship new experience faster. However, there is no market standard for building a design system yet. Last year we spent a decent amount of time on researching design system workflows, and we found out that the most common format of a design system is a document-like structure with images of particular components. Some companies are building it in Confluence, others in Notion, some in Dropbox Paper, and some build dedicated websites.

Regardless of the form, all business we talked to would appreciate design previews that:

• are scalable - so you could zoom in and pan around
• update automatically as design updates
• can be inserted via link

I’m happy to tell you that we have already built it. We can now provide you with an embed link to any design that lives in Avocode. Here’s how it works:

We believe this feature will help any business that is documenting a robust design system from Sketch, Adobe XD, Photoshop, Illustrator, or Figma designs. We’ll be adding the option to generate embed links to Avocode very soon.

Streamlining more workflows inside Avocode

On the first Avocode website back in 2015 we had a headline:

“The bridge between designers and developers.”

That was the design hand-off part that I believe we’re solving well nowadays.

Now we want to build more bridges inside Avocode, also between

• designers (version control)
• copywriters (text editing)
• UX specialists (prototyping)

🥂 Here’s to building great new experiences

I’m really excited for what is to come soon, and I can’t wait to see what you will build with Avocode in 2020.

Before I wrap up, I want to like to thank and acknowledge my fellow co-founders Petr & Martin and our entire Avocode team. We couldn’t have built all this without you.

By the way, the whole team says hi!