There is a wide range of programs used by UX/UI designers. To start, and in most cases, it is enough to know only Figma, but over time you will develop and may want to try new programs. For example, if you delve into creating interactive prototypes, you may need Protopie. After familiarizing yourself, you will be oriented in modern programs and can choose what you need.
Once you master one program, you can quickly switch to another — the differences are minimal. For example, the program Framer X has practically mirrored the basic functionality of Figma with the addition of its unique features.
We will also dive into theory and look at what vector and raster graphics are and what their differences are. And which tools are used to work with them.
- Notepad and marker – allows for quickly creating rough sketches of wireframes and making user flow sketches.
- Figma — perfect for all tasks. It even allows you to create interactive prototypes with simple animations and run them on a smartphone. It works on all platforms (Windows, MacOS, Linux) and in the browser. It comes with a free wireframe kit.
- Adobe XD — an alternative and competitor to Figma. It easily integrates with other Adobe products but has a number of drawbacks, such as the lack of additional plugins. Also, Adobe XD does not work in the browser, only from the desktop application. And most importantly – Figma provides real-time collaboration: several designers can work on one project simultaneously, exchanging comments and edits directly in the cloud. In Adobe XD, this functionality is presented in a less integrated way, which can complicate teamwork, especially in large projects.;
- Penpot — a completely free open source tool for design and prototyping, created to ensure flexible, collaborative work between designers and developers. You can work with Penpot through a browser, and also have the option to self-host the service if you need to keep data in a corporate environment.
- Axure — provides advanced capabilities for working with interactive prototypes. There is the ability to develop complex interaction scenarios and generate HTML, allowing you to embed Google Analytics (or any other user behavior tracking service) and conduct complex remote usability tests.
- Framer X – a powerful tool for creating interactive prototypes with the ability to integrate React components, allowing designers and developers to work together and create highly dynamic interfaces. It has a free plan, which allows you to create simple prototypes.
- Protopie – a program for creating interactive prototypes that allows designers to model realistic interactions without the need for programming. You will have the ability to add gestures in prototype control and define logical conditions for each component. Integrates with Figma and Adobe XD.
An indispensable tool in the early stages.
Figma has a free plan, which is ideal for beginners and students. Paid plans start from $12/month and provide many additional features.
Adobe XD usage plans start from $9.99/month.
In fact, Penpot is a very powerful competitor to Figma and similar paid solutions. In my opinion, it will become quite popular; it's just a matter of time.
The cheapest Axure plan will cost you $29/month.
Advanced capabilities will cost approximately $25/month.
Has a free plan. Additional functionality starts from $13/month.
Each of these programs excels at all tasks of a UI designer. After studying Figma, you will quickly master the rest, if needed.
- Figma – the clear leader of the list. It provides the widest capabilities for a UI designer and works on all platforms (Windows, MacOS, Linux) and even in the browser. Moreover, it does this very quickly and for free. And if you work in a team, it starts at $12 per month.
- Framer X – a powerful tool for creating interactive prototypes. For a UI designer, it may be an interesting option for testing ready-made designs and has many capabilities to show animations and the logic of interaction with the interface.
- Adobe Photoshop – a key tool for working with raster graphics, retouching, digital painting, and creating visual effects. Most often, UI designers use Photoshop when additional work with raster content is needed. For example, creating banners or processing photographs.
- Principle – a tool for creating interactive animations and animated prototypes that helps demonstrate how the interface reacts to user actions. The advantage is the ability to generate both video in mp4 format and gif. The program can also be used to generate gifs or videos for your own portfolio.
It is worth noting that Adobe XD and Sketch (editor only for macOS) can perform almost all the same functions. However, their popularity among designers has significantly declined in recent years due to the development of Figma's features: plugins, advanced auto-layouts, user-friendly interface, etc.
There are free and paid plans (from $25/month).
Photoshop is paid. The subscription starts from $12/month (with an annual subscription).
Principle costs $129, operating on a one-time purchase basis. A trial period of 14 days is also available. Interestingly, the program will only count the days you use it.
Depending on the preferences and stylistics of the graphic designer, both raster and vector editors can be used.
- Illustrator – a powerful paid vector graphic editor for Windows and MacOS platforms from Adobe. It is used for tracing and editing icons and illustrations;
- Photoshop – a powerful paid raster editor from the same company. It is probably the most functional raster editor available. It allows for retouching and modifying photographs, creating collages;
- CorelDRAW – a program for working with vector graphics, layout, and image processing.
The list does not include Figma and Xd, although they also allow working with vector graphics, drawing icons and illustrations (which will be quite sufficient for us to start). However, graphic designers mostly choose Adobe products because they are tailored for creating logos, drawing illustrations, and making collages. And importantly – files for printing. Because they have a special color profile (CMYK).
Types of Graphics
Graphic resources are divided into raster and vector. When you start practicing, you will see how it affects the work. Right now, I can only explain it theoretically.
Vector Graphics
Vector graphics describe images using mathematical formulas, more specifically Bezier curves. Such an image does not lose quality when enlarged compared to raster images. This is its main advantage. It is mainly used for logos, icons, and illustrations. By the way, Figma, Sketch, Penpot, and Xd are vector editors, but they also have a minimal set of features for working with raster images.
Raster Graphics
Raster graphics describe images using a set of colored dots. When enlarging such an image, you can observe pixels — the smallest square-shaped elements. It is used for photographs and illustrations with a large number of colors. Photoshop is the most powerful raster editor, although it can also work with vector shapes.
If you open a raster and vector image in their respective editors and enlarge them, we will see that:
- The enlarged raster is a grid of pixels;
- The enlarged vector is drawn with the same quality and consists of points and curves that define how to redraw the lines.
Homework
From now on, this course is designed for independent study and completion of homework assignments. I understand that some tasks may be challenging for you.
For additional support, use the chat in Telegram. Here you can ask questions related to the lessons or view examples of correct completion from other students.
The chat is not available for citizens of Russia.
Homework is in development.
Conclusions
This lesson was meant to provide you with information about the current programs that a modern UX/UI designer works with! The demand for knowledge of these programs will be encountered in most job vacancies. As you can see, almost all the software is paid, but to learn and use Figma (currently the most popular tool), you do not need to purchase a subscription. Our next big module will be dedicated to studying this program.
Follow me on Instagram @frusia.pro, so you don't miss announcements of new lessons and receive useful tips for UX/UI designers, including about creating a portfolio and job searching. In the feed, you will find a multitude of practical posts, which will help you improve in design every day. Join and develop your professional skills with me!