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.

我想分享一種在Figma中進行設計時使用的簡單方法。

簡單的方法 (The simple approach)

步驟1：一個單獨的文件 (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.

對于我從事的每個項目，除了設計文件之外，我總是在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.

出于文檔目的，您希望保持設計的每個迭代。 因此，您想斷開與在工作文件中創建的組件或設計系統的連接。

步驟2：復制并貼上 (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”.

每次到達關鍵點時，無論是嘗試使用新的調色板，在布局中移動還是嘗試一種完全不同的方法，在繼續之前，您都需要復制當前框架并將其粘貼到“文檔”中。

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

這也適用于您在Figma中創建的原型，并將它們放在“文檔”中的不同頁面中。

步驟3：組織和注釋 (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.

我將同一屏幕的不同迭代組織到一個泳道中，并在時間允許的情況下使用虛擬便箋注釋每個迭代。

A real example in Figma might look like this:

Figma中的一個真實示例可能如下所示：

步驟4：播放 (Step 4: Playback)

You can now dive back into your trail of thoughts, re-discover and question your decisions and use the iterations to communicate how you arrive at the destination. More importantly, they are ready for you to add into a deck, a case study or a time-lapse video of version changes.

現在，您可以重新思考，重新發現并質疑您的決定，并使用迭代來傳達您如何到達目的地。 更重要的是，它們隨時可以添加到平臺，案例研究或版本更改的延時視頻中。

You will also thank yourself when needing to tell that story 6 months after you wrapped up the project. We have all been there.

在結束項目6個月后需要講這個故事時，您也會感謝自己。 我們都去過那兒。

其他想法 (Other thoughts)

切勿在一幀中進行設計。 (Never design in one frame.)

Don’t be stingy with the number of frames you spin up when designing a screen. We are no longer in Photoshop, leverage the giant canvas Figma offers, and create as many frames as you please.

設計屏幕時，不要小看旋轉的幀數。 我們不再使用Photoshop，可以使用Figma提供的巨大畫布，并根據需要創建盡可能多的相框。

We all realise and stick with a previous idea from time to time as designers.

作為設計師，我們都會時不時地意識到并堅持以前的想法。

每個版本一個文件呢？ (What about one file per version?)

I find it always a difficult exercise to define a version, especially when I am focusing on designing something. Operating in this way, you will constantly jump back and forth in files, or copy and paste frames.

我發現定義版本總是很困難的，特別是當我專注于設計某些東西時。 以這種方式操作，您將不斷在文件中來回跳轉，或復制和粘貼框架。

但是Figma已經有“保存到版本歷史”了嗎？ (But Figma already has “Save to Version History”?)

“Save to Version History” in Figma is great. It reassures you that none of your design will get lost. You can also put a note against each version to help you quickly locate a specific version.

Figma中的“保存到版本歷史記錄”很棒。 它向您保證，任何設計都不會丟失。 您還可以針對每個版本添加注釋，以幫助您快速找到特定版本。

The only challenge is that you can’t see all the versions side by side at once.

唯一的挑戰是您無法同時看到所有版本。

This is why a Github-like or commit-based approach does not satisfy me as a designer. I not only want to roll back to a specific version and rebase, I want to see them all.

這就是為什么類似Github或基于提交的方法不能滿足我作為設計師的要求的原因。 我不僅要回滾到特定版本并重新設置基準，還希望看到所有內容。

Thank you for reading! 👋 Hi, I am Lennon Cheng, an Interaction Designer and a Freelancer. Currently living in Melbourne, Australia.

感謝您的閱讀！ 👋嗨，我是Lennon Cheng ，是互動設計師和自由職業者。 目前居住在澳大利亞墨爾本。