---
tags: done, benchmark, ui/ux
---

# Benchmark UI/UX Design Tools

## Introduction

### Some memories

In the past, making websites and desktop apps was fastidious.
Remember the time when there was no lib like bootstrap, and jQuery was the state-of-the-art web technology.
When user interface was dependant of software engineer that relies on understanding of not very well defined png, created by project managers with surely no competence about designing real needs of users.
Today lot of guys or companies develop and maintain libraries or tools that can really increase our productivity.

### Developer waste of time

Every developer have already experienced this:
1. Have an awesome idea
2. Start making issues (in best cases)
3. Setup project
5. Start using bootstrap or whatever
6. Start making pixel perfect div
7. Watch what've been done from 8 hours
8. Understand that you've just done nothing
9. Lose your week-end
10. Give up

This is frustrating but coding takes a lot of time, and should be the last option you have to choose when developing a new idea.
For UI/UX design, I see only one exception: react-sketchapp, but today we will consider it as something on top of Sketch.

## Benchmark

`x := internal`
`~ := external or complex`

### Global Capabilities

| | Design | Collaboration | Prototyping | Navigation | Animation | Handoff |
| -------------- |:------:|:-------------:|:-----------:|:----------:|:---------:|:-------:|
| Photoshop | x | ~ | | | | |
| Sketch | x | ~ | x | | | |
| Supernova | | ~ | x | x | x | x |
| Figma | x | ~ | x | | | |
| BuilderX | x | ~ | x | x | | x |
| Invision | x | x | x | x | x | x |
| Sympli | | x | | | | |
| Avocode | x | x | x | x | x | x |
| Zeplin | | ~ | | | | x |
| Android Studio | x | ~ | x | ~ | x | x |
| Xcode | x | ~ | x | ~ | ~ | x |
| RN | ~ | ~ | ~ | ~ | ~ | |
| Flutter | ~ | ~ | ~ | ~ | ~ | |

### Interfacing

This table must be read from left to right and describe that y can be integrated in x.
Android refers to Android Studio.

| | Photoshop | Sketch | Supernova | Figma | BuilderX | Invision | Simply | Avocode | Zeplin | Android | Xcode | RN | Flutter |
| --------- |:---------:|:------:|:---------:|:-----:|:--------:|:--------:|:------:|:-------:|:------:|:-------:|:-----:|:---:|:-------:|
| Photoshop | x | ~ | | | | x | x | x | x | ~ | | | |
| Sketch | ~ | x | x | x | x | x | x | x | x | ~ | | ~ | |
| Supernova | | | x | | | | | | | x | x | x | ~ |
| Figma | | | | x | | | | x | | | | | |
| BuilderX | | | | | x | | | | | | | x | ~ |
| Invision | | | | | | x | | | | | | | |
| Sympli | x | x | | | | | x | | | | | | |
| Avocode | | | | x | | | | x | | x | x | | |
| Zeplin | x | x | | | | | | | x | | | | |
| Android | | | | | | | | | | x | | | |
| Xcode | | | | | | | | | | | x | | |
| RN | | | | | | | | | | x | x | x | |
| Flutter | | | | | | | | | | | | | x |

As we can see, sketch can be integrated in most of this tools. A good strategy could be to start designing from sketch because it keep lot of other options opened.

### Operating System

| | Windows | Mac | Linux | Web / Cloud |
| --------- |:-------:|:---:|:-----:| --- |
| Photoshop | x | x | x | |
| Sketch | | x | | x |
| Supernova | | x | | |
| Figma | | | | x |
| BuilderX | | | | |
| Invision | x | x | | x |
| Sympli | | x | | |
| Avocode | x | x | x | x |
| Zeplin | | x | | |
| Android | x | x | x | |
| Xcode | x | x | x | |

### Handoff

| | Flutter | React | React Native | Android Java | Swift/ObjC | CSS | Assets |
| --------- |:-------:|:-----:|:------------:|:------------:|:----------:|:---:|:------:|
| Supernova | x | | x | x | x | | x |
| BuilderX | ~ | x | x | | | | x |
| Invision | | | | x | x | x | x |
| Avocode | | | x | x | x | x | x |
| Zeplin | | | | x | x | x | x |
| Simply | | | | | | | x |
| Android | | | | x | | | |
| Xcode | | | | | x | | |

### Price

| | One Time | Perso (mth) | Pro/Team (mth/user) |
| --------- |:--------:|:-----------:|:-------------------:|
| Photoshop | | 19,19$ | |
| Sketch | 99$ | | 9$ |
| Supernova | | 25$ | 30$ |
| Figma | | | 12$ or 45$ |
| BuilderX | | 15$ | 20$ |
| Invision | | 25$ | 99$/mth (5 users) |
| Sympli | | | 9$ |
| Avocode | | 15$ | 22$ or custom |
| Zeplin | | 17$ or 26$ | 129$/mth |
| Android | 0$ | | |
| Xcode | 0$ | | |

## Strategies

### Productivity

At first thoughts, if we think about a productive tool, it is something that cover a maximum of use case and have most of the features existing in others tools.
Avocode or Supernova are good examples of productive tools.

### Resiliency

Another strategy could be to say that is risky to only focus only on one tool.

* One tool with all capabilities could have lack of specific usages
* If you want new designers to be effective, it's better they use something they already know
* As developers, designers love to be free with their own tools
* It can create bottleneck in your team if it didn't manage collaboration

### Adaptability

To be adaptable we need to be sure that we can switch from one tool to another without impacting our productivity.
Adaptability is better for productivity than resiliency but effective cost can be higher.

## Conclusion

### Benchmarking

After benchmarking all of this tools, I must say that all have really good features really close from each others.
This is the result of lot of experience in ui/ux design over the world and it shows us that this industry is starting to be mature. As comparison, software development is not mature at all and lot of companies/lead dev are completely lost in all of the patterns, workflows, data or network management, languages for their projects.

### Focus

Each of this tools can be used, but there is two things I think we should keep an eye on: handoff and interfacing.
Handoff make designer code without knowing it. It's a lot of time to give for developer to focus on other part of your software.
Interfacing permit designers to have better adaptability when there is new hiring or resumption of projets.

### Solutions

If your are a little companies with little resources or you're alone, I recommend you to maximize productivity, use not more than 2 tools to be effective. Sketch + Supernova is a really good solution for you.

For other big teams, you can decouple your designer stack with more tools. You can let your designers use Figma and let integrate it in avocode and let developers manage navigation. You can also use Sketch + Sympli then export sketch file to InVision, let front developer manage your animation and styles from InVision's inspect tools. Your only problematic is bottleneck contribution between collaborators.

## Thanks

Many thanks to everyone that help me redact this post and feedbacks and all :i_love_you_hand_sign:

## Sources

* [https://avocode.com/](https://avocode.com/)
* [https://sympli.io/](https://sympli.io/)
* [https://www.invisionapp.com/](https://www.invisionapp.com/)
* [https://supernova.io/](https://supernova.io/)
* [https://zeplin.io/](https://zeplin.io/)
* [https://flutter.dev/](https://flutter.dev/)
* [https://builderx.io/](https://builderx.io/)
* [https://developer.apple.com/xcode/interface-builder/](https://developer.apple.com/xcode/interface-builder/)
* [https://developer.android.com/studio/write/layout-editor](https://developer.android.com/studio/write/layout-editor)

{%hackmd 4kasblodQSi3Vujdu9RUtA %}