A simple way to keep track of your design iterations in Figma

Documenting design iterations on the fly in Figma with one extra habit. No plugins required.

As designers, telling a good story is always part of the job. A great story engages the client with the journey of decision making; it shows your team the breadth and depth of the exploration; it also encourages us to reflect on our own design process.

Documenting design iterations helps us keep track and remember that story.

I’d like to share a dead-simple approach I use when designing in Figma.

The simple approach

Step 1: A separate file

For each project I work on, I always set up a separate file in Figma called “documentation” in addition to my design file. You don’t turn on any libraries in this file.

Create a separate “Documentation” file in Figma

Why?

For the purpose of documentation, you want to keep each iteration of design as it is. Therefore, you want to disconnect with the components or design system you have created in your working file.

Step 2: Copy and paste

Every time you have arrived at a pivot point, whether it’s to trial a new colour palette, move around the layout or to experiment an entirely different approach, before moving on, you copy your current frame and paste into “documentation”.

Copy the iterations and paste into the documentation file

This also applies to the prototypes you have created in Figma, put them into a different page in “documentation”.

Step 3: Organise and annotate

I organise different iterations of the same screen into a swim-lane and use virtual post-it notes to annotate each of the iterations if time allows.