Using Figma Version History for better Handoff

Design to Development handoff can be, let’s be honest, quite painful. No tool alone will ever be enough to throw some work at your development team and get an amazing result. There is nothing more important than working in a team, exchanging, asking and listening and learning during the collaboration of design and development. BUT there are great tools, tips and tricks to make this process much more efficient.

 

Part 1 — Using Figmas Version History for structured file handoff

In case you have not noticed, I am a huge, huge Figma fan, and you can find free basic and advanced Figma tutorial in my past articles. One of my favourite, quite hidden features is the version history. I use it for my own organization as well as sharing with the development team in a precise way. Let me show you how:

 

Open Version History on Figma

Via the burger menu navigate to File>Version History, and you will see it appear on the right-hand side of your screen. Figma autosaves versions of your file for you; this includes versions you create when you publish changes to a library. You can pan around and see a snapshot in time and jump between them and restore older versions. Great, right?

 

Save your Version for Handoff

You can also manually create your own version history. So once everything is ready for handoff to create a version and make sure you set up naming conventions in your team. I use DEV_DATE_TIME_initials so DEV_201124_1403_cv .You can use a completely different naming convention in your team make sure to stay consistent. Make a note in the comment section what you are handing off, (e.g. changed homepage footer section B). And done.

Shortcut to save a version:

 

Now the Trick: Duplicate!!!

Now when sharing with your development team, you share view right (and you should and can stick to that). The problem is that with this way of standard sharing, they will always see the latest version, a version where the design team might be working on the next feature not ready for handoff yet. On view mode, the version history is not accessible plus that would cause huge confusion always having to remember to jump back to handoff version.

However, there is a little trick. What you should do, and what Figma also recommends in their documentation is, that you duplicate the file. So right-click on the version and duplicate.

 

Sharing the Duplicate the Right Way

On the bottom you see a little popup saying duplicate open. Click on it to open the duplicate. Now give that file the same name as the version you just saved. So in my case DEV_201124_1403_cv.

Now invite your developers to this saved version of the file while everyone else carries on working on the main file. By the way, I also like to use duplicates as a point for further iteration.

 

Own Handoff Folder

For larger projects, I like to make my own “handoff” folder where I store all duplicates. In this way, I can invite the development team to that folder with view access (premium plan, you can, however, invite to files inside the handoff folder on the free plan).

 

Why duplicates? Is it not the same as saving a file anyways?

Yes and no. Remember that Figma is all about team collaboration and working on the same file. So the idea of this one master file everyone works in and the library as a single source of truth is theeee thing about Figma. So by using version history and duplicates for handoff, the design process does not get touched. It, however, still allows everyone in the design process to access the timeline and see handoff points. Try it out and see for yourself! I promise you you will not miss saving fils the old way…like finalcomponent_2_really final_monday )

 

📍️However, be aware:

There is a time limit on how long your version history is saved on unpaid plans (currently 30 days). You can keep your duplicated files.

Also, it is carefully named version history and not version control for a reason. It is not as powerful as tools like Git(hub) or Abstract as there isn’t currently a way to manage conflicts and merge changes in a file or design system.