Figma: what is it and how does it work?

Figma is an innovative and powerful vector graphics editor for the web whose user base has grown significantly over the years: today, it’s one of the platforms most used by UX/UI designers, communications agencies and other firms.

The first version of Figma was launched in 2015 with the stated goal of enabling “anyone to be creative by creating free, simple, creative tools in a browser”. In 2022, American tech giant Adobe – famed for its suite of digital design tools – bought Figma for about 20 billion dollars.

The future of Figma is still uncertain, but the platform remains without doubt one of the most popular graphics editing tools for websites and app interfaces. Today, we’re going to look at what Figma is and how it works: it’s a guide for those who are unfamiliar with the program, or have perhaps only heard of it.

What is Figma?

Figma is a platform for graphics editing and interface design that is web-based and collaborative. With Figma, you can do a bit of everything graphics-wise – from designing websites and graphic interfaces for apps to creating posts for social media and putting together presentations – and that’s why firms and design agencies love it.

One of the most innovative features of Figma is that it’s collaborative. Different members of a team can work on the same file in real time: this means that more than one graphic designer can work on a project at a time, not to mention developers and copywriters.

The result? You save a ton of time: no more interminable file sharing. What’s more, collaboration boosts creativity.

The fact that Figma is web-based – in other words, accessed through a browser – is another big advantage: there’s no need to install and update programs, or to buy licences. Any team member can work on a project from any operating system without, say, having to worry about the fonts on their machine or changing computer.

Everything is saved in the cloud and in real time, thus avoiding problems like accidentally working on an out-of-date file or wasting time sending and receiving big documents. Obviously, to use Figma you’ll need to be pretty much always online and have a good internet connection.

You now have a clearer idea of what exactly Figma is. At this point, we should say that Figma is a free program, at least in its basic version. The free Starter package enables teams to work on three files in a project and save the previous versions for 30 days. Students and teachers can also request free access (here) to the professional version of Figma – which otherwise costs $12 a month per user.

So, to sum up:

• Figma is a program for graphics editing and prototyping.
• Figma is mainly used for digital design: in other words, designing websites and app interfaces.
• Figma is web-based: this means that there is no software to download and install; instead, it’s used via a browser and an internet connection.
• Figma is collaborative: different users with different roles can work on a project at the same time.
• Figma is real time: everything is constantly saved in the cloud.
• Figma is free in its basic version.

How does Figma work?

Hopefully, you’ve now got a clearer idea about what Figma is and its potential. But before we look at how Figma works – at least when it comes to the basics and its most innovative features – we need to clarify an important aspect: Figma really comes into its own in all the phases prior to the final design of a graphics project, not just the end product.

Brainstorming, evaluating different graphics options, prototyping, gathering and implementing feedback: Figma can be highly effective for all of these stages! For example, in Figma, a team of designers can collaboratively put together the wireframe for a website ( i.e. the simple skeleton of a design without colours or visual elements), immediately gather feedback from other team members or put the best option to a vote. It can also be used for prototyping an app interface: this means simulating navigation of and interaction with a design.

Now let’s see how the basic features of Figma work. At the end of the article, we’ll also recommend some useful courses and resources for getting more out of Figma.

Creating an account

To create an account, simply sign up for free at figma.com. Once you’ve signed up, teams, projects and files can be set up. Invite other users to the team to give them access to the projects you’re working on together.

The work area

The Figma work area is an enormous space – covering up to 65 thousand pixels – in which you can add the various design screens that you’re working on.

To set up your screens, use the frames tool: you can choose between dozens of pre-set sizes, such as iPhone 14, Apple Watch 41 mm or a Facebook post. This enables you to, say, bring together in a single file the different pages of a website or show how the same page should be displayed on different devices.

Libraries and communities

Another interesting feature of Figma is its component libraries. If you’d rather not waste time building elements from scratch, you can speed up the creation of a design – or a draft – using a whole host of graphic elements from libraries. In them, you’ll find a ready-made navigation bar containing the most commonly used buttons.

Browse the Figma community – one of the most interesting and useful places for users of the platform – to look for these and more. Here you’ll find inspiration, brainstorming materials, graphic elements and so-called design systems, in other words, a set of rules, guidelines and graphic elements that help bring consistency to your graphic design.

Prototyping

In Figma’s prototype section, you can connect together different frames or graphic elements: for example, a connection can be placed on the “about” item in a menu, which will then take the user to the corresponding page. By creating a prototype, you can simulate how a website or app works from the very first stages of design, allowing you to see what works and what needs improving!

Gathering feedback

Once you’ve shared the file with the rest of the team, you can receive and insert feedback with convenient coloured sticky notes. These notes are used to vote, report problems or make suggestions. For example, you can give your team three different options for the design of a homepage and then find out, in real time, what your colleagues think about them.

You can also leave voice comments, which the program then converts to text. Handy, right?

Courses and other useful material for using Figma

Now you know what Figma is and how it works, you’ll have realised that it offers endless possibilities! We bet you already want to give it a go and try some creative experiments with your team.

If you really want to become a pro, there are all sorts of free resources online for learning how to get the most out of Figma.

A useful starting point is the introduction provided by Figma that you’ll find below: in just over an hour, this series of videos will give you a complete overview of the platform.

 

The web offers myriad courses, many of which are free. As well as the official courses from Figma, each with ten-minute-long modules, there are also courses for beginners provided by The Designer Ship.

 Not bad, eh? Now that you know what Figma is and how it works, what will you use it for?