I see Figma as a tool that helps us create new flows and features, share our ideas with the team, test edge cases, and create clear guidelines for developers to implement the design. Furthermore, it helps us build prototypes to create usability tests to test our designs. However, we must remember that Figma is not our product.

With my experience as a product designer, I observed that many designers create and maintain a specific Figma file containing all the product screens and think this is the source of truth for the product.

The post explains why It happens, what’s wrong with it, and gives tips on how to deal with it more effectively.

Why do people use a specific Figma file with all the screens?

Designers often make a big file of Figma where they add all the screens available in the product. In other words, every time a new release comes around, the designer copies all the information from the Figma file and then pastes it into the master file.

They use the master file to:

1. A starting point for design: Consequently, in the future, when the designer needs to work on the same screens again, they enter the master file, copy the screens they need from there, and then open a new file and start working on the new design.
2. Explaining how the product works to other people. Demonstrate how the product works to others. (For example, a new designer joins the team).

What is wrong with this approach?

Theoretically, it seems like a great solution, but in reality, it doesn’t work well because:

1. It adds a step to the design process — copying and pasting the master file, replacing the old screens, and checking to ensure everything is correct. That means time-consuming.
2. To maintain it, you’d have to enter this file, update it, and review many screens every time you update the design system library. That means time-consuming.
3. A lot of times, developers change the screen without telling the designer. It shouldn’t be like that, but in reality, the product manager can ask them to add input to a form or change the label, and they will not inform you. At this moment, Figma’s screens in your master file are not up to date.
4. Although you have a prototype, the Figma app is not fully interactive to help you explain the product effectively. To put it another way, it’s like showing the person what the dish tastes like based on what they read in the recipe rather than cooking it for them.

How to work faster and not create a huge file with all the screens

I believe there are some simple solutions to the problems I showed above.

Explain the product
You can explain the product by opening it and using it with the person you want to explain it to. This is much more helpful, and people can study and understand the product better. Yes, it’s easy.

Creating a new design file
Creating and maintaining a huge file with all the information is unnecessary if you want to work fast. The first thing you need is a great design system UI kit, and it is critical to build and maintain this UI kit.

Once you have a high-quality UI kit, all you need to do is build screens using components. When creating a new Figma file, you should add the task number and a brief description to the file name. For example, AAA- 100 import users. In this file, build the screens with components from the design system. After you finish the design, you can leave the file as is.

Next time you need to improve the import users flow, you can open this file and copy the relevant screens to a new file, like AAA-200-improve import users and continue work from there. Also, I suggest you look at the product to make sure nobody changed it without telling you.

That is all. You can continue designing from here.

Advanced solutions for working fast in Figma

Google Sheets Sync pluginLet’s say you’re working on a table and want the data inside to be accurate for your flow, like a table with user info. You can fill them one by one or use a plugin that imports an Excel file and fills the table. The plugin is called Google Sheets Sync. If you want to see a full tutorial on how to use it, check out this video by Moonlearning.

HTML to Figma pluginUsing this plugin, you can convert HTML pages to Figma files. I think it’s a very handy solution when the product does not have a design system UI kit, and you need to deliver something very quickly.

Using artificial intelligence
Uber design team showcased this concept in Figma schema 2022. They showed a plugin for Figma that would convert screenshots to Figma files. I’m unsure if it’s a concept or if they’re using it now. However, I’m sure these types of tools will be available in the future for designers, helping us to design faster. You can see it here.

To summary

In this article, I explained why maintaining a Master Figma file with all the product screens is a waste of time and why you need to explain the product using the real product. In addition, we discussed some techniques to work faster in Figma without creating a large file that contains all the product screens.

Thank you for reading the article. I hope this article gives you ideas on how to use other approaches instead of creating a huge Figma file with all the product screens. Please feel free to share it with your friends or team members, and if you have any questions, please let me know.

If you enjoyed my article, I suggest you follow me and subscribe so you’ll receive an email whenever I post.

Want to get the most out of Medium? Click here to become a member. As a member, you’ll support me and lots of other writers.