A beginner’s guide on how Figma is structured

Figma is one of the fastest growing design tools, growing 2.2x in the last year and capturing 32% of respondents in a survey conducted in 2019.

However for people transitioning from Sketch, Adobe XD or other design tools, Figma could take some time to get used to as it has a different way of organising files. If you’ve haven’t used Figma before, the below guide should be helpful in getting you started.

Below is the first part of two, which explains how Figma is laid out, how sharing works, how the free vs paid plans differ and how to use team libraries. In the second part, you can read how I made use of this organisational structure for a real product team with other developers, product managers and senior stakeholders.

Figma’s Hierarchy

Team

Description
A team is simply a space where everything and everyone live, much like shared folder.

Permissions & Sharing
You can invite other people to the team and set them as admins, editors or viewers.

Plan Restrictions
Figma’s free plan allows you to have up to 2 editors and unlimited viewers in a single team.

Project

Description
Before creating any new files, a project must be created first. You can see a list of all your created projects by clicking on your team’s name in the left sidebar menu. You can also ‘favourite’ a project to always show on the sidebar menu.

Permissions & Sharing
By default, everyone on the team has access to all projects, but you can set some projects to only be visible to yourself, or to certain people on the team.

Plan Restrictions
Figma’s free plan only allows for 3 projects at a time.

Files

Description
Multiple files can be created under the one project — this is where your designs live. Within a single file you also have a version history which automatically saves versions of your file over time. You can also choose to save a particular version manually by including a name and description of changes.

Permissions & Sharing
Here you cannot exclude someone invited to the project from seeing a particular file. In other words, if someone has access to the project, they have access to all the files belonging to that project.

You can however invite someone external to the team entirely to have access to only that particular file (comes in handy for one-off stakeholder reviews for people not usually involved with the project).

Plan Restrictions
Figma’s free plan only saves version histories from the past 30 days.

Pages

Description
Pages are contained within a file and are accessible from the side menu. Each page can contain multiple artboards that link to each other (e.g. clicking on a button takes you to the next artboard). Note however that you can’t prototype an artboard to go from one page to another; all artboards in a single flow must be contained within the same page.

Permissions & Sharing
You can share a prototype by hitting the play icon in the top right and then clicking Share Prototype. This will share only that artboard without giving access to other pages.

Plan Restrictions
Same for free and paid plans

Team Library

The last thing you need to be across are Team Libraries. Figma allows you to store styles and components in a team library which makes it easier to reuse those styles and components across your designs; they are equivalent to Sketch’s symbols or Adobe XD’s assets panel.

Figma separates your team library into two categories:

Styles: Includes colour, text, shadow effects etc…
Components: Includes any design assets you create (things like navigation bars, icons, buttons etc…)

Figma’s paid plans allow you to publish both styles and components, but the free plan only allows you to use styles.

This means that if you’re on the free plan and want to reuse a component, that component needs to be in the same file you’re using a component for. If you go to a different file you will still be able to see all the styles you published for that project, but you will not have access to components from a different file.

That wraps it up! You can check out Figma’s help centre for more details; otherwise, you can also check out how you could start organising Figma for your own team in the second part of this article