| Feature | Adobe Xd | Sketch | InVision Studio | Figma |
|---|---|---|---|---|
| Platform | Mac, Windows, Android, IOS | Mac | Mac, Windows | Mac, Windows |
| Possibility of Collaboration | Yes, real-time collaboration, we see what the other person on the team is doing | Yes, real-time collaboration, we see what the other person on the team is doing | Yes, simultaneous work on one file possible | Yes, real-time collaboration, we see what the other person on the team is doing |
| Version control | Automatic change history saving | Automatic change history saving | No | Automatic change history saving |
| Prototyping | Yes, the possibility to create advanced animations | Yes, basic animations, for advanced you need additional plugins | Yes, the possibility to create advanced and most customized animations | Yes, the possibility to create automatic transitions. Less powerful than Adobe Xd |
| Timeline animation | No | No | Yes | No |
| Components | Yes | Yes | Yes | Yes |
| Plug-in library | Yes | Yes | Yes | Yes |
| Compatibility | Adobe Photoshop, Sketch | - | Sketch | Sketch |
| Possibility to comment on design | Yes | Yes | Yes | Yes |
| Downloadable png/svg assets | Yes | Yes | Yes | Yes |
| Inspect mode - for developers | Yes | Yes | Yes | Yes |
Figma
Figma is an all-in-one tool that allows you to design a website/application as well as create a prototype. It has a large community of users, which is especially helpful when you are looking for support or ready-made UI Kits, components, or design elements. It has the necessary functions for design and smart animation options for creating smooth transitions between screens. The greatest advantage of Figma is its powerful module for managing and using components. Also noteworthy is the elaborate cooperation mode. We can see, in real-time, what changes are made by the person with whom we share the project.
Pluses:
- Possibility to work without software installation (web version of the application),
- Works on Mac and Windows platforms,
- Possibility of collaboration, i.e. multiple designers working together on one project,
- Has a free package,
- Includes a smart animate option that allows you to create animations and transitions between the designed screens,
- Includes a library of plugins, allowing developers to create their own,
- Possibility to divide the project into pages.
Minuses:
- No repeat grid function,
- No possibility of animations between variants without changing the frame.
InVision studio
InVision Studio is a program primarily for prototyping. It's animation and interaction options that are the most advanced and refined in it. The combination of design created in Sketch and interaction created in inVision works best.
Pluses:
- Plug-in library,
- Advanced animation creation possibilities: timeline for particular elements,
- Advanced preview, i.e. possibility to check how the design looks on a particular model of phone or tablet (the project is presented as a mockup of a device).
Minuses:
- Includes only basic functions for creating and editing graphics and text,
- No feature to streamline the layout creation process,
- No control over file versioning.
Sketch
Sketch, like Figma, allows you to create both page/application layouts and interactions between them or prototypes. The biggest problem with Sketch is its accessibility, namely only Mac users can install and use this program.
Pluses:
- Large library of plug-ins (paid and free),
- Possibility to work on symbols (components),
- Speed and compression of files,
- File versioning,
- Easy to use,
- Working on the cloud - possibility to share libraries.
Minuses:
- Available for Apple products only,
- Only available as a paid version,
- Advanced prototype animations only possible by installing additional plugins,
- Paid plugins - Sketch does not have many features in the native version, but you can find additional paid plugins for them.
Adobe Xd
An all-in-one program is as much a development tool for layout design as it is for interaction (prototyping). It easily opens files from Sketch as well as Adobe Photoshop. It is compatible with other Adobe products. It also has advanced design features such as repeat grid, stack, padding, component stats.
Pluses:
- Opens all the most popular formats - Sketch, Photoshop,
- Works well with other Adobe programs,
- Has a repeat grid function, which allows you to duplicate elements and set appropriate spaces between them,
- Possibility to set padding to individual elements
- Possibility to add states to components, such as hover, on click,
- Works in the cloud - the ability to share files and work on files simultaneously,
- Transform 3d and Animation 3d,
- Has a library of plugins,
- We can specify multiple flow prototypes without having to create separate files for each flow.
Minuses:
- No possibility to split the project into pages - with large projects you may need to create separate projects,
- Long loading time of project preview for large projects.
Why we use Adobe Xd at Milo
The basis for choosing a tool is its purpose. At Milo, we design digital products soup to nuts. Therefore, we need a tool for designing both web and mobile applications, as well as for prototyping (interactions between screens or the result of an action on a given screen, e.g. hover, drag, or click effect). Therefore, we choose a tool that:
- Enables us to do both design and prototyping.
- Is compatible with graphics programs. Sometimes we need to prepare a more complex icon in Adobe Illustrator or edit a photo in Photoshop. The possibility to move seamlessly between programs is important to us.
- We can use it in both Windows and Mac environments.
- Includes frequent updates that introduce new features to make working on a project easier and faster.
- Enables cooperation and saving the history of changes, does not cause problems with restoring the previous appearance in case you need to return to an earlier version of the design.
- Enables generating interactive prototype preview for the client (with commenting panel) and preview for developers (with the possibility of checking styles for each element and downloading assets).
Our choice fell on Adobe Xd. We use other Adobe products in our work, and the intuitive interface, compatibility, and stability are crucial for us. In addition to developing design functions, Adobe Xd is constantly expanding features for prototyping.
Therefore, we can create Lo-Fi Wireframes, Hi-Fi Wireframes, and fully working prototypes in one place with one program. Using one tool while building the whole product prevents errors.
Each export of files to another program, in order to create a prototype, requires firstly, an update after making changes to the design, and secondly, checking whether the file opened correctly in another program. Such a system of work causes an extension of the project time. We focus on the quality of our work while optimizing the design process as much as possible.
A very important issue for us, UX/UI designers, is communication with both the client and the developer. Adobe Xd allows us to create an interactive preview of the prototype with the possibility of commenting (by pinning tags in the appropriate places). Thanks to this, we are 100% sure that we will introduce corrections according to the client's remarks. Communication with the developer is the key to success in the implementation of a digital product. We know how important it is for the developer to have all the information and assets of the design they are implementing. Adobe Xd allows you to check the styles of each element and download all the assets used in the project.
Adobe Xd is friendly to the client who evaluates the project of the developer who implements it, but most importantly to us, the UX/UI designers who use it every day. The huge community of users of this program is also not without significance. Thanks to this we have access to an immense number of resources: plugins, libraries, UI kits, ready-made design elements, which also affect the efficiency of our work.
