Figma: what is it and how does it work?
Figma is an innovative and interesting vector graphics editor designed for the web whose use has been growing more and more over the years: today it is one of the most used platforms by UX/UI designers, communication agencies and companies all over the world!
The first version of Figma was launched in 2015 with the stated goal of enabling everyone to “be creative using a browser.” In 2022 Adobe, the U.S. giant known for its suite of digital graphics programs, bought Figma for about $20 billion.
We still do not know what the future of Figma will be, but without a doubt today the platform is one of the most popular graphic editing tools for websites and app interfaces. Today let’s take a look together at what Figma is and how it works-a guide, this one, for those who are still unfamiliar with the program or have only heard about it!
What is Figma?
Figma is a platform for graphic editing and interface design: it is web-based and collaborative. With Figma you can do a little bit of everything graphically-from designing websites and app GUIs to making social media posts and creating presentations-and that is why it is an increasingly popular tool in companies and graphic design studios.
One of the most innovative features of Figma is definitely the fact that it is a collaborative tool. Different members of a team work on the same file and in real time: this means that different graphic designers can collaborate on the creation of a design, but also that developers and copywriters are already involved in the early stages of the work.
The result? It saves a lot of time: no more endless file exchanges. In addition, collaboration boosts creativity.
The fact that Figma is web-based-that is, it is simply accessed through one’s browser-is another feature that people really like: there is no need to install and update programs or buy licenses; all team members can work from any operating system without worrying about, among other things, fonts installed on machines or changing computers.
Everything is saved in the cloud and in real-time, thus avoiding various problems-such as carelessly working on outdated files or wasting a lot of time exchanging even very heavy documents. Of course, to use Figma you will have to be online practically all the time and have a good and stable Internet connection.
In Figma several members of a team can collaborate on a project. Image: figma.com
You now have a better idea of what Figma is. Finally, we must say that Figma is a free program, at least in its basic version. The free Starter package allows teams to work on three files within a project and stores previous versions for 30 days. Of note, students and teachers can also request free access (from here) to the professional version of Figma-which otherwise costs $12 per user per month.
In summary, what is Figma:
- Figma is a graphic editing and prototyping program.
- Figma is used primarily for digital design: that is, designing websites and app interfaces.
- Figma is web-based: meaning there is no software to download and install, but it is used through the browser and an internet connection.
- Figma is collaborative: several users with different roles can work simultaneously on a project.
- Figma is real-time: everything is constantly saved in the cloud.
- Figma is free in its basic version.
How does Figma work?
Do you have a clearer idea of what Figma is and its potential? Before we look together at how Figma works-at least in its basic and most innovative elements-let’s clarify an important aspect right away: Figma shows its full effectiveness not only for the final design of a graphic product, but also and especially in all the previous stages.
Brainstorming, evaluating different graphic options, prototyping, collecting and implementing feedback: you can use Figma very effectively at all these stages! For example, in Figma, a team of designers can collaboratively build the wireframe of a website, i.e., the simple skeleton of a design without colors or styles, immediately gather initial feedback from other team members or have them vote on the best option. Or prototype the interface of an app: that is, simulate early in the work the navigation and interaction within a design.
Let us now explain how the basic aspects of Figma work. At the end of the article we will then recommend some courses and resources to go deeper and thus become Figma professionals!
Creating an account
To create an account, simply sign up for free at figma.com. Once registered you can establish teams, projects and jobs (files). Invite other users to the team so you can provide them with access to the projects you will be collaborating on.
The work area
The work area in Figma is a huge environment–a square up to 65 thousand pixels–within which you can place the different screens of the design you are working on.
To set up screens use the frames tool: you can choose from dozens of predefined sizes, for example iPhone 14, Apple Watch 41 mm or a Facebook post. This way, for example, you can collect the different pages of a website in one file or show how the same page is to be displayed on different devices.
Libraries and communities
Another interesting aspect of Figma is the component libraries. If you don’t want to waste time building elements from scratch, you can speed up the creation of a design – or a draft – by using the wide variety of graphic elements already in the libraries. In the libraries you will find a navigation bar already made, for example, icons or the most common buttons.
Browse the Figma community-one of the most interesting and useful places for people using the platform-to look for these and other elements. Here you can find inspiration, brainstorming materials, graphic elements, and so-called design systems, which are a set of rules, guidelines, and graphic elements that help give consistency to one’s graphic product.
Prototyping
In the Prototype section in Figma you can link different screens or graphic elements together by identifying nodes: for example, a node can be placed on the “about” item of a menu that will take the user to the corresponding page. Or on a “register for newsletter” button. By starting the prototype you can simulate the operation of a website or app interface early on, so you can understand what works and what needs improvement!
Gathering feedback
Once the file is shared with the rest of the team, feedback can be received and placed through convenient colored post-its. Post-its are used to vote, report problems or give advice through more structured comments. For example, you can present your team with three different options for a home page design and understand, in real time, what your colleagues think.
Comments can also be communicated verbally to the program, which will transcribe them. Convenient, right?
Courses and other useful materials for using Figma
Have you seen what Figma is and how it works? The potentials as you may have guessed are endless! We bet you already feel like getting your hands on the program and doing your first creative experiments together with your team.
If you would then like to become a pro, there is a wealth of free resources online to learn how to use Figma even better.
A useful first introduction is the one provided by Figma itself and found below: in just over an hour the different videos give a comprehensive overview of the platform.
Online there are then a myriad of courses, mostly free. For example, we point out this course by Sherpa Design, the Italian UX/UI Designer community. Then there are the official courses offered by Figma, with modules of about ten minutes each, and the beginners’ course offered by The Designer Ship.
Nice, isn’t it? Now that we understand what Figma is and how it works, for which of your next projects will you use it?