掌握 Figma 設計工具:有用的技巧和方法

已發表: 2019-03-26

使用過 Google Docs 的每個人都知道它是多麼方便 — 易於在網絡上編輯、協作和保存文件。 如果網頁設計師為他們的項目使用相同的工具會怎樣? 嗯,他們實際上有一個,它是 Figma。 在這篇 Figma 評論中,我們將引導您了解該平台最閃亮的功能,這些功能使其成為設計師的首選工具。

什麼是Figma

Figma 是一種基於雲的設計工具,與其他專門在 Mac OS 或 Windows 上運行的流行設計工具不同,它也可以在 Linux 上運行。 因此,該平台使使用不同操作系統並需要為他們的工作生成 SVG 代碼、CSS 和 iOS 或 Android 代碼的設計師之間進行協作。

該平台使用戶能夠在一個平台上創建設計、製作原型和收集反饋。

為什麼要使用 Figma

在我們深入了解 Figma 設計工具的優點之前,讓我們先看看是什麼讓這個平台對設計師如此有吸引力。

  1. 它是基於網絡的。 Figma 在您的瀏覽器中運行,您可以處理您的項目,而無需將它們作為單獨的文件保存到您的計算機——所有編輯都會自動保存到您的雲中。 但請記住,您需要有效的互聯網連接才能保存所有更改。
  2. 它允許團隊合作。 使用 Figma,您可以擁有一個 2 人到無限數量的編輯團隊,這一切都取決於您的定價計劃。 您將始終能夠看到有多少團隊成員在處理單個項目以及他們正在做出哪些更改。
  3. 它對獨立設計師是免費的。 所有功能都可以完全免費使用,無需任何試用期。

總的來說,Figma 有三個定價計劃。 讓我們發現平台為每個人提供了哪些功能。

Figma 定價計劃

起動機專業的組織
自由

使用此計劃來測試平台並感受其基本功能:原型設計、代碼屬性、評論、無限存儲空間和無限查看器、Sketch 導入以及要導入的各種文件格式。

每位編輯 12 美元/月

如果您的項目需要團隊編輯和共享,請切換到以下計劃。 使用此計劃,您可以享受無限數量的編輯器、項目和免費查看器,以及無限的版本歷史和存儲空間。 您還可以創建具有整個團隊都可以使用的共享 UI 組件的私有項目和系統。

每位編輯 45 美元/月

升級到此計劃並享受更廣泛的功能:無限數量的團隊、草稿所有權、鏈接訪問控製或共享字體。 您將能夠通過活動日誌報告、集中成員管理、單點登錄 (SSO) 和組織身份提供商的遠程配置確保帳戶控制更深入地挖掘。

Figma 入門

註冊後,用戶會收到一封歡迎電子郵件,其中包含入門所需的鏈接:幫助中心、視頻教程、論壇和有用的資源。

figma welcome email
Figma 的歡迎郵件

此外,當用戶開始使用該工具時,會為他們提供快速的平台演練。 您既可以在線工作,也可以下載 Figma 桌面版來離線設置您的工作流程。 事實上,界面非常直觀,帶有包含項目元素的圖層面板、帶有工具和可用選項的工具欄,以及右側的屬性面板。

figma interface
Figma 界面

現在讓我們概述 Figma 最出色的功能和選項,看看如何應用它們。

Figma 功能和有用的選項

原型製作

Figma 允許您通過創建任意數量的屏幕來製作網站或應用程序的可點擊版本。 通過這種方式,您將能夠測試、編輯或調整任何功能——按鈕功能、元素的翻轉、模態窗口動畫——而無需在選項卡之間切換。 您將能夠為您的設計創建連接和熱點,以模擬它在真實環境中的外觀。

只需在屬性面板中切換到原型並開始創建路徑和交互。

figma prototyping
使用 Figma 原型模式創建元素之間的交互

成分

這些是可以在您的項目中重複使用的 UI 元素。 此功能允許您通過翻轉組件或通過平鋪組件來重複圖案來創建對稱組件。 您可以從按鈕、字段或菜單創建組件。 要創建主組件,請單擊選項菜單中的創建組件按鈕或右鍵單擊圖層並選擇創建組件選項。

您可以通過創建實例來重用主組件。 您還可以將顏色、塊、按鈕、形狀和登錄頁面等 UI 元素作為單獨的組件來製作這些組件。

為了創建實例組件,選擇主組件,按住熱鍵(Windows 和 Mac OS 分別為 Alt 或 D),從組件中拖動實例並在必要時將其複制粘貼到另一個位置。

figma components
創建實例組件

請記住,您創建的實例與主組件相關聯,這意味著您對後者所做的所有更改都將應用於所有前者。 例如,通過更新主組件中按鈕的形狀或顏色,您將在整個網站設計中更新其子組件。

矢量網絡

這個 Figma 功能允許您創建複雜的矢量形狀,因為您不再受到來自兩點的只有兩條線的限制。 您可以使用鋼筆工具從您創建的形狀的任何點繪製額外的線條。

figma vector networks
使用中的矢量網絡

最重要的是,Vector Networks 可以簡化您的 HTML 程序,因為您可以從外部源複製 SVG 代碼並將其作為矢量圖層直接粘貼到 Figma 中。 您還可以將 Figma 矢量複製為 SVG 代碼。 為此,只需右鍵單擊該元素,選擇複製為 SVG,然後將代碼粘貼到 HTML 或您正在創建的任何 Web 項目中。

內置評論、編輯和分享

使用 Figma,您可以創建一個團隊並選擇每個團隊成員有權對您的項目執行的操作:查看或查看和編輯。 您還可以查看團隊成員如何實時更新或更改設計。

figma editing
實時團隊編輯

您的團隊可以直接在工作區留下反饋或討論項目的任何元素,並將其固定在畫布上的任何位置,就像在 Google 文檔中一樣。 要留下您的評論,請選擇上方菜單中的對話氣泡,單擊您要評論的元素,然後寫下您的反饋。

figma commenting
評論一個用 Figma 設計工具創建的項目

版本控制

使用 Figma,您可以跟踪每個協作者的歷史記錄,甚至可以回滾到以前的版本。 當用戶關閉帶有項目的選項卡或在 30 分鐘內未進行任何更改時,該服務會自動保存版本。 要快速訪問此選項,請選擇工具欄中項目名稱左側的下拉圖標。 您將在右側看到版本歷史記錄,其中包含命名、恢復或複制特定版本的選項。

figma version history
版本歷史菜單

Figma 設計工具在行動

在熟悉該平台及其功能後,我們決定嘗試使用 Figma 設計選項並為電子書創建一個簡單的頁面。 首先,我們點擊上方菜單中的“+”號。 之後,我們單擊工具欄中的“框架”圖標來創建一個框架並在畫布上組織我們的設計。 接下來,我們用必要的圖層填充我們的項目——文本塊、矩形和圖像——並配置元素之間的所有空間。

這是我們設法創建的內容:

figma design example
使用 Figma 設計工具創建的電子書頁面

請記住,您將無法進行高質量的打印,因為該平台缺少用於繪畫的主要調色板 — CMYK 調色板 — 或毫米和厘米之間的大小切換。

最後取

Figma 感覺就像是設計師為設計師精心設計的工具。 該平台允許您

  • 在線工作並將您的設計保存在雲端,而無需依賴計算機的存儲空間;
  • 在各種操作系統上創建設計;
  • 與團隊實時協作、評論、編輯和共享文件;
  • 享受有用的功能,如原型製作、矢量網絡、創建組件及其實例,以編輯、測試、調整您的設計並擴展其可能性。

我們希望我們的 Figma 評論已經清除了該平台的內部技巧,並且您有足夠的靈感來嘗試它。 使用 Figma 創建您的設計並使用 SendPulse 創建營銷項目。 再見!