迷你教程——在整個設計過程中利用 Figma 的功能

新興設計工具的世界令人難以置信。 有前途的新程序正在迅速接連推出，但特別是有一個已慢慢成為更大且大多數分佈式設計團隊的最佳選擇。

Figma 有可能支持端到端的整個設計過程。 第一個草圖、反饋收集、協作、準備測試的原型和開發人員移交都在其能力範圍內。 Figma 還簡化了產品經理和設計主管以及所有其他利益相關者的工作。

那麼，是什麼讓 Figma 在競爭中脫穎而出？ 有幾個關鍵方面，但所有這些都可以追溯到 Figma 是基於 Web 的事實。 當該工具首次發佈時，這引起了很多人的注意，但最終，它為 Figma 的靈活性和獨特的功能鋪平了道路。

流暢的產品設計過程的基礎是什麼？

雖然每個團隊和項目確實可能有不同的工作流程，但有些功能和階段是產品設計和管理的重要組成部分。 Figma 涵蓋了每一個。

1. 可訪問性和協作。 無論團隊使用什麼工具，都需要有一種方法可以一起工作、展示項目、收集反饋並讓利益相關者參與其中。 所有這些功能都在 Figma 中可用。
2. 迭代和生產可交付成果的靈活性。 Figma 非常靈活，可以用作協作白板，用於勾畫最初的想法並迭代從線框到高保真模型的所有內容。
3. 構建原型和測試的能力。 設計移動應用程序？ 構建和發布交互式原型並直接在智能手機上進行測試——所有這些都來自 Figma。
4. 建立單一的事實來源。 Figma 是定義完全在線的產品設計系統的絕佳方式。 默認情況下，它是單一的事實來源。 不再懷疑，“這是最新版本嗎？”
5. 平滑切換。 只需與開發人員共享一個鏈接，他們就可以訪問實施設計所需的所有信息——紅線、測量和準備導出的圖形資產。
6. 可定制和改進的多功能性。 Figma 的插件 API 允許團隊編寫自己的插件或利用更廣泛的用戶社區並使用新功能擴展該工具。

1. 可訪問性和協作

讓團隊加入

讓我們仔細看看 Figma 如何為上述六個關鍵領域做出貢獻。 新用戶可能想要創建一個免費的 Figma 帳戶，建立一個團隊，然後觀看 Figma 入門。 創建團隊後，邀請團隊成員和相關利益相關者加入。

提供三種訪問級別。 這是相當不言自明的，但通常，編輯權限授予設計團隊，查看權限授予其他所有人。 這包括需要能夠遵循設計過程並提供反饋的開發人員和其他利益相關者。

類似的共享選項可用於團隊級別（如上所示）、項目級別和文件級別。 如果未指定訪問級別，它們會從團隊傳播到項目，從項目傳播到文件。

由於 Figma 在瀏覽器中可用，因此邀請某人的方式或他們使用的系統無關緊要。 只要他們使用的設備和瀏覽器滿足最低要求，他們就可以通過鏈接直接跳轉，界面會根據他們是否具有編輯或查看權限而變化。

嵌入項目文件

Figma 項目文件可以嵌入到第三方軟件中。 例如，共享的 Dropbox Paper 文檔可用於呈現項目的當前狀態。

要嵌入項目文件，請將文件可見性設置為任何擁有鏈接的人 - 可以查看、複製嵌入代碼，並將項目文件嵌入到任何支持 embed.ly 的第三方軟件中。

反饋和修訂

產品設計過程的另一個關鍵功能是分發設計、收集反饋和管理修訂的能力。 任何擁有 Figma 鏈接的人都可以查看最新版本並直接評論他們想要提供反饋的觀點。

要標記團隊成員，請使用 @ 字符，系統將顯示一個可供選擇的名稱列表。 這樣做會通知團隊成員，一旦處理了反饋，就可以通過單擊Resolve來關閉討論。

為了讓團隊保持一致，有一個很好的集成可以在指定的 Slack 頻道中發布來自 Figma 文件的討論。

實時協作

Figma 更有趣的功能之一是他們所說的多人遊戲。 它允許多個團隊成員同時打開和處理設計文件。 處理該文件的每個人都在頁面的右上角可見，並且他們的頭像被命名並可以點擊。

可能需要一些時間來理解這在實際中意味著什麼。 雖然設計師不太可能使用多人遊戲同時處理文件的同一部分，但不必擔心文件版本衝突是非常令人欣慰的，尤其是對於較大的分佈式團隊而言。

多人遊戲在遠程演示時派上用場，因為它使連接到文件的每個人都可以跟隨演示者的視口。 它還允許團隊繞過其他程序並將 Figma 用作在線白板（儘管特定的解決方案，如 Miro，最終可能更適合這項工作）。

為此，建議創建自定義組件以將特定資產複製為虛擬便利貼或圖表元素。

2. 迭代和生產可交付成果的靈活性

一旦邀請了團隊成員並開始繪製初始草圖，就可以使用 Figma 進行迭代。 創建 Figma 的主要原因是界面設計——完成白板後，團隊可能會轉向流程圖和線框圖。 同樣，構建可重複用於這些任務的組件庫是明智之舉。 官方模板集合提供了靈感和設計安排。

3. 構建原型和測試的能力

使用 Figma 創建交互式原型非常容易。 當 Figma 文件以編輯權限打開時，可以在設計和原型製作模式之間切換。 進入原型模式後，無論是從舞台還是圖層側邊欄，都可以單擊一個元素以使其具有交互性。

在原型模式中選擇一個元素後，側面會出現一個小圓圈。 拖動時會出現藍線，可以將其拖放到屏幕或狀態以顯示交互結果。

Figma 中提供了常見的轉換，這使得創建高保真原型變得更加容易。 事實上，Figma 團隊最近發布了一個智能動畫和拖動觸發功能。 智能動畫方面插入相似元素的運動，而拖動觸發器是一種新型交互。 兩者都極大地提高了交互式原型的質量。

用戶測試

同樣，分發 Figma 原型所需要的只是一個鏈接，即使是用於用戶測試。 點擊右上角的小播放圖標啟動原型，並生成一個新的 URL。 可以復制 URL 或使用藍色的共享原型按鈕。 一旦用戶打開鏈接，他們就會看到一個交互式原型，並且可以在需要時發表評論。

在移動設備上測試

移動設備的設計以圍繞原型的實際設備模型呈現。 如果需要更真實地測試交互，最好下載 Figma Mirror 應用程序進行特定設備測試。

4. 建立單一的真理來源

版本歷史

如果項目文件始終是最新的並不斷備份，那不是很好嗎？ 默認情況下，此功能包含在 Figma 中。 每個文件在處理時都會自動保存，並且 Figma 在 30 分鐘不活動後會在版本歷史記錄中創建一個新條目。 創建所有自動保存版本的日誌，如果需要，可以恢復每個版本。

當然，自動版本控制並不是節省工作的唯一選擇。 可以手動保存版本或在版本歷史記錄中編輯特定版本。

設計系統和組件庫

Figma 的另一個亮點是它如何讓設計師創建、組織和分發組件庫。 任何文件都可以作為庫發布，並且每種顏色、文本樣式、效果、網格或組件都可以在其他 Figma 文件中使用。

當對庫中的任何元素進行更改時，可以發布編輯並將其傳播到使用這些元素的文件。 然後，處理這些文件的設計人員可以決定是否接受編輯。

決定如何分發庫的能力，結合切換庫元素可見性或不可見性的選項，使整個體驗流暢而強大。

可以嵌套組件和庫以創建複雜的設計系統，其中所有內容都是版本化的，並且對所有相關人員都是最新的。 並且所有組件都可以用註釋進行註釋。

5. 平滑切換

開發者交接

使用 Figma，設計人員和開發人員不需要像 Zeplin 這樣的單獨工具來管理切換。 他們可以簡單地打開文件並在右側邊欄中切換到代碼模式，即使只有查看訪問權限。

當代碼模式處於活動狀態時，在舞台上選擇一個元素將顯示實現所需的所有相關信息，並且有關組件相對於其他元素的位置的所有其他信息都是可見的。 與類似的解決方案一樣，生成的代碼並不意味著完全複製粘貼，但如此容易訪問會很有幫助。

6. 可定制和改進的通用性

Figma API 和自定義插件

Figma 的 API 和插件系統使廣泛的設計團隊和學科可以輕鬆地為他們的特定流程需求定製程序。 Figma 的靈活性使用戶能夠以編程方式與平台交互。 幾個例子：

使用真實數據

能夠在模型和原型中使用真實數據是非常有價值的，而 Figma 通過允許導入來自外部資源的內容使之成為可能。 通過利用真實內容，可以對設計組件進行壓力測試，使模型保持最新，並讓與設計無關的團隊參與進來。

一個名為 Google Sheets Sync 的插件就是一個很好的例子。 該插件可以輕鬆地將 Google 表格集成為填充和同步 Figma 文件中組件內容的源。

高級工作流程

僅當系統始終在面向客戶的屏幕中實施時，在 UI 設計程序中容納設計系統的能力才有價值。 值得慶幸的是，有 Figma API、插件和集成可以提供幫助。

Storybook 插件同步 Figma 文件，並在面板中顯示 Figma 設計組件以及已實現的組件。 另一個有趣的用例是 Figma to React Converter，這是一種將 Figma 組件轉換為代碼的工作流增強。

Figma 的功能非常適合整個設計過程

沒有單一的設計程序可以處理每個設計師的需求或設計問題，這是一件好事。 設計工具之間的競爭有利於設計師。 它確保製造我們工具的公司傾聽我們的需求，並為我們提供適合我們工作的最新功能。

也就是說，Figma 是一種先進而直觀的工具，它已經證明自己不僅能夠處理整個數字設計過程。 個人設計師和團隊都可以從其獨特的協作和迭代功能中受益，並且在程序不足的地方，大量的插件選擇填補了空白。

• • •

進一步閱讀 Toptal 設計博客：

• Figma 作為設計工具的力量
• Figma vs. Sketch vs. Axure——基於任務的回顧
• 迷你教程 - 使用 Figma 按鈕組件
• 使用這些頂級 UX 工具掌握您的工藝
• 精准設計——Adobe XD 評論