In September 2022, Adobe announced that it was buying Figma, the publisher of a web application that competes with Adobe XD... before backtracking. Today, Figma is the leading tool for designing digital interfaces. From the design of a simple wireframe to test an idea to the creation of an interactive prototype that looks exactly like the final version of a product, its place in the hearts of designers has only grown. So how and why has Figma carved out such a place for itself in the competitive market for design tools? Florent Bachelier, UX designer, explains.
Figma is a professional tool initially intended for interface designers (UX designer). It has different versions depending on needs: a free version and three paid versions: a “Professional” version, an “Organization” version, and a tailor-made “Business” version.
You can access Figma for free and thus explore the vast majority of these features. If you want to use it professionally, you will of course have to upgrade to a paid version. The initial price of Figma Professional is 12 euros per month for a publisher.
That said, a number of features attract design professionals to Figma, such as the ease of real-time collaboration, the ability to create advanced interactive prototypes and integration with other popular tools.
The collaborative aspect, the key to the user-centered approach
The application is cloud-based, making it easy to access all your working documents, wherever you are. Figma is accessible via web browsers on all major operating systems. Figma's great strength lies first and foremost in its effective collaboration.
Collaborate in real time
Being able to collaborate and communicate in real time allows project stakeholders to become more efficient. Figma has always been keen to encourage this collaboration. The tool should not be a hindrance, quite the contrary.
“Figma makes it easy for teams to work together, no matter where they are. »
The tool pushes this collaboration ever further. This is evidenced, for example, by the recent integration of an interface dedicated to developers.
The fashion dev
This module has been integrated into the interface since June 2023 (Beta) and will then be included in a paid version.
Figma also integrates a collaborative whiteboard (Figjam) which allows you to run workshops, meetings or collect information on users.
“We share everything in a single tool. »
This effective collaboration also results from the possibility of easily sharing work, making comments and modifications live, and using a common language (CSS). Or to have many people working on the same file without bugs or participation limitations.
Integrate other collaborative tools into Figma
Figma can be integrated with other design, project management and development tools, such as Sketch, Adobe XD, Jira, Slack, Photoshop or even Illustrator. There is very good communication between the Adobe suite and Figma. For example: it is possible to copy and paste Adobe XD files into Figma.
A number of plugins allow you to enhance these designs or use resources made available by other designers.
Finally, it is possible to export all these works. The vector format enabled by the tool makes it interoperable.
A user-centered approach
The other strong point of Figma lies in its user-centered approach, which is very important for designers. The Figma team asks its community for feedback, listens, and tests features. This allows it to have high velocity and improve the designer experience with each update.
Complexity hidden in simplicity
The interface structure is easy to understand. At first glance, using Figma is quite simple.
The essential features of Figma
Figma allows you to create models, collaborate in real time, make comments and annotations. But also to use libraries of ready-made components or to create a design system from scratch. Users can also create interactive prototypes, which improves immersion and allows for user testing.
Essential features
- Layers
- Shape tools
- Add images to design files
- Masks
- Sections
- Creating layout grids
- Auto Layout
- Creating dynamic designs
- Styling elements
- Typography
- Browse and apply fonts
- Adding links to text
- Components
- Component Properties
- Variables
- Libraries
- Create and insert component instances
- Create prototypes
- Prototype scrolling and scrolling options
- Create advanced animations
- Variable modes in prototypes
- Multiple actions and conditional logic
- Using expressions in prototypes
- Using variables in prototypes
- Fashion dev
- Import files into Figma
- Export from Figma
- Share your work
Advanced features
Figma brings the most commonly used design parameters to the forefront. But we can always go more finely into the granularity of the parameters. This is the case, for example, of aspects motion design interactions or details of a typography (the baseline).
Example: a new advanced prototyping feature
Variables allow you to create complex prototyping.
Meiso: advanced prototyping capability
Example: use of Figma for user tests (new functionality).
Thus, there is no great difficulty encountered when using Figma because its level of complexity depends on user needs. There is no need to use complex features as a first step to create a low-fidelity mock-up and test a concept.
An offer adapted and attentive to its users
Figma is very close to its users. Small changes are made regularly to the software throughout the year. Another advantage: users are supported during these annual updates, which are also very quick.
“Figma editors have adopted a continuous improvement approach. »
Example: The latest update allows users to hover over typographies in the Typography Explorer to see how they look directly on their work. It was a deficiency that had been addressed.
In this way, Figma users are involved and contribute to the continuous improvement process. Publishers, listening to their users, regularly ask them for feedback. The user experience is therefore optimal.
On Figma, users form an active community.
Note on the security side: there is a password creation setting, even with the professional version.
Florent Bachelier's user experience
How I use Figma
L'user experience design (UX) predominates in my profession, to the detriment ofuser interface design (UI). The basis is rather information architecture. I therefore first use the functionalities that allow me to create low fidelity models (colors in shades of gray, hierarchy of typographies, basic interactions) before going further in the design process (more advanced UI, prototypes ).
My tips for optimizing interactive design
I use three types of pages in a Figma file (free):
- Models Page;
- Components Page;
- Icon Libraries page.
You must always clearly differentiate between master components and used components (for example: instances). I create a batch of components or I use a batch already created. The goal is to factor the elements as much as possible to avoid lengthy modification work. The idea is also to use the working logic of developers to reduce barriers and promote collaboration.
I produce my designs only in auto-layout. This layout feature allows elements to be repositioned and resized automatically. The work is more rigorous, but the design is more harmonious and above all more easily transposable into production.
My advice for new users to fully leverage Figma in their design work
- Favor simple functionalities to start modeling.
- Sometimes the best is the enemy of the good: be open to different methods to stimulate creativity.
- Be rigorous in terms of spacing (margins). Use existing guidelines. For example: use a multiple of 4 for spacing and therefore always have 8 pixels between an image and text.
- Use auto-layout whenever possible when mockups serve as specifications for developers.
Figma is an essential tool for designing digital interfaces, thanks to its wide range of functions, the principle of real-time collaboration and its user-centred approach, which involves an active community in the continuous improvement process. Figma offers a flexible, collaborative platform that is constantly evolving to meet the needs of designers and digital interface design professionals.
