The studio
Next section
Siguiente sección
Product Design Handbook
Figma is one of the main tools that we use in the studio. It’s part of our day-to-day life and we use it to design all our projects.
In this section, we will detail how we use and how we organise Figma in mendesaltaren. Below you’ll find an example organisation proposal to show how we work on Figma.
Figma is based on the following hierarchy, formed of five layers:
This structure allows us to have control over the file management and the permissions granted to each user. Teams as well as projects have the option to restrict permission for different users on Figma. Depending on what restrictions we want and the type of account we have, it makes sense to differentiate either by teams or purely by projects.
Mendesaltaren has a Professional Team account type on Figma, which means that we dispose of three organisational layers: Projects, Files and Pages. Each of our projects will be represented as a project on Figma and, within each of them, we create the files for that specific project.
Permissions can be managed on a project level and on a file level. The type of access options are view-only, edit or admin. It’s important, if we are going to invite someone with editing permission, to notify the Lead Designer of the project beforehand.
By default, the projects that we create on Figma will be public to everyone. However, Figma has the option to create “View-only projects” and “Invite-only projects”.
In terms of files, we differentiate between the following:
Figma allows us to add covers to make the files easier to identify and to work with.
File cover suggestion:
By default, Figma will show the cover photo (thumbnail) of the file on the first page. However, you can select any Frame and make it the thumbnail (right click on a Frame → Set as thumbnail)
In order for the content to appear as a thumbnail, the Frame must have the following dimensions: 620x320 px.
Generally, we will leave the first page as the thumbnail.
A good naming system will make it quicker to find what you are looking for.
Recommendation: Don’t create names that are too long so that they can be seen altogether.
An example of page structures within a file:
It’s important that the name of the page describes what’s in it. It also helps to have a code so the rest of the team knows what the current state of the contents of each page of the file is. This helps to avoid misunderstandings and avoid the loss of information.
Code suggestion:
✅: Finished and reviewed
👀: In revision
⚙️: In progress
❌: Rejected
⚰️: Discarded
In order to encourage communication within the team and with the client, and to keep track of what has been worked on, we will use Version History. Version History helps us to make commits in a specific moment of the file. It’s important to use it when we have hit milestones in the file, especially in projects related to design systems or in which several functions are being worked on.
You can read more about how to work with Version History here.
In order to organise pages, we can use the following naming structure:
The identifiers (id) will be incremental numbers preceded by a 0.
For example, all the pages of a Sketch file should appear like this:
Within pages, we work with Frames. To organise these, we group them into flows or user stories. Each row represents a possible app or web flow that is being designed. At the start of each row, there must be a Frame (as a thumbnail) that contains the name and description of the flow that the Frames of said row are representing. The description doesn’t have to be very extensive or detailed, just enough for the rest of the team to understand the context of what’s being worked on.
To name the Frames we can follow this naming structure:
For example, the flows in page 01 Account should be as follows:
Libraries are Figma files that allow us to share all the components and created styles with the team. Level wise and in terms of organisation, we will treat them as any other file. These will normally be used for design systems or assets that we would want to share between files and projects.
You can read more about how we work with design systems here.
In order to convert a file that is in a library, we have to publish it. Publishing is done on the Assets Panel, which is found on the left-hand side panel on Figma.
We adapt our organisation to our clients, their processes and the way they work.
Designing a Workflow with Figma
Depending on the client and the team with whom we are working, we recommend using the Organisation Team account on Figma. This is especially useful for corporate companies, because we can set up group-based organisation. This allows us to have a higher level in the file organisation hierarchy. What’s more, this type of account has the option of some advanced settings that allow us to see analytics and have more thorough control. A clear example is the library panel, which is useful to get to know the metrics of the design systems.
Having teams allows us to:
File organisation can be understood as a directory of folders in which, on a first level, we find the teams and, on a second level, the projects that allow us to classify files by: the stage they are in, the part of the product, the platform, etc.
Design systems help cooperation between teams and decision-making, by sharing styles and components that exist among the different files.
Having a team dedicated to design systems allows us to have more accurate control of the editing permissions and, therefore, who has permission to make changes that affect all the linked files.
In order to achieve cooperation, everyone within the organisation will be able to see the libraries and the files with viewer permission. This way, the team can view the updated documentation.
When a new user is added to the organisation, this is added with a Viewer or Editor permission. However, specific permissions can be granted to each team and for each project.
Teams can be Open, Closed or Secret, so we can control who has access.
Having independent teams allows us to categorise and organise files by project within the teams. This way, each team will represent a type of file:
The organisation of files and folders will be done in the same way that we explained in the section Organisation: mendesaltaren.
The Admin Console is especially useful when working with a design system.
Figma allows us to have active libraries by default in the organisation files. This can be very useful for brand assets and resources, like cursors or thumbnails. Libraries by default are activated from the Admin Console.
From the Admin Console we can also access the statistics of components and the styles within a library.
These are some of the most used plugins:
Let’s talk
We help your business thrive through strategy and design. And while we’re at it, we have fun doing it. How can we help you?
