A key to efficient, timely, and high-quality product delivery is a successful collaboration between developers and designers. This cooperation means a mutual process where designers and other stakeholders can be included in the development process. This is the holy grail for the construction workflow of a product team.
When a team works on one project, it is necessary to use multiple tools at once. At Applover the ideal combination is Figma + FlowMapp + Mural. We use each of these tools in our daily work, although the following list also includes new tools worth tracking in 2021 like Abstract, and programs worth following, which we have been using for several years like Avocode.
The article is intended to inspire you to try out the tools I have selected to support UX’s work. Tools are not a substitute for the knowledge and skills you acquire during your career in this profession, but they can make it a little easier to enter the world of design standards and inspire you to try out new operation methods.
Product Design tools worth following in 2021
Figma is a tool used in more and more companies. According to the UX tools ranking, it is the primary tool used by more than 25% of respondents. Figma works well for many reasons, mainly because of how well it allows us to work with components and manage relationships.
Features such as Layout dimensions, Code inspections and Shared styles make Figma the tool of choice for many collaborative product teams.
The developer version includes plugins to automate tasks, improve workflow, and publish these plugins for the team. Another useful feature of Figma is the ability to embed projects and prototypes live, wherever you need them. Many integrations allow you to combine Figma with other tools in the design process to work better. A huge advantage and disadvantage of Figma is the possibility to work without installing programs. Unfortunately, without the Internet, the program has minimal support for offline work.
At Applover we decided to choose Figma as the primary design tool. There were many reasons for this, but I think it is worth emphasizing the most current one. Nowadays, when most of us work remotely, good cooperation and communication are the basis for creating high-quality products. Thanks to real-time collaboration, Figma strongly supports these values, which results in increased productivity and quality of work for our whole project team.
Adobe decided to separate users who are interested in standard image editing from those who create graphic designs for websites and applications. With the latter in mind, Adobe XD was created – a program that is designed to create prototypes and graphic designs. It is a tool from the All-In-One series; it offers the possibility to create mock-ups, graphic designs, prototypes, including animations. An unquestionable advantage is access to many libraries and materials from Adobe and other users. Adobe XD is very intuitive and easy to use. In teamwork, you can share files via the cloud, which is also useful for developers.
FlowMapp is a well-known UX planning tool for creating visual sitemaps and user flow. The user workflow diagrams that can be created using it can include simple schemes and almost hi-fi skeletons. FlowMapp allows you to use lines, shapes, and icons to design user workflows quickly. This tool is handy for planning the development of a site, mobile or web app, and it allows all the participants to collaborate, which makes the workflow more manageable and convenient.
FlowMapp can be connected to Slack, the tool we use daily at Applover for communication. Thanks to connecting Project to Chanel, it is possible to receive push notifications when it’s updated and make it visible to the whole team. FlowMapp project changes — like new page creation, comments, and project updates — will automatically sync with Slack. You can customize your Slack sync for each project.
Sketch is currently number one for UX, UI, and Product Design. Some time ago, it turned the tool industry upside down and still reigns over other programs. The main feature that distinguishes Sketch as the ideal tool for designers and programmers to work together is the Cloud Inspector. It reminds early Zeplin and makes it easier for programmers to get the data they need to translate pixels into code – this functionality is open and free directly in the browser.
One of the reasons why Sketch is so appealing to me is the immense availability of free design resources like Sketch App Resources and Sketch Repo to find various inspirations. I also like Sketch for its plugin functionality - which helps me design faster and better.
Mural is an intuitive tool for visual cooperation. It will work regardless of whether we want to carry out an event storming, workshops, scrum events, or simply the team needs to have several boards at their disposal. If you work with several groups, the Mural allows you to create a separate room for each of them, making it easier to manage access and organize murals. Mural is also an excellent tool for remote work; one of its useful features is facilitating the time of meetings. It has a convenient built-in timer, enables dot voting, and presents the results.
The program allows collaborating at the same time on the same board. The application gives you the possibility to use the whiteboard simultaneously on many accounts, which works great for remote work. The free version offers a wide range of design gadegts (including ready-made color cards, font scaling, large workspace) and allows almost any canvas interference. However, we must remember that this is a web application, so the more people are actively working on the board we can expect slight delays.
InVision is, like Adobe XD, an All-in-One program. The design possibilities are vast: mock-ups, graphic designs, prototypes, and animations in one program. This tool allows you to hold components comfortably (like symbols in Sketch or components in Figma).
InVision Inspect provides a CSS preview. It converts concept values in files (such as Invision Studio, Sketch, or even Photoshop) into code specs for developers. It also allows developers to annotate designs to show what should be amended, modified, or repeated to designers. Invision Inspect provides technologies such as Jira, Confluence, and Trello integrations.
Additionally, Inspect goes hand in hand with the Design System Manager of Invision so that valuable annotations and values of code can be given.
Overflow is a board designed for prototyping and drawing extensive flows between screens. The tool is straightforward, and the interface is intuitive and modern. Overflow allows you to password your design spaces – it is more convenient than sharing a link only with selected email addresses. The program itself works like a plugin – in a program like Sketch, we send changes to Overflow, and then in this application, we can place the board in the cloud.
Zeplin is a stand-alone application, ideally suited as a helper combining a graphic designer and a programmer. This application’s main goal is to minimize work for each of the parties involved in the project. Graphic designers appreciate the speed of exporting their graphic designs to HTML, while programmers get easy and intuitive access to graphic designers’ resources. Zeplin is an excellent time-saver, saving a large part of the effort involved in passing on projects to developers, automating many small, time-consuming details. With a single click in Zeplin, you can export files from Sketch, Figma, Adobe XD, Adobe Photoshop CC. Zeplin will generate mostly accurate, customized specifications, resources, and code snippets for developers.
Zeplin is a user interface design software that is only compatible with Sketch. It is a plugin and web application. It contains a list of element attributes in the specification sheet, which can then communicate between the design and development teams.
Abstract is a tool that gives powerful possibilities for workflow and toolchain (e.g., Sketch). For example, Abstract adds version control – similar to GitHub in software development projects – which allows designers to merge project versions into one file, just like programmers do with code. A noteworthy feature is the information transfer by developers – Abstract is inspired by GitHub, introduces version control to design, and helps developers use the latest and most accurate versions of projects. As with GitHub, the approval history, comments, and annotations facilitate interpretation of the “reasons” behind design decisions. This tool even translates project values into code so that developers can copy and paste code, as they do in Zeplin and similar tools. To sum up: Abstract is like GitHub for designers.
This is one of the three most popular project transfer programs. Avocode’s goal is to “save time while working with project files”. Avocode offers a wide range of solutions for the handoff of design files more simply. For developers who get all code values and measurements, they need standard inspection abilities, for designers who can save the overhead around the development of complex Sketch layers, and for everyone else who can communicate or even alter any of the components, such as texts, directly in a way that will not impact the project itself. Also noteworthy is the ability to install applications on Linux, which is popular among programmers.
Playgrounds tools for product design
Playgrounds for components are a neat way to play with components and learn how they function. When you can combine them as part of your documentation, playgrounds help you quickly learn how code works and see how it looks.
Codesandbox is an online editor for quickly creating and playing-with small projects like components. After creating something interesting, you can show it to others by just sharing the URL. CodeSandbox features a live preview to show the code’s result while you’re typing and has extensions built to integrate into your different tools and development workflow.
Stackblitz is an “online IDE for web applications” powered by Visual Studio Code. StackBlitz is an online IDE, much like Codesnadbox, where you can create Angular & React projects that are rendered shareable through a URL connection. It automatically takes care of downloading dependencies, compiling, bundling, and hot reloading as you type, similar to Codesandbox.
Codepen is a widely popular, online development environment for FrontEnd developers to play and visually share snippets. On CodePen, you can also browse through projects and make it easier for yourself to create an effect. You have access to ready-made interactive solutions and you can freely manipulate the code and check the impact of the changes in the live view.
Do you want to find out more about product design tools?
Product Design is not just about using tools
The number of programs available is changing dynamically. Who knows if there will be a new tool at the end of 2021 that will revolutionize UX design? It is worth remembering that UX is more than just the ability to use design gadgets. For most UX and product designers these tools are apparent, but seeing today’s multitude of different programs for mock-ups, graphics, and charts creation, it is worth mentioning that the most important thing is to use applications that will make your work more efficient and valuable. It is worth testing new solutions, bearing in mind that each tool has a limit, and the initial discouragement may turn out to be a low price in exchange for the possibilities offered by a given program. We can focus our efforts on using the devices, but it should be remembered that skills – the sense of observation, analysis, drawing conclusions, and knowledge of research methods – are essential in the creative process.