Our first 6 months with Figma
From a multinational to a startup. Is Figma a good fit for your team?
This article was originally published in Spanish by Patricia Pérez. You can find it here.
We have been working with Figma for more than six months now and this tool has crept into different projects of the studio, among one of them being the largest e-commerce in Spain.
Today the aspects of Figma that give us the most value are:
- Teamwork
- The versatility of the styles
- The possibility of having libraries
Teamwork
In our opinion, if we are talking about a design team working on the same product, Figma is the tool to use. Several people can be working simultaneously on the same file and visualize the changes that are made in real time.
Within the first few days working with Figma in a large team, we realized there was a big problem of working collaboratively: organization. We had to remove the fear of what happens if everything one has been working on is deleted or modified by someone by mistake. Faced with these problems and concerns, we proposed a mechanism to work on different pages and a process to work on version control.
How do we solve the organizational problem?
To work on Figma, we structured the file into 3 types of pages:
- Master Page, where all the content that is or will be uploaded to production is stored.
✅ Master
- Revision Pages, which contain finished versions but are being validated with the product manager, product owner, the development team, or being reviewed with the design team.
👀 [User flow or workflow name or functionality] — [Name of person in charge]
- Pages in Progress, pages that a person is working on. We have as many pages in progress as User flow/ workflow or functionalities are being worked on and each of these pages will belong to only one person.
⚙️ [User flow/ workflow name or functionality] — [Name of person in charge]
- Waiting Pages, pages belonging to workflows that have stopped for some reason. These are not finished, but there is no one working on them either.
✋🏼 [User flow’s or functionality’s name] — [Name of person in charge]
Having the pages differentiated in this way allows us to know the status and whether the work is finished or not. In addition, having the pages differentiated by people avoids having a thousand cursors flying over the work you are doing 😉.
How do we ensure that no work is lost?
To avoid the risk of a heart attack if any work has been lost we integrate version control. This functionality allows us to always go back and rework our designs. Figma saves our work and performs this control automatically every few seconds.
But the problem with this automatic saving is that it will catch each member of the team at a different point in their work. That’s why manual version control is important. We create a commit for every use. This way we can have clear checkpoints every time a functionality is validated or there is a big change, allowing us to go back at any time.
Versatility of styles
Another of Figma’s 🏆 advantages is how it treats styles. You’ll love it if you work with design systems and like to organize everything.
In Figma, there are color, text and shadow styles. The behavior Figma gives them is different from the way Sketch treats them. Styles don’t save properties, they save a skeleton.
How do Figma’s styles differ from Sketch’s?
Figma simplifies styles. It makes it much easier to work with them by collecting only the values of the style itself.
For example, text styles do not imply a particular color or alignment, but only the font, font weight, spacing, kerning, and size. On these, you can apply color and alignment, so that, for example, you can have two texts with the same style of text but a different color.
Color styles could be understood as layer styles in Sketch. However, Figma only saves the color, which can be applied to a layer or to text. Shadow styles only save the type of shadow, and like color styles, they can be applied to both text and layers.
The way Figma treats components and styles opens up a wide range of opportunities to work on design systems. And specifically through the reuse of components since they are not tied to specific properties. We have gained flexible exploration capabilities while maintaining consistency.
Joining teamwork with the maintenance of a design system
In the studio, we work with design systems. When we moved to Figma, we stored the design system within each Figma file we worked on. After several months of working like this, we realized that this method was unsustainable. We invested many hours in maintaining the design systems because if there was a change in one of them we had to apply it to the rest. It was at this point that we explored the functionality of Figma’s Team Libraries.
The team libraries are a file that acts as a library of components and styles that can be shared and reused throughout the rest of the files. That is, the rest of the project files can use all the same components and styles that are in the library. In this way, we can keep them centralized, synchronized and updated throughout all the team member files.
In addition, by creating a library we achieved:
✅ Reduction in file size.
✅ Avoidance of different versions if you have different files.
✅ More consistency.
✅ Efficiency when modifying a component, as it does not have to be modified in all the files where it is used.
To use the team’s library just enable it in the file you want to use it in.
The styles and components of the team’s library coexist with the local components of the file. However, in order to maintain order and take advantage of the benefits provided by the libraries, it is recommended that all the components and styles used are those found in the library.
To update the library, just make the changes and publish them. In this way, we make the changes spread automatically to the rest of the files that use the library.
In the upper right corner, you can find the Team Library icon. When the notification appears, one can make changes.
Finally, it is interesting to note that Figma allows you to write descriptive rules for the components. This has been really useful to transmit knowledge to the team and to avoid the loss of information, as we use them to describe restrictions and ways of using the components. These descriptive rules are shown in each instance of use so when you use it you can get the information quickly and easily.
Conclusion
In short, Figma is a very good choice if you’re looking for teamwork. Figma is a tool that is constantly being updated so if you’re not completely convinced now, don’t rule out trying it again in a few months. For me personally, it is a comfortable tool to use that allows me to develop my work quickly in a versatile and systematic way.
What would we like to see in the future?
One thing comes to mind:
- We would like to see better integration with Zeplin, as when uploading screens to Zeplin from large files there are times when an unexpected error occurs.
Our way of solving this is to remove the screens we want to upload to Zeplin to a new file and upload them from it 😉
- Plugins make our lives a little easier. We know they are working on it but this is something we’d like to gentle mention 😇.
- Functionalities such as pasting a layer in place or giving the possibility to resize a Frame without worrying if it will dislocate everything inside its folder.
Another trick: To resize without changing the components just hold down command while changing the size or have all the elements anchored to the top.
