Read about tips and hacks to make your design workflow and collaboration with others way more efficient. 

Avocode Blog - Design tips, inspiration, and food for thought

Do you know what design trends to expect in design in 2021? See the trends predictions from 13 top designers for the year, and get tips and techniques to put them into practice for your brand.

Design Trends Predictions for 2021 From Top Designers

large_2021_design_trends.png

medium_2021_design_trends.png

small_2021_design_trends.png

thumbnail_2021_design_trends.png

2021_design_trends.png

Design Trends Predictions for 2021

How do you deliver a fantastic work that makes your client happy (ehm, gets you paid) and brings recognition from the design community?

Before you try to come up with some ideas - the best thing you can do is to ask someone who has done it before. However, if you ask just one person in the creative industry, you cannot be sure their tips will work for you. Plus, how do you know who to ask?

> Before you try to come up with some ideas - the best thing you can do is to ask someone who has done it before.

Every other day, I’m checking the Awwwards nominations and wins for the Site of the Day. If you’re designing, animating, or coding websites, you’re surely familiar with it. What’s great about Awwwaards, is that the picked and featured designs are:

- submitted by creators from all over the world
- assessed by various respected design leaders, i.e., it’s a good filter to find genuinely "good work."

And here’s what I did. Together with our design team, I picked some influential design works on Awwwards, and I reached out to them to learn their secret.

> Awwwards picked and featured designs are a) submitted by creators from all over the world b) assessed by various respected design leaders, i.e., it’s a good filter to find genuinely good work.

Though now I work for a product company, I spent a few years in the ad agency biz, and what I’ve learned is that everyone is crazy about winning awards... and every agency has - some client work and some passion/NGO projects they do to win some awards.

Instead of just being curious about "how to build the next Awwwards winning site," I was more interested in **how agencies nowadays fight to keep their clients** and win new ones.

## How do the best digital agencies work with clients?

It’s time to meet the agencies that I asked to spill their secrets on how they work as a team and what is the secret to a healthy client relationship:

- Nok Nok Studio from the Netherlands
- Significa from Portugal
- Obys from Ukraine
- Muskae from Spain
- Cosmos Studio from Ukraine

*TIP: At the end of this post, you can find more information about them, along with examples of their work they were picked for.*

The more messages I exchanged with the agencies above, the more I started to notice patterns that they were agreeing on, even though they didn’t know what I was talking about with the others.

I narrowed down these patterns into 4 actionable principles that seem to be working for them, and I hope they will help you too to keep your clients and optimize your business (not just) during the COVID-19 crisis.

Let’s hear it.

## 1. Always define milestones and goals in the beginning

Nothing is more important that managing expectations on both sides. The sooner you start, the better. Many times, I heard that if documentation is specified before the design phase coding is 2x faster than when there are changes from the client after visuals are done.    

Olia, Marketing Director from Obys, mentioned that every time they meet the client for the first time or have a Skype call, they ask them to fill in the brief. Ilya, the founder of Cosmos Studio, says they dedicate no less than 90 min to the first call with every potential client, and they save their answers in a structured Google Form.

Rui Sereno, Partner at Significa, stressed the importance of getting everyone excited about the project, at best show the client that you are passionate about this.

> If documentation is specified before the design phase, coding is 2x faster than when there are changes from the client after visuals are done.

Significa’s handbook also shows that they include a lot of people from the start (not just some account manager). Namely, it’s the product manager, lead designer, client team, and the whole team of developers who are helpful with setting estimates and can advise you on the feasibility of each milestone.

Tools that were often mentioned for tracking client requirements and documenting were Google Forms, Typeform, and Notion. Many times I also heard that already in the introductory and documentation phase, it’s smart to prepare wireframes and user flows. The most mentioned tools for this were Figma, Sketch, and Balsamic.

*TIP: While setting the project scope, don’t overwhelm the client with too many tools. Your goal is to help them focus on giving you all the necessary details like timeline, expectations, needs, budget, and introduce you to the problem they are trying to solve.*

## 2. Work with others and let them in at the right time

As businesses are becoming more design-centric, there is a strong notion of including more people in the creative process in the hope of building more diverse products. As honorable this effort is, you need to be able to manage all the people who are coming in to participate.

Kike Valdenebro, the partner at the Spanish agency Muskae, says: "When carrying out complex projects that involve various areas of action and multidisciplinary teams, it is essential to use an appropriate set of tools that will speed up the work and allow for correct and rapid communication between all the members of the team." He also pointed out the importance of real-time information systems that allow any team member, including the clients, to know the status of the project at any time.

> Real-time information systems allow any team member, including our customer, to know the status of the project at any time.

The people from Obys also recommend that often there is a time pressure created simply by a few people wearing way too many hats. Their advice? Just drop the juggling act and learn to delegate and hire replacements.

**Collaboration with other agencies is your business opportunity**

Eight years ago, I worked on a project for the Allianz Insurance Group, and at the time, there were 23 agencies taking care of all marketing activities - just in one country! I bet you also have experience working on accounts with other agencies. Please bear in mind that it’s not a competition. If you set up healthy collaboration relationships with other agencies on the account, you might get your hands on new projects/clients through them.

**Don’t look for inspiration where everyone else is looking**

David Ogilvy said that one of the 3 points of recognizing an ad is good, is that when you see it, you wish you’ve done it yourself. This also works in the world of interface design, but with the amount of new digital UIs coming out, it’s much harder to stand out and create that awww feeling.

Do you go to Dribbble or Behance for inspiration to build a hip website? Since this is what most people do, you have low chances that the result will actually stand out. If you don’t want the client or their audience to skim through your designs and say "yeah I’ve seen that somewhere", listen to Olia from Obys: "In our mood board we do not include site of other designers’ or companies, we look for and select the photos of nature, architect, cites, people and some identities or books, magazines."

**Share only what should be shared**

Ilya, the founder of Cosmos Studio, mentioned that to help the client focus at every step of the process, they always prepare a clean "final" design version that doesn’t contain any comments, drafts, or ideas.

During your project, you surely spend a lot of time on research, mood boards, and exploration. It’s not my place to tell you how to do those - you probably know better. But there is one thing I’d like to remind you - be careful with what you share. Whatever tool you’re using, don’t let clients into the projects with your exploration screens. [Pick a tool that has advanced user permissions](https://avocode.com/design-collaboration-for-agencies).

## 3. Invest in automation

**Get rid of communication buzz**

Olia from Obys mentioned that "it would be great to have more time to work on projects because often the client has a tiny timeline and huge amount of ideas about his website. In this case, we have to work as superheroes.

Are you working long hours and still tight on deadlines? Work smarter, not harder. Treat your time as money and find space where you can save. If you look closely, the biggest hole that sucks most of your time in is communication and countless iterations - again mainly caused by communication buzz.

Three tools you need to eliminate communication buzz:

- Share project information with everyone via [Notion](https://www.notion.so/).
- Manage access to design files via [Avocode](https://avocode.com/).
- Set up private [Slack](https://slack.com/) channels for communication with clients.

**Lower the number of iterations**

After you’ve optimized communication and transparency of the project management, there is still room for improvement. Somehow you have to teach the client to provide feedback only at the right time. How do you do that? Don’t forget - it’s you who can define the rules. Follow these steps:

- **Set up frequent milestones** - for example, Significa is checking with their clients on a weekly basis + they have dedicated Slack channels where clients can ask at any time.
- **Avoid slow client response** - define a deadline for review. If you can’t rely on the client, define it in a contract. Implementing every late feedback will bloat the scope of the project. If you’re OK with it, make sure you get paid for extra edits.
- **Find bugs and UX fails early** - set up regular testing sessions, already on wireframes and user flows to discover logical issues/difficulties. Do the same with low and high fidelity prototypes. Don’t trust only internal or client testing sessions. Invest in tools like [usertesting.com](http://usertesting.com/). Rui from Significa reminded me of the benefit of real-coded prototypes: "We deploy a quickly crafted, coded prototype to users, featuring the core functionalities to be validated. It adds-up a few bucks to the budget, but the findings are much more insightful and trust-worthy." I would add another benefit of this approach - you can avoid tedious session scheduling and also install [Hotjar](https://www.hotjar.com/) or [Smartlook](https://www.smartlook.com/) to troubleshoot UX fails. Based on personal experience, I suggest you watch at least 10 recordings in every iteration phase.
- **Automate the rest -** Invest in tools that can replace the roles you don’t need/don’t want to deal with internally. I asked all of the aforementioned agencies about their tool stack, and these were the most popular tools. (Notice it’s not just Adobe CC what they are paying for.)<br/><br/>
    - Online research: Optimal Workshop, Maze, SurveyMonkey, FullStory, Typeform
    - Data analysis: Airtable, Notion, Google Sheets
    - UI design tools: Sketch, Figma, Adobe XD
    - Bitmaps & retouches: Adobe Photoshop, Affinity Designer
    - Animation: Adobe After Effects, Principle
    - Prototyping & Userflows: Avocode, Overflow, InVision
    - Coding: PHP Storm, Postman, Sublime Text, Visual Studio Code, Putty, TightVNC
    - Remote meetings: Zoom, Skype, Google Hangouts

*TIP: As you might have noticed during the COVID-19 times, remote meetings can save you a lot of time, especially if you carefully prepare the agenda, and the attendees respect each other’s time. The great thing about having a call is that you can do them more often, you don’t have to burn time/resources on the commute, and most importantly, more people can join. This way, your creative team can feel as included as every account manager.*

## 4. Clean and professional delivery matters

OK, I know it’s been a long read, but pay attention - this last part will be about how you can bring customers back (retention) and how you can bring in new or bigger ones. This is your time to shine.

**It’s Christmas time**

Think of project delivery as packing a gift. Be on time, and never miss a deadline. You don’t postpone Christmas Eve, do you?

On the day of delivery, make sure you have packed all that you’ve built, so the client really feels the value. A package that will be pleasant to unpack. A simply messy folder can really impact their perception of you being a professional. Organize and name all documents, assets, and outputs.

**Before you send it over...**

Before you send it over, go through the initial project scope description for one the last time (remember, the part we were talking about in the beginning?) and if there were any changes to it or some extra work, clearly describe them, link where the decisions were tracked and show that you were able to deliver extra work.

**What comes next?**

With delivery (and paid checks), the job is not done. You want to do this thing, again and again, correct?

So get this...

**Let the client build on top of what you build but keep room for maintenance**

You can add a lot of extra value. For example, Nok Nok Studio, after delivering the Dutch Digital Design, mentioned that they wanted to "build something that was going to be very flexible for the future".

And they explain: "That’s why we built it on React, using a headless CMS. During the UX phase of the project, the idea came up to develop a tile-structured layout system. The tiles make it possible to be flexible on all devices, yet they give a clean structure for cases and articles. On all devices, we strived to make the navigation between showcases and articles as seamless as possible."

This a stellar example of being mindful and think about the future use of the project. Please do the same - think about mobile, maintenance and modularity.

Speaking of modularity... Here’s what Significa agency considers as part of the deliverables:

- interface map
- prototype
- interactive redlines/specs
- editable files
- **aaaand Design System with neatly named elements**

Giving the client the building blocks is great, but don’t underestimate the value of it - don’t give it away for free. If they can build anything from your components, they might not need you again. So your job is to find value elsewhere.

A year ago, we did thorough research on the Design System - and the n. 1 problem with them was "education and ongoing usage". Don’t worry - your client won’t miraculously just build things the next day after you send the design files. They need you to show them, educate them - and step into the **maintenance** phase (a.k.a. more business).

**Win big through word of mouth**

This is the last tip I’ll leave you with today. You already think of past projects as drivers for new biz - that’s why you do Behance case studies, compete for awards, and build those nice portfolios of yours, right?

Keep doing that. But don’t forget that client satisfaction might be a much better marketing tool that can be created with much less effort than building an animated reel presentation. **The last impression you leave with the client** (i.e., the way you deliver the project) **and the quality of the project, the client will interact with daily makes or breaks future cooperation and recommendations.**

Not only the client will be more likely to come back, but he might brag about you to other potential clients on a Sunday golf course stroll.

## What have we learned?

1. Always define milestones and describe project scope to the utmost detail in the beginning phase to save time on iterations.
2. Don’t do everything on your own. Work with others, but be mindful of what you show them, and you let them into the process.
3. Invest in tools that can speed up/eliminate manual work so you can focus human resources on creative work.
4. Be neat and mindful about project delivery because it doesn’t cost you extra, and it will help you win more business.

Good luck out there! If you have more tips on what works for you, feel free to send them over at [matous@avocode.com](mailto:matous@avocode.com).

## ...as promised - here are the heroes that helped me put this article together:

**Muskae** (Spain) - part of a global creative digital strategy consultancy Good Rebels is building digital applications like websites and blogs, picked for this [Israeli experience agency web presentation](https://www.awwwards.com/sites/pomegranate-travel).

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

**Obys** (Ukraine) - boutique agency and brand identity specialists, picked for their [showreel agency presentation](https://www.awwwards.com/sites/obys).

<Image src="59/02.jpg" />

**Significa** (Portugal) is helping clients build digital experiences "From inception to launch", picked for their clean [company presentation](https://www.awwwards.com/sites/significa), and also their very [descriptive workflow handbook](https://significa.co/handbook/methodology).

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

**Nok Nok Studio** (Netherlands) is focusing on strategy, design, and digital experiences, picked for their exceptional work on the page for [Dutch Digital Design](https://www.awwwards.com/sites/dutch-digital-design) (together with Momkai).

<Image src="59/04.jpg" />

**Cosmos Studio** (Ukraine) - a digital studio creating awesome websites with world-class design, picked for the crazy-animated portfolio of their founder [Ilya Kulbachny](https://www.awwwards.com/sites/ilya-kulbachny).

<Image src="59/05.jpeg" />

Truthfully, I asked many more agencies, but not so many got back to me. If you’d like to share your tips and what works for you, please send them over at [matous@avocode.com](mailto:matous@avocode.com).

How are agencies fighting to keep and win new clients? I asked 5 agencies that won the Awwwards to share their workflow secrets. The result is 4 actionable steps to deliver better client work.

4 Actionable Tips to Deliver Better Client Work from Awwwards Winning Agencies

large_hero.png

medium_hero.png

small_hero.png

thumbnail_hero.png

hero.png

Awwwards winning agencies share client workflow tips for Avocode

Are you a designer who creates both web and mobile apps? Do you like branding, UI, and illustrations? If yes, you came to the right place. We are happy to feature one of the most popular designers on [Dribbble - Mike Creative Mints](https://dribbble.com/creativemints). Check out what excites him about design in 2020.

<Image src="55/1.jpg" caption="MakeReign / Fireart Studio / Futura / Leo Natsume" small />

## Stock vs Custom

One of the main trends in design in late 2019 and without a doubt in the upcoming year is a custom illustration in commercial design. A few years ago, persuading clients to use custom illustrations might take some effort, but today it’s the industry standard. With more and more digital products that are difficult to visualize (blockchain, AI, big data, machine learning), custom illustrations become an integral part of the modern web and UI design.

<Image src="55/2.jpg" caption="Daniel Tan / Illustration" small />

This, in turn, has a big impact on design trends as well. Decorations and heavy graphic elements give way to simple, clean, and easy to understand styles which do a better job at telling a story and framing unique illustrations. Skeuomorphic design is mostly used in game design and rich media these days.

<Image src="55/10.jpg" caption="Netguru Team / Illustration" small />
<Image src="55/3.jpg" caption="Calvin Sprague / Illustration" small />
<Image src="55/11.jpg" caption="Ben Schade / Creative Studio Illustration" small />

I see this trend becoming more and more mainstream in 2020!

## Extensive use of 3D in illustration

<Image src="55/4.jpg" caption="BUCK Design / Anna Kajda / Creative Mints / Prateek Vatash" small />

3D has been increasingly popular in 2019 thanks to numerous Instagram experiments of 3D enthusiasts, but 2020 will definitely be the year of 3D illustration in design! Here is where I can see it being used most:

- Business/corporate illustration
- Geometric primitives, arthouse, experimental illustration
- HiTech and IT-related illustrations
- Illustrations for kids and 3D characters

<Image src="55/5.jpg" caption="Luis Yrisarry Labadía / Typography Alphabet" small />

The reasons for this great trend are cheaper video cards (goodbye cryptomining craze!) and better rendering software products such as Octane, RedShift, and others, which make 3D illustration much easier. I’m sure we’ll see many new artists and great experiments in 3D in the upcoming year!

<Image src="55/6.jpg" caption="Crystal Yumumu / Website Design" small />

The market is dying for new ways to emphasize and illustrate ideas, and 3D is just the right tool here - there are so many ways to reimagine old ideas and experiment with something new!

## And the main design trend of 2020 - Curiosity

Curiosity is taking over the place! When I was starting my Patreon channel this year, I thought I’d be sharing some information most relevant to designers’ daily routine - grids, content design, and interface elements…

<Image src="55/9.jpg" caption="Creative Mints / Website Design" small />

<AdsBanner />

<Image src="55/8.jpg" caption="Creative Mints / Website Design" small />

Boy, I was wrong! I’ve gotten so many questions about how to combine 3D modeling with illustration, how to improve photography skills, invent original characters, how to see and feel your colors, and so much more! Each week we’re discussing so many different topics, and I can see so much curiosity and ambition among the designers these days! A few years ago, you wouldn’t find any 3D software in web designer’s toolset, but today designers learning Cinema4D, illustration, photography, frontend, or animation are everywhere, and I love it!

<Video src="https://player.vimeo.com/video/394147126" isVimeo caption="Creative Mints / Illustration" />

<Video src="https://player.vimeo.com/video/394147288" isVimeo caption="Creative Mints / Website Design" />

Designers today have the courage and determination to step outside the boundaries of their daily work and create something new every day. This is a genuine revolution of curiosity in design, and this wonderful obsession will drive us to so many amazing discoveries in 2020, I guarantee that!

Discover the main trends in design with Mike Creative Mints, a well-known person in the design world, and one of the most popular designers on Dribbble specializing in branding, UI, and illustration.

2020: The Year of Curiosity in UI&nbsp;Design

Designer & Illustrator Mike Creative Mints for Avocode

AI has become an over-hyped buzzword, and the design world is no exception. This article outlines 10 trends of how artificial intelligence will affect UX/UI design in the next decade.

The Future of Artificial Intelligence in Design with Gleb Kuznetsov

The Future of Artificial Intelligence with Gleb Kuznetsov for Avocode

Do you know what design trends to expect in design in 2020? See the trends predictions from top designers for the year, and get tips and techniques to put them into practice for your brand.

Design Trends Predictions for 2020 From Top Designers

large_2020-design-trends-predictions.png

medium_2020-design-trends-predictions.png

small_2020-design-trends-predictions.png

thumbnail_2020-design-trends-predictions.png

2020-design-trends-predictions.png

Design Trends Predictions for 2020

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](https://blog.sketchapp.com/whats-next-for-sketch-in-2020-fbac2317e7b4). If we consider the [UX Tools 2019 survey](https://uxtools.co/survey-2019/), 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](https://www.adobe.com/products/xd/features.html). 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.

<AdsBanner />

## 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](https://www.framer.com/web/), 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](https://avocode.com/), 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.

>Luckily, companies like Figma are opening up to make this possible by providing APIs to request and access design data outside the tool.

**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](https://avocode.com/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](https://avocode.com/cloud-api)

>Whether you’re building a design tool as a service or just internally (for example, to build websites from design files), we can help you read, open, and convert between all market-standard file formats.

### 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](https://avocode.com/security).

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 <a href="mailto:sales@avocode.com">sales@avocode.com</a>, 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:

<Embed src="https://stage-embed.avocode.com/embed/a851fc49602446be8c1ef6e5dc3845d8" />

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!

<Image src="42/gif.gif" />

What can we expect in the Design Tool Market in the next decade? What’s the missing part for seamless cross-team collaboration in the design process? And what’s on the Avocode 2020 roadmap? Read about Avocode Cloud API, Private Cloud, Version Control, and more.

Design Tools in 2020: To&nbsp;the&nbsp;Cloud and Beyond

Future of Design Tools in 2020 According to Avocode CEO

Whatever your current workflow looks like, just the fact that you opened up this article means that you want to improve it… or that you didn’t find all you need to make an informed decision on Stackshare, Slant, Alternativeto.net, Product Hunt, G2, or Capterra (at least that’s what I check when I’m looking for a new tool).

So, do you work with design source files?

Is your team working across various design tools or operating systems?

Have you tried some tools to speed up the process of turn design to code in the past but still looking for something else?

You’ve come to the right place.

This article compares the four most popular tools for design collaboration and hand-off.

Before we get into it, I feel like I owe you a little disclaimer: Though our team is building a tool that is widely perceived as a [Zeplin alternative](https://avocode.com/zeplin-alternative), I didn’t want to sound biased. To give you a fair comparison, I researched and tried all of the tools mentioned in this article in one day. This article reflects their current state and feature set (November 2019).

Ok, let’s start from the beginning.

## What is the Zeplin app?

Are you browsing for Zeplin.io pricing or looking to download the Zeplin app?

Then you probably know the yellow zeppelin app logo that represents a suite of plugins - the popular Zeplin Sketch plugin as well as one for Photoshop, Adobe XD, and Figma - along with a lightweight app for handing off designs and style guides with specs, assets, and code.

Zeplin released the first Beta in September 2014, followed by a 1.0 version in 2015, which included a Sketch plugin for exporting artboards with exportable assets. Later on, it added support for Adobe XD & Figma and recently also style guide generation.

**Workflow with the Zeplin app**

<Image src='41/1.png' />

Once you sign up, you need to create a project and set its platform (Web, iOS, Android, macOS), which predefines code language, measurement units, and color format.

*Note: Project settings cannot be changed once you import designs.*

Then you need to download a desktop app that installs plugins to your design tools. To import a design file, open it in the graphics editor (Sketch, XD, Photoshop, or Figma) select screens and import them to Zeplin via their plugin.

*Note: This is the only way to import designs.*

Zeplin is counting on the traditional workflow: “first, [designers need to set layers as assets](https://support.zeplin.io/en/articles/367379-exporting-assets-from-sketch) in the design file,” so developers could export assets. Zeplin then generates all the necessary images with different scales and formats depending on the project platform you’re syncing the design to. It’s a nice addition to your process if your designers don’t mind going through all images in the file and pre-exporting them for developers so they could work with them.

*Note: Images that were not adequately grouped and set as Exportable in the graphics editor cannot be exported from Zeplin.*

Once your screens are synced to Zeplin, you can share them, open in the browser, comment, inspect, and generate style guides from symbols.

*Note: Zeplin imports a bitmap preview of your design screens in the fixed resolution from the design tool. Zooming and scaling the design beyond its original scale will pixelate it.*

**What can you do with the Zeplin app?**

- import artboards (only with design tools and Zeplin desktop app)
- export image assets that were previously marked as Exportable
- generate code from layers (CSS, Sass, Stylus, Less, SCSS, CSS in JS, Styled Components, Swift, Android, React Native and more if you install add-ons from the Zeplin extension library)
- measure sizes and distances between single layers or layers that were previously grouped (in points, pixels, and density-independent pixels)
- handpick colors in HEX, RGBa, HEX8, HSL, and UIColor
- share designs for review
- comment
- play prototypes
- access artboards version history
- view, share, and inspect symbols
- generate style guides from symbols
- integrate it with Trello & Slack
<br />
<br />

**What will you need to work with Zeplin?**

It depends on what design tool you use or which files you receive for implementation.

- Sketch - you will need someone with a MacBook and the Sketch app to prepare and import design files
- Adobe XD - you will need someone with the Adobe XD app to prepare and import design files
- Adobe Photoshop - you will also have to run Photoshop to prepare and import design files
- Figma - you’re good to go with just a browser

To be able to export designs to Zeplin, for all design formats apart from Figma, you need to download the Zeplin desktop app, which installs respective graphics editor plugins.

Once you import screens to Zeplin, you can inspect them also in the browser.

**How much does Zeplin cost?**

If you want to try Zeplin on one project, you can do so for free. Subscription starts at $19 per month if billed annually ($204) for three projects.

<AdsBanner context="zeplin" />

# The first alternative: Zeplin vs Avocode

[Avocode](https://avocode.com/) first version kicked off in 2015. The initial idea was also to speed up design hand-off by providing one UI where the developer could inspect Sketch & Photoshop designs.

We have continuously talked to our users to find out whether the plugin-based workflow is suitable. Soon, we discovered that it works only for linear workflows where the designer is always at the beginning - he/she finishes the file and hands it over to development. In real life, things are more complicated - files don’t travel one way only, but different stakeholders need to work with them (open them, hand them over, download them, etc.) - and all these people don’t have design tools. In other words, the plugin-based workflow often limits them from participating in the process.

So we made a big bet on the inclusive design process: let’s build an importing (parsing) technology that allows people to work with design files completely independently of graphics editors. Eventually, we managed to develop it not just for Sketch & Photoshop, but also for Adobe XD, Adobe Illustrator, and Figma.

**Workflow with [Avocode](https://avocode.com/)**

<Image src='41/3.png' />

Once you [sign up](https://avocode.com/signup), you can invite your colleagues and stakeholders. Then you drag & drop any design file or sync it via Dropbox.

Note: You can import designs also via plugins. All importing ways are to be found [here](https://help.avocode.com/en/articles/501126-add-a-new-design-file-to-avocode).

Avocode creates a project for your file with a preferred platform (Web, iOS, or Android). Each platform predefines code language, measurement units, and color format.

*Note: You can change project settings at any time. You can also change the code language, color format, and measurement units for each design.*

Once your file is uploaded, you can inspect, comment, and share it with anyone. This applies to all people invited to your project - on all operating systems. To add new design files, create a new project.

The cross-platform design import and custom rendering cuts away preparing assets and allows anyone to export any asset in whatever resolution or format.

*Note: You can also multi-select layers (even across groups) and export the selection as an image asset.*

Thanks to the Avocode rendering engine, you can fully work with layers. Avocode parses the whole design format data structure and renders the entire file, layer by layer, pixel by pixel.

*Note: Vector shapes & fonts are scalable up to 4x in Avocode so that you can see your design just as bright as in the design tool.*

Avocode also comes with advanced version history. With every update of the design file, Avocode creates a new version where you can describe the changes. All team members can navigate between versions and download any design source file back in time. Version Control with conflict resolution for Sketch design is coming soon.

**What can you do with Avocode?**

- import & backup design source files
- export any image asset in any resolution and format without preparations
- generate code from layers (CSS, Sass, Stylus, Less, SCSS, CSS in JS, Styled Components, Swift, Android, and React Native)
- customize code output and define variables
- measure sizes and distances between any selection of single or grouped layers (in points, pixels, and density-independent pixels)
- handpick colors in HEX, RGBa, HEX8, HSL, and UIColor
- see a design overview of styles that multiple layers have in common
- view, share, and inspect Symbols
- access Symbol’s master instances
- share designs for review
- comment with mentions
- play and create clickable prototypes from Sketch, XD, and Figma files (currently in Beta)
- access design file version history
- download source files
- integrate it with [Slack](https://avocode.com/integrations/slack), [Jira](https://avocode.com/integrations/jira), [Confluence](https://avocode.com/integrations/confluence), [Dropbox](https://avocode.com/integrations/dropbox), [Visual Studio Code](https://avocode.com/integrations/visual-studio-code), and [Atom](https://avocode.com/integrations/atom)
<br />
<br />

**What will you need to work with Avocode?**

All you need is just a source file and a browser.

***Tip:** If you wish to sync files via plugins or work offline, the [desktop app](https://avocode.com/download) works on macOS, Windows, and Linux.*

**How much does Avocode cost?**

If you want to try Avocode, there is a free 14-day trial. Subscription starts at $19 per month if billed annually ($180) or $29 monthly for unlimited projects.

# The second alternative: Abstract vs Zeplin

## What is Abstract?

While Zeplin or Avocode started improving design collaboration with tackling design hand-off, the Abstract started with design consistency when it comes to collaboration on the same design files. Abstract was founded in 2015 and pioneered Git-inspired version control for Sketch design files. Later on, it also added a few design inspecting features.

If your team uses Figma or Adobe XD (which recently introduced coediting), you can work on the same design files in real-time. But if you use Sketch and need to collaborate on the same file, Abstract comes in handy. Abstract only supports working with Sketch files and, therefore, is tied to the macOS platform. According to their website, Adobe XD support is coming soon.

*TIP: Avocode and Sketch (currently in Beta) both offer version history so you can roll-back in time. Zeplin offers version history only on screens, but not entire files. Version control with conflict resolution is coming to Avocode soon, first for Sketch, and then for Adobe XD.*

**Workflow with Abstract**

<Image src='41/4.png' />

Once you sign up, you need to download Abstract desktop app. After installing the app, you need to create a project and then import a Sketch file. You can do so by drag & drop. The first file becomes your Master - source of truth document. Every time you want to edit the Sketch file and track changes, you need to have the Abstract app open. Also, to edit a Sketch file, you are asked to create a Branch which will make a copy of the master file. Each branch becomes a workplace for one designer. You can also create a branch on top of someone else's branch. To commit your changes, you’ll need to sync the design revision back to Abstract.

Once the file is in Abstract, you can open screens from any branch and inspect them.

Abstract, quite like Zeplin, counts on the traditional workflow where the designers need to mark the image layers as Exportable in Sketch so that the developer could export them from Abstract.

*Note: Images that were not properly grouped and set as Exportable in the graphics editor cannot be exported from Abstract.*

**What can you do with Abstract?**

- control versions of Sketch design files (branch, commit, compare, and merge)
- import artboards (only with Sketch and Abstract desktop app fro macOS
- export image assets that were previously marked as Exportable in Sketch
- generate CSS code from layers
- measure sizes and distances between single layers or layers that were previously grouped (in points, pixels, and density-independent pixels)
- copy colors in Hex (RGB), Hex (ARGB), RGB, UIColor, HEX8
- share designs for review
- comment
- play prototypes
- access artboards version history
- view, share, and inspect symbols
- generate style guides from symbols
- integrate it with Slack

*Note: Abstract is not the only tool that enables version control of Sketch designs. Same capability is possible also with tools like Plant, Kactus, and starting with the 4.2 update also Avocode.*

**What will you need to work with Abstract?**

- Sketch - you will need someone with a MacBook and the Sketch app to prepare and import design files
- Abstract desktop app for macOS which installs a Sketch plugin
<br />
<br />


**How much does Abstract cost?**

If you want to try Abstract, there is a 14-day free trial. Subscription starts at $10 per month **per user** (limited by 10 contributors). Considering you need at least 2 people to collaborate on design files, the price will be $20 per month.

## The third app alternative: Zeplin vs InVision

### What is InVision?

InVision probably doesn’t need much introduction, but it would not be fair if we didn’t include them here. InVision entered the design collaboration market quite early - already in 2011. Sketch was getting traction back then, and "mobile-first" was growing like crazy. InVision saw an opportunity in prototyping screens and built a simple solution to do so on top of Sketch with their plugin Craft.

Later InVision added support for Photoshop and built other tools for inspecting, visual mood boards, aka InVision Boards, Freehand sketching, and last year also their own design tool called InVision Studio.

**Workflow with InVision**

<Image src='41/5.png' />

Once you signup for InVision, you download their own design tool InVision Studio or their Craft plugin for syncing artboards from Sketch and Photoshop.

Until today, prototyping remains at the core of the work with InVision. So instead of creating a project like in the case of Zeplin, Avocode, and Abstract, you need to start with a prototype.

Then you need to switch to Sketch or Photoshop and “Publish selected screens” to a certain prototype in InVision via the Craft plugin.

So Zeplin or InVision? 

InVision, quite like Zeplin and Abstract, counts on the traditional workflow where the designers need to mark the image layers as Exportable in Sketch so that the developer could export them from InVision.

*Note: Images that were not properly grouped and set as Exportable in the graphics editor cannot be exported from InVision.*

**What can you do with InVision?**

- create prototypes from Photoshop & Sketch screens
- import artboards (only with Sketch & Photoshop apps)
- export image assets that were previously marked as Exportable in Sketch or renamed in Photoshop
- generate CSS code from layers
- measure sizes and distances between single layers or layers that were previously grouped
- copy colors in Hex, RGB, UIColor, HEX8
- share designs for review
- comment
- access artboards version history
- view, share, and inspect symbols
- integrate it with Slack, Dropbox Paper, Jira, Trello, Confluence, MS Teams
<br />
<br />

**What will you need to work with InVision?**

- Sketch - you will need someone with a MacBook and the Sketch app to prepare and import design files
- Adobe Photoshop - you will also have to run Photoshop to prepare and import design files
- Craft plugin for Sketch or Photoshop
- InVision Studio
<br />
<br />

**How much does InVision cost?**

If you want to try InVision on one project, you can do so for free. Subscription starts at $9.95 per month per user.

# So what’s the best Zeplin app alternative?

The choice is solely yours. It really comes down to your workflow and the flexibility your team needs. If you still have any questions that remained unanswered, just hit us up on [Twitter](https://twitter.com/avocode).

If your favorite tool is on the list, I would love to hear what you love about it. And if you feel like I’ve missed something and you’d like to update the information of this article, please let me know at matous@avocode.com. Cheers.

 Zeplin app, Avocode app, InVision app, or Abstract app? But which one is the best design hand-off & inspect tool for you? Which one fits your desktop or browser workflow the best? I tested all of these tools in one day to write this review for all designers, developers, managers, and design ops leaders.

In-depth review of 3 top alternatives to Zeplin app for design teams in 2020

In-Depth Review of 3 top Alternatives to the Zeplin App in 2020

Are you wondering how web design will change this year?

Trends in web design are constantly changing, and that means you as a designer need to change your approach as well. At best, don’t just follow the current ones but try to reinvent your style. This way you have high hopes to become a trend-setter yourself.

Take a look at the summary of our latest [Question of the day](https://twitter.com/avocode/status/1085884739939119105) where many design professionals shared their thoughts and predictions for 2019. You definitely want to stick around for this one.

Thanks to everyone who joined the discussion!

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

[**Riley Jones**](https://twitter.com/rileyj_s), Freelance Designer

<iframe data-width="500" data-height="281" width="500" height="281" src="https://blog.avocode.com/media/21f12109bed7d01d0bddf612fb12b44c?postId=84bce1c835ca" data-media-id="21f12109bed7d01d0bddf612fb12b44c" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F833463388130775040%2F0RjY15Kg_400x400.jpg&key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></iframe>

[**James Butler**](https://twitter.com/jamesbtlr), Senior Designer at [Booking.com](https://twitter.com/bookingcom?)

<iframe data-width="500" data-height="281" width="500" height="281" src="https://blog.avocode.com/media/c2f8da70c0d40b5d70d56decaef4b131?postId=84bce1c835ca" data-media-id="c2f8da70c0d40b5d70d56decaef4b131" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F997877318327599105%2F-_6jgIdB_400x400.jpg&key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></iframe>

[**Ales Nesetril**](https://twitter.com/alesnesetril), Creative Director at [STRV](https://twitter.com/STRVcom)

<iframe data-width="500" data-height="281" width="500" height="281" src="https://blog.avocode.com/media/4b5eaf6a156c7223a21ab9f9c1bfe739?postId=84bce1c835ca" data-media-id="4b5eaf6a156c7223a21ab9f9c1bfe739" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F797394358098083840%2FFOT8BwkR_400x400.jpg&key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></iframe>

[**David Notté**](https://twitter.com/davidnotte), Senior Designer at [Booking.com](https://twitter.com/bookingcom?)

<iframe data-width="500" data-height="281" width="500" height="281" src="https://blog.avocode.com/media/a59295f8f7ae6eee1672b1b68f4144c3?postId=84bce1c835ca" data-media-id="a59295f8f7ae6eee1672b1b68f4144c3" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F1029799447981682696%2F4yPkcLDz_400x400.jpg&key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></iframe>

[**Fajar Siddiq**](https://twitter.com/fajarsiddiqFS), Owner & Founder at Creative Digital Agency [Euphorya](https://twitter.com/euphoryadesign)

<iframe data-width="500" data-height="281" width="500" height="281" src="https://blog.avocode.com/media/cb911f2711208c572d1ef762b373b47c?postId=84bce1c835ca" data-media-id="cb911f2711208c572d1ef762b373b47c" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F1063332577447075840%2FPhBhCKmX_400x400.jpg&key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></iframe>

[**Jessica Lovegood**](https://twitter.com/lovegooddigital), Senior UX Designer at [Barclays](https://twitter.com/barclays)

<iframe data-width="500" data-height="281" width="500" height="281" src="https://blog.avocode.com/media/a462cd7ad909f627ed0b5badecb02ffa?postId=84bce1c835ca" data-media-id="a462cd7ad909f627ed0b5badecb02ffa" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F1090203760482234370%2F0UzZd-j__400x400.jpg&key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></iframe>

[**Laurel Natale**](https://twitter.com/laurelnatale), UX Strategist at [Brownstein_Grp](https://twitter.com/Brownstein_Grp)

<iframe data-width="500" data-height="281" width="500" height="281" src="https://blog.avocode.com/media/c36c5daa9530716b7704faced7cd4377?postId=84bce1c835ca" data-media-id="c36c5daa9530716b7704faced7cd4377" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F1019599663824015360%2FvOW8EwhC_400x400.jpg&key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></iframe>

[**Abbey Fitzgerald**](https://twitter.com/AbbeyFitzgerald), UX Software Engineer and Digital Design Expert

<iframe data-width="500" data-height="281" width="500" height="281" src="https://blog.avocode.com/media/6000df0ce9b8086b8076f83106f0b1a3?postId=84bce1c835ca" data-media-id="6000df0ce9b8086b8076f83106f0b1a3" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F530129747972349952%2Fk7i8GNev_400x400.jpeg&key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></iframe>

[**Karanukar Rayker**](https://twitter.com/krayker), UX Designer

<iframe data-width="500" data-height="281" width="500" height="281" src="https://blog.avocode.com/media/e164cf9384c07d8cec8835d05e481832?postId=84bce1c835ca" data-media-id="e164cf9384c07d8cec8835d05e481832" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F559412509690433536%2FC1kKFgn8_400x400.jpeg&key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></iframe>

<iframe data-width="500" data-height="281" width="500" height="281" src="https://blog.avocode.com/media/d166489bc25290f89ddb1724e154665c?postId=84bce1c835ca" data-media-id="d166489bc25290f89ddb1724e154665c" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F559412509690433536%2FC1kKFgn8_400x400.jpeg&key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></iframe>

[**Rodolpho Henrique**](https://twitter.com/rodhzz), Senior Designer at [McKinsey](https://twitter.com/McKinsey)

<iframe data-width="500" data-height="281" width="500" height="281" src="https://blog.avocode.com/media/4fd7880df8a8422a8be1c0b946ee7319?postId=84bce1c835ca" data-media-id="4fd7880df8a8422a8be1c0b946ee7319" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F1046828092222840832%2FpBMUs2oK_400x400.jpg&key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></iframe>

[**Oksana Ivanova**](https://twitter.com/OksanaIvanovaPM), UX Designer

<iframe data-width="500" data-height="281" width="500" height="281" src="https://blog.avocode.com/media/941b857d6c247290ec8fad8a21006512?postId=84bce1c835ca" data-media-id="941b857d6c247290ec8fad8a21006512" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F1075899712086126592%2FGdTsXcAX_400x400.jpg&key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></iframe>

[**Marko Aleksic**](https://twitter.com/markiz_io), Product Designer at [Jatheon](https://jatheon.com/)

<iframe data-width="500" data-height="281" width="500" height="281" src="https://blog.avocode.com/media/75b829cfabd91a15c9de68f5b023a5d7?postId=84bce1c835ca" data-media-id="75b829cfabd91a15c9de68f5b023a5d7" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F751443490471612417%2FDgXXh0sy_400x400.jpg&key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></iframe>

[**Ivo Ruijters**](https://twitter.com/AroundSeven), Owner and UX Designer at [Around Seven](https://www.aroundseven.nl/)

<iframe data-width="500" data-height="281" width="500" height="281" src="https://blog.avocode.com/media/44b6a58114b1775efba4383301473f32?postId=84bce1c835ca" data-media-id="44b6a58114b1775efba4383301473f32" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F788459971524620288%2FDmBZDinr_400x400.jpg&key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></iframe>

[Sel Villadarez](https://twitter.com/selvilladarez), UX/UI Designer

<iframe data-width="500" data-height="281" width="500" height="281" src="https://blog.avocode.com/media/5c0533532da5f1a65c23928f083f8196?postId=84bce1c835ca" data-media-id="5c0533532da5f1a65c23928f083f8196" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F1089233826759340033%2FCWUAi2C9_400x400.jpg&key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></iframe>

[**Sabrina Tizaoui**](https://twitter.com/SabrineTizaoui), UX/UI Designer

<iframe data-width="500" data-height="281" width="500" height="281" src="https://blog.avocode.com/media/5ab1ca6768b49a925ed209b7761e5ba4?postId=84bce1c835ca" data-media-id="5ab1ca6768b49a925ed209b7761e5ba4" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F1031319369811456000%2FXsR5_1IS_400x400.jpg&key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></iframe>

[**Yashu Mittal**](https://twitter.com/mittalyashu77), Founder & CEO of [Codecarrotnet](https://twitter.com/codecarrotnet)

<iframe data-width="500" data-height="281" width="500" height="281" src="https://blog.avocode.com/media/ec47f1264fd4b59f5ea7d68eb1016e91?postId=84bce1c835ca" data-media-id="ec47f1264fd4b59f5ea7d68eb1016e91" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F1080915888407302144%2F_WQdb417_400x400.jpg&key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></iframe>

[See the full discussion on our Twitter!](https://twitter.com/avocode/status/1085884739939119105)

##Question of the&nbsp;Day

Join us on [Twitter](https://twitter.com/avocode) every Thursday at 2 pm CET/8am EST!

##Over to&nbsp;you

What do you think? Is this something you’re expecting in 2019 or are you predicting something different? Share your thoughts in the comments below or on our [Twitter](https://twitter.com/avocode/status/1085884739939119105).

Are you wondering how web design will change this year? Trends in web design are constantly changing, and that means you...

What design experts say will be trending in 2019

Are your switching to Sketch from Photoshop, but don’t have the time to recreate all your designs? In this tutorial, we’ll show you how to do it automatically in a matter of minutes.

Using our [PSD to Sketch Converter](http://avocode.com/convert-psd-to-sketch) is really no brainer. Let's just quickly go through the flow.

##1. Go to [avocode.com/convert-psd-to-sketch](https://avocode.com/convert-psd-to-sketch)

*NOTE: Please make sure to [read this section](https://avocode.com/convert-psd-to-sketch/features), about what can be currently converted. (TLDR: It converts layers, layer groups, text layers, vector shapes, basic layer effects, layer masks, guides and more.)*

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

##2. Choose your PSD, add an email address, and wait for the upload

The upload, processing, and conversion time (between you see “Completed” and the moment when you receive the e-mail with a download link) depend on the size and complexity of the PSD file. The smaller the file, the faster the conversion.

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

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

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

##3. Check your e-mail box and download your Sketch file

By now, there should be an email with a download link in your email box. Open it and click “Download Sketch file”.

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

*Notice that the Sketch file size is significantly smaller. Go vectors!*

<AdsBanner />

##4. Before you open the design…

Well, you can open it just now, but bear in mind that:

- This is a Beta version and only [these design features](https://avocode.com/convert-psd-to-sketch/features) can be currently converted.
- All converted Sketch designs can be opened in Sketch app [Version 43](https://www.sketchapp.com/updates/#version-43) and later.
- You should have installed all of the fonts from the original PSD file to be able to see them in Sketch.

<br />

**Here are some PSD to Sketch Converter results:**

<Image src="https://cdn-images-1.medium.com/max/2600/1*onbsroIHDBexs1TCfvPmug.png" external />
<Image src="https://cdn-images-1.medium.com/max/2600/1*_neVuc1laZIErbLAVH2-6A.png" external />

## 5. Try it and let us know what you think about the result

Photoshop data format is significantly different from Sketch JSON. Some things — like Smart Objects or particular layer effects — simply don’t exist in Sketch, therefore cannot be replicated.

**List of features we’ll be adding/fixing soon:**

- Text layers (bounding box line height)
- Circular gradient, Radial gradient
- Layer styles (Inner glow, Outer glow)

In the meantime, if you stumble upon a problem, please report it here.

Are your switching to Sketch from Photoshop, but don’t have the time to recreate all your designs? In this tutorial, we’ll show you how to do it automatically in a matter of minutes.

How to convert Photoshop design to a layered Sketch file?

How to convert Photoshop design to a Sketch file?

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 that 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/how-can-you-turn-sketch-to-adobe-illustrator-f006ddaffb5e).

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.

<AdsBanner />

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 the cloud, and still be able to download the original Sketch file (in the Sketch format) — [Avocode](https://avocode.com/?utm_source=blog&utm_medium=web) 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 + Jshortcut (or drag & drop the whole file into Avocode).
* Your team will be automatically notified via e-mail or Slack
* You can upload multiple [design](https://help.avocode.com/en/articles/501218-how-to-add-a-new-design-version-in-avocode) versions and keep them together
* Anyone on your team will be able to open and [inspect the file](https://help.avocode.com/en/articles/501111-inspect-designs-in-avocode)
* The developer can [export any layer](https://help.avocode.com/en/articles/503290-export-png-jpeg-webp-and-svg-images-from-sketch-adobe-xd-psd-or-ai-designs-in-avocode) at any resolution directly (You don’t have to bother with pre-setting Exportables or renaming layers with special symbols like + * & or .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/en/articles/503481-comment-on-designs-in-avocode)

## 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://www.sketch.com/) and the [Avocode app](https://avocode.com/). Just [sign up here](https://avocode.com/signup), download and install the app. It will automatically install a Sketch plugin to your Sketch app.

Next, open any .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='38/1.png' small />

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

<Image src='38/2.png' small />

Your Avocode app will automatically open and you will be [**Create a new project**](https://help.avocode.com/en/articles/501210-create-a-new-design-project-in-avocode). 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='38/3.gif' small />

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

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

## One more thing…
Do you really love Sketch? 💎 Need to convert Photoshop files to Sketch? Here is 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? It all comes down to what you need to do.

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

How to handoff Sketch Artboards and assets to developers

There’s a wave of designers entering the industry who learned the trade using non-Adobe products. I am one of those designers. While it’s great being considered a Sketch maestro at the agency I work for, I finally hit the Adobe wall helping a client catch up on some visual design work that required .ai files as the final deliverable.

After opening Illustrator and having a mild panic attack, I can appreciate and respect the journey of many-a-designer before me who spent years designing UI’s in Photoshop and/or Illustrator (as a side note: I find it comical that these tools that are used so prevalently to create wonderful user experiences are some of the most difficult, non-user friendly programs to learn).

After realizing I’d bitten off more than I could chew I started searching for a Sketch to Illustrator workflow and quickly realized that no such thing existed. So I started experimenting, and found a way to export a design from Sketch, open it in Illustrator and save it as an .ai file.

*I suppose this is a great time to disclaim that this workflow is not perfect, tweaks will need to be made on the Illustrator end, some elements (shadows for example) will show up as different layers in illustrator, masking will need to be done in Illustrator (for some reason, SVG’s exported out of Sketch with any kind of mask are un-openable in Illustrator) etc etc.* ***But by and large, following these steps will help you accomplish the aforementioned.***

## 1) Create your design in Sketch.

<Image src="45/1.png" small />

## 2) Export the art board (group or slice) your design lives in as an SVG file.

<Image src="45/2.png" small />

## 3) Find the exported SVG file, right click on it, hover over ‘Open With’ and select Adobe Illustrator.

<Image src="45/3.png" small />
*Wait for Illustrator to take a lifetime loading*

## 4) Use the Selection tool (v) to select all the layers that have been imported to Illustrator.

<Image src="45/4.png" small />

## 5) Once everything is selected, press command + shift + g five to ten times.

<Image src="45/5.gif" small />
If you’re watching the layers panel, you’ll begin to see the layers ungroup themselves.

## 6) Save the file as an .ai extension by going to File > Save As… > (Format) Adobe Illustrator (ai)

<Image src="45/6.png" small />

## 7) That’s it!
You now have a perfectly operational .ai file!

What do you think about this method? Please let me know if you have any tweaks, ideas or advancements.

There’s a wave of designers entering the industry who learned the trade using non-Adobe products. I am one of those designers. While it’s great being considered a Sketch maestro at the agency I work…

Design Inspiration

Design Trends Predictions for 2021 From Top Designers

4 Actionable Tips to Deliver Better Client Work from Awwwards Winning Agencies

2020: The Year of Curiosity in UI Design

The Future of Artificial Intelligence in Design with Gleb Kuznetsov

Design Trends Predictions for 2020 From Top Designers

Design Tools in 2020: To the Cloud and Beyond

In-depth review of 3 top alternatives to Zeplin app for design teams in 2020

What design experts say will be trending in 2019

How to convert Photoshop design to a layered Sketch file?

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

How can you turn Sketch to Adobe Illustrator?