figma設(shè)計(jì)

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.

作為設(shè)計(jì)師，講好故事永遠(yuǎn)是工作的一部分。 一個(gè)偉大的故事使客戶參與決策的旅程。 它向您的團(tuán)隊(duì)展示了探索的廣度和深度； 它還鼓勵我們反思自己的設(shè)計(jì)過程。

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

記錄設(shè)計(jì)迭代可幫助我們跟蹤并記住該故事。

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

我想分享一種在Figma中進(jìn)行設(shè)計(jì)時(shí)使用的簡單方法。

簡單的方法 (The simple approach)

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

對于我從事的每個(gè)項(xiàng)目，除了設(shè)計(jì)文件之外，我總是在Figma中設(shè)置一個(gè)單獨(dú)的文件，稱為“文檔”。 您沒有打開此文件中的任何庫。

Create a separate “Documentation” file in Figma在Figma中創(chuàng)建一個(gè)單獨(dú)的“文檔”文件

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.

出于文檔目的，您希望保持設(shè)計(jì)的每個(gè)迭代。 因此，您想斷開與在工作文件中創(chuàng)建的組件或設(shè)計(jì)系統(tǒng)的連接。

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

每次到達(dá)關(guān)鍵點(diǎn)時(shí)，無論是嘗試使用新的調(diào)色板，在布局中移動還是嘗試一種完全不同的方法，在繼續(xù)之前，您都需要復(fù)制當(dāng)前框架并將其粘貼到“文檔”中。

Copy the iterations and paste into the documentation file復(fù)制迭代并將其粘貼到文檔文件中

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

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

步驟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.

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

Organise and annotate the design iterations組織和注釋設(shè)計(jì)迭代

A real example in Figma might look like this:

Figma中的一個(gè)真實(shí)示例可能如下所示：

Iterations of mobile screen design in FigmaFigma中的移動屏幕設(shè)計(jì)迭代

步驟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.

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

Swim-lanes of design iterations設(shè)計(jì)迭代的泳道

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

在結(jié)束項(xiàng)目6個(gè)月后需要講這個(gè)故事時(shí)，您也會感謝自己。 我們都去過那兒。

其他想法 (Other thoughts)

切勿在一幀中進(jìn)行設(shè)計(jì)。 (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.

設(shè)計(jì)屏幕時(shí)，不要小看旋轉(zhuǎn)的幀數(shù)。 我們不再使用Photoshop，可以使用Figma提供的巨大畫布，并根據(jù)需要創(chuàng)建盡可能多的相框。

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

作為設(shè)計(jì)師，我們都會時(shí)不時(shí)地意識到并堅(jiān)持以前的想法。

每個(gè)版本一個(gè)文件呢？ (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.

我發(fā)現(xiàn)定義版本總是很困難的，特別是當(dāng)我專注于設(shè)計(jì)某些東西時(shí)。 以這種方式操作，您將不斷在文件中來回跳轉(zhuǎn)，或復(fù)制和粘貼框架。

但是Figma已經(jīng)有“保存到版本歷史”了嗎？ (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中的“保存到版本歷史記錄”很棒。 它向您保證，任何設(shè)計(jì)都不會丟失。 您還可以針對每個(gè)版本添加注釋，以幫助您快速找到特定版本。

Use “Save to Version History” in Figma使用Figma中的“保存到版本歷史”

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

唯一的挑戰(zhàn)是您無法同時(shí)看到所有版本。

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或基于提交的方法不能滿足我作為設(shè)計(jì)師的要求的原因。 我不僅要回滾到特定版本并重新設(shè)置基準(zhǔn)，還希望看到所有內(nèi)容。

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

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

翻譯自: https://uxdesign.cc/a-simple-way-to-keep-track-of-your-design-iterations-in-figma-c71ba1fb5412

figma設(shè)計(jì)

總結(jié)

以上是生活随笔為你收集整理的figma设计_一种在Figma中跟踪设计迭代的简单方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。