Figma 作為設計工具的力量

已發表: 2022-03-11

Figma 是一個基於雲的設計工具,在功能和特性上與 Sketch 相似,但有很大的不同使得 Figma 更適合團隊協作。 對於那些對此類說法持懷疑態度的人,我們將解釋 Figma 如何簡化設計過程,並且在幫助設計師和團隊高效協作方面比其他程序更有效。

讓我們仔細看看。

Figma 中的界面設計
Figma 具有熟悉的界面,易於採用。

Figma 適用於任何平台

Figma 適用於任何運行網絡瀏覽器的操作系統。 Mac、Windows PC、Linux 機器,甚至 Chromebook 都可以與 Figma 一起使用。 它是同類中唯一能做到這一點的設計工具,而且在使用運行不同操作系統的硬件的商店中,每個人仍然可以共享、打開和編輯 Figma 文件。

在許多組織中,設計人員使用 Mac,開發人員使用 Windows PC。 Figma 有助於將這些群體聚集在一起。 Figma 的通用性也防止了 PNG-pong 的煩惱(更新的圖像在設計團隊學科之間來回反彈)。 在 Figma 中,不需要一個中介機制來讓每個人都可以使用設計工作。

Figma 中的協作簡單而熟悉

由於 Figma 是基於瀏覽器的,因此團隊可以像在 Google Docs 中一樣進行協作。 查看和編輯文件的人在應用程序頂部顯示為圓形頭像。 每個人還有一個命名光標,因此跟踪誰在做什麼很容易。 單擊其他人的頭像會放大他們當時正在查看的內容。

Figma 設計協作工具
在 Figma 中協作時,您可以單擊任何人的頭像來查看他們的視圖。

實時文件協作有助於減輕“設計偏差”——定義為誤解或偏離商定的設計。 設計漂移通常發生在在項目進行中構思并快速實施的想法。 不幸的是,這通常會導致偏離既定設計,造成摩擦和返工。

使用 Figma,設計負責人只需打開共享文件即可實時查看團隊正在設計的內容。 如果設計師以某種方式誤解了概要或用戶故事,此功能允許設計領導進行干預、糾正路線,並節省無數原本會被浪費的時間。 (相比之下,使用 Sketch 的團隊無法立即判斷設計師是否誤入歧途。)

旁注:一些設計師不喜歡在工作時被“窺探”,因此由設計負責人來解釋其中的好處。 一般來說,大多數設計師很快就會看到這種功能的價值,並很容易適應在共享環境中工作。

Figma 使用 Slack 進行團隊溝通

Figma 使用 Slack 作為其溝通渠道。 當在 Slack 中創建 Figma 頻道時,在 Figma 中所做的任何評論或設計編輯都會“鬆弛”給團隊。 此功能在實時設計時至關重要,因為對 Figma 文件的更改將更新嵌入文件的所有其他實例(開發人員可能會感到頭疼)。 對模型的更改,無論是否得到保證,都會立即得到審查,並且反饋渠道是實時的。

Figma 設計團隊在 Slack 中的溝通
Figma 項目可以使用 Slack 通道在文件中進行線程評論。

Figma 共享簡單靈活

Figma 還允許基於權限共享任何文件、頁面或框架(在其他設計工具中稱為畫板)。 當為頁面上的框架創建共享鏈接時,單擊該鏈接的人將打開 Figma 的瀏覽器版本,並加載框架的放大視圖。

應用設計工具文件共享
Figma 與任何有權限的人共享項目、文件、頁面和框架。

這種從文件到框架的選擇性共享形式讓設計人員、產品所有者和開發人員能夠準確地共享錯誤跟踪工具和社區軟件(如 Confluence 或 SharePoint)所需的內容。

嵌入式 Figma 文件提供實時更新

Figma 還共享實時嵌入代碼片段,以將 iFrame 粘貼到第三方工具中。 例如,如果 Confluence 用於顯示嵌入的模型文件,則這些文件不會通過保存 Figma 文件來“更新”——那些嵌入的文件就是 Figma 文件。

如果 Figma 中的任何人對模型進行了更改,則可以在嵌入式 Confluence 模型中實時看到該更改。 (您可以在此處閱讀有關 Figma 和 Confluence 集成的更多信息。)

此功能對 UX 流程的影響如下圖所示:

Figma 改進 UX 設計工具
Figma 消除了對用於原型設計和評論的專用應用程序的需求。

在 Figma 之前,使用了其他幾個工具來促進設計模型和更新的交換。 迭代周期是一系列來回文件更新,因此團隊可以審查和實施當前設計。

在 Figma 之後,不再需要第三方工具(但可以根據需要使用)。 由於 Figma 處理了前面描述的第三方工具的功能,所以在這個過程中只有一個步驟——從草圖轉移到 Figma,並且所有組都有最新的模型。 沒有嚴格意義上的“交接”。

Figma 非常適合設計審查反饋

Figma 支持設計和原型模式下的應用內評論,並且評論線程在 Slack 和/或電子郵件中進行跟踪。 無需發布 PNG 文件或執行持續更新即可使用 InVision 或 Marvel 等第三方工具從團隊獲得反饋。

Web UI 設計工具和審查反饋
設計師可以通過打開同一個 Figma 文件在評論期間發表評論。

在設計審查期間,團隊設計師可以在大屏幕上討論他們的工作、記錄評論和解決問題——所有這些都在 Figma 中。 Sketch 無法提供這種形式的實時反饋,這需要上傳到雲服務以獲得團隊的意見。

誠聘美國全職自由 UI 設計師

使用 Figma 促進開發人員移交

Figma 在任何選定的框架或對像上以 CSS、iOS 或 Android 格式顯示代碼片段,供開發人員在查看設計文件時使用。 任何開發人員都可以在他們可以查看的任何文件中檢查設計組件。 無需使用第三方工具來獲取信息。 即便如此,如果團隊想要做的不僅僅是簡單的測量和 CSS 顯示,Figma 已經與 Zeplin 完全集成。

Figma 原型審查和開發人員交接
開發人員可以從設計文件或運行 Figma 原型訪問代碼。

Figma 項目文件存放在一個地方——在線

由於 Figma 是一個在線應用程序,它通過在專用視圖中顯示項目及其文件來處理文件組織。 Figma 還支持每個文件多個頁面,例如 Sketch,因此敏捷團隊可以有邏輯地組織他們的項目:

  • 為功能主題創建一個項目。
  • 史詩或大型功能創建文件。
  • 在該文件中為每個用戶故事創建頁面。

這只是組織文件的一種方法,可以根據流程的要求進行或多或少的細化。

Windows 的在線素描替代品
可以在專用視圖中輕鬆組織項目文件。

Figma API 提供第三方工具集成

Figma 現在擁有開發人員 API,允許與任何基於瀏覽器的應用程序真正集成。 公司正在使用它在他們的應用程序中集成設計文件的實時顯示。 例如,優步有大屏幕顯示他們公司周圍“直播”的設計文件。 設計是共享的,歡迎公司中的任何人提供反饋。

Atlassian 的 JIRA 軟件實施了 Figma 插件,因此產品所有者、開發人員和質量工程師始終可以查看設計師提供的任何模型的最新版本。

此外,Figma 的 API 承諾滿足客戶對 Sketch 已經提供的第三方插件和功能增強的請求。

文件版本控制是自動的還是按需的

Figma 的內置版本控制系統進一步緩解了圍繞實時文件更新的任何不確定性。 任何時候,設計師都可以創建一個 Figma 文件的命名版本和描述; 這可以在對設計進行商定的更改後立即完成。

網頁界面設計自動文件版本控制
手動保存文件版本以創建設計分支。

在有意將更改提交到原始版本之前,共享環境中的實時文件不會受到影響。 還可以恢復任何自動保存的版本以創建副本或覆蓋原始版本。

Figma 中的原型設計簡單直觀

雖然 Sketch 最近在畫板原型中添加了畫板,但 Figma 通過提供幀之間的過渡更進一步。 Figma 的簡單原型製作功能消除了對其他進行幻燈片樣式原型製作的工具的需求,例如 InVision 或 Marvel。 如果只需要帶有過渡的簡單演示文稿,則無需導出到審閱工具。

直觀的網頁設計原型
Figma 原型設計與使用框架之間連接箭頭的其他工具一樣工作。

Figma 原型可以像 Figma 設計文件一樣分發; 任何擁有鏈接權限的人都可以查看和評論原型,同樣,該反饋會在工具的評論面板中捕獲並記錄在 Slack 中。 開發人員可以查看設計工作流程,直接為設計人員留下@messages,並從原型內部獲取測量值和 CSS 屬性。

Figma 的團隊庫是設計系統的理想選擇

設計系統已成為許多公司的必需品,並且需要可重用、可擴展和“標記化”的組件(Sketch 和 Illustrator 中的符號),以便在 UX 設計人員和前端開發人員可用的模式庫中使用。

Figma 設計系統庫
Figma 的團隊庫無模式對話框讓您可以不受限制地訪問組件和样式。

經常使用的短語“單一事實來源”確實適合這裡——一旦創建了 Figma 團隊庫,任何有權訪問項目的人都可以在他們的設計中使用組件的實例,並確保他們使用的是最新版本。

設計系統組件庫
使用文件和框架組織組件既簡單又靈活。

Figma 的組件庫方法簡單且易於管理。 設計人員可以創建充滿組件的文件或使用頁面組件來組織模式庫。 Figma 頁面中的每一幀都成為團隊庫中的組織部分(無需創建層次結構\like\this)。

組織庫的一種方法是創建一個專門用於組件的項目。 可以根據需要組織該項目中的文件,並且可以相應地排列這些文件中的頁面。

Figma 旨在增強設計團隊合作

長時間使用 Figma 將展示這種實時協作工具的優勢。 它使團隊保持任務並鼓勵充分披露,這在為各種學科構​​建設計系統時必不可少。 任何人都可以在任何平台上輕鬆使用 Figma,並讓團隊快速共享他們的工作和庫。

從 Sketch 切換後使用 Figma 的設計專家(Sketch 文件可以以奇偶校驗方式導入 Figma)並沒有失望:

…它徹底改變了您與同事和客戶合作的方式——使用 Figma 簡化協作設計

Figma 在過去幾年中結合了 UI 設計工具世界中最好的一切——為什麼你的設計團隊應該考慮切換到 Figma

去年,我一直在使用 Figma 進行 UI/UX 設計過程,它節省了我的工作時間。 它真正改變了我的設計工作流程——如何使用 Figma 簡化你的 UI/UX 工作流程

我在 Figma 上度過的時間通常是我一天中最愉快和最有成效的部分 - Figma 正在改變我的整個工作流程,這太棒了!

• • •

進一步閱讀:

  • 使用這些頂級 UX 工具掌握您的工藝
  • 使用 Figma 簡化協作設計
  • 使用 InVision 的 Craft 簡化團隊協作
  • 線框之死。 直接到高保真!
  • 讓地球成為您的辦公室,成為世界級設計師