Achieving Mockup Freeze in Figma
Figma has its built-in solution, but I am proposing an alternative.
You are the Product Owner of a Web-App. You are looking for ideas on how to further enrich the current version with more useful features. You decided to go to your team’s design software and browse through the mockups of the App and as you go page by page, you saw something you had not seen in the latest version.
“Wait, has this been implemented? If not, why?”
You quickly try to trace the history of this feature; you look through past User Stories, presentation slides, even Release Notes. Yet after a few minutes of backtracking, you still could not find out the reason behind this discrepancy. What’s more unfortunate is that the UX Team makes edits directly on the same file without proper versioning.
How you wish there is some form of versioning of the mockups…
As one of the leading design tools, Figma has a very robust Version History. Here are the key features it offers:
- Automatically saves when left idle for 30 minutes
- Supports manual save with custom names
- Allows restoration of versions in-file
- Allows duplication of any version into a separate file
The beautiful thing about the last feature is that components are cloned instead of instantiated. This means that changes on the components in the original file will not affect the duplicated file, which is perfect when you want to freeze your mockup.
There are a couple of drawbacks to this. Firstly, imagine the amount of file you will end up with after a while, especially if you’re dealing with an enterprise software with multiple components…
The second one is the fact that duplicating a version clones the entire file, not just the page you are interested in. Hence, if your design file has multiple pages, your clone will contain all of them as well.
You may be able to avoid cluttering your project by cloning and maintaining a limited number of versions backward. Unfortunately, it still won’t solve the issue of cloning the entire file.
Enter, Figma Plugins!
As early as August 2019, Figma finally supports plugins, and with it comes an API that allows anyone to create plugins. Since then, numerous developers and designers have come up with small utilities that make their work easier and faster.
It is this support for plugins that make my alternative proposal feasible. Instead of cloning the entire file, we can clone only a page within that file. Now you might ask, “Why do you need a plugin? I can just duplicate the page using Figma’s built-in function, no?”
Well, here’s why…
If you focus on my erratic mouse movement after duplication, you will see that in the new page, the “Components (Hidden)” frame contains not the components, but instances of the components. This means that any changes made to the components in “Page 1” will affect the instances in “Page 2” as well!
To prevent this, I would need something that duplicates the page while ensuring the new page is completely detached from the old page so that any changes to the components linked to instances in the original will not affect the duplicate in any way.
Anyone can create a plugin that achieves all the above points. However, to illustrate how this can be done and how the result may look like, I will be using one which I created: PageClone.
As you can see from the image above, when PageClone is run on “Original”, it created a copy of the said page within the same file. However, inspecting the duplicate page more closely and one will notice the absence of any components or instances. This is because every component or instance in the original page is converted into standalone frames in the duplicate, which ensures that the copied page stands separate from any other pages within or even outside of the file.
However, having too many pages in the same file will make the latter heavy and take longer to load initially. As with using Version Control, you can alleviate this by maintaining only several versions backward.
So, am I saying to ditch Figma’s built-in functionalities and exclusively use a plugin instead? Well, not really.
On the contrary, I believe that the best way of achieving mockup freeze is to combine both of them hand in hand. I propose using something like PageClone for short-term freezes based on your team’s SDLC. Once enough cycles have passed, you can then archive the file using Version History (or just simply duplicate the file), which would allow you to delete the plugin-created pages from the original file, hence keeping it lightweight.
For example, if a team follows a monthly sprint and releases a major version of the application every 4 sprints, the team can:
- Use a plugin (e.g. PageClone) for freezing the mockup corresponding to each sprint’s delivery
- Use Version History (or duplicate the file) to create a new file containing the last 4 sprints, which corresponds to a release
- Once the file is duplicated, the last 4 sprints’ pages can be removed from the original page
This, I believe, brings out the best of both worlds.
