There is a wide range of programs that UX/UI designers use. 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 navigate modern programs and be able to choose what you need.
Having mastered 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 delve into theory and look at what vector and raster graphics are and what their differences are. And what tools are used to work with them.
- Notebook and Marker – allows you to quickly create rough sketches of wireframes and make annotations of user flows.
- Figma — perfect for all tasks. Allows even creating interactive prototypes with simple animations and running them on a smartphone. Works on all platforms (Windows, MacOS, Linux) and in the browser. Comes with a free wireframe kit.
- Adobe XD — an alternative and competitor to Figma. Easily integrates with other Adobe products but has several 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: multiple designers can work on the same project simultaneously, exchanging comments and edits directly in the cloud. In Adobe XD, this functionality is less integrated, 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 the 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 possibility to develop complex interaction scenarios and generate HTML, which allows embedding Google Analytics (or any other service to track user behavior) and conducting 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. Has a free plan that allows creating 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 incorporate gestures into prototype management, as well as define logical conditions for each component. Integrates with Figma and Adobe XD.
An essential 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 rates 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 features will cost approximately $25/month.
Has a free plan. Additional functionality from $13/month.
Each of these programs handles all the tasks of a UI designer excellently. After learning Figma, you will quickly master the rest if needed.
- Figma – the undisputed 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. It does this very quickly and for free. And if you work in a team, then from $12 per month.
- Framer X – a powerful tool for creating interactive prototypes. For a UI designer, it can be an interesting option for testing the finished design and has many features to showcase animation and interaction logic 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 responds to user actions. The advantage is the ability to generate both mp4 video 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 style of the graphic designer, both raster and vector editors may be used.
- Illustrator – a powerful paid vector graphic editor for Windows and MacOS platforms from Adobe. It is used for drawing 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 for 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 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. This is its main advantage. It is primarily 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 functions for working with raster.
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 determine 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 review 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 postings. 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, particularly about creating portfolios and job searching. In the feed, you will find many practical posts, which will help you improve your design skills every day. Join and develop your professional mastery together with me!
Continue learning