如何使用 Figma：初學者指南

圖形設計軟件的世界很大，競爭也很激烈。Figma 是一種設計工具，正在爭奪全球 UX/UI 設計師的頭把交椅。但是您對這個直觀的工具了解多少？

雖然它很簡單，但如果您習慣了其他設計工具，也有一個學習曲線。讓我們看看 Figma 以及如何使用它。歡迎來到 Figma 101。

什麼是無花果瑪？

如果你在過去幾年中擔任過平面設計師或網頁設計師，你可能聽說過 Figma。你甚至可能用過它。

Figma 是一種設計工具，它逐漸成為數字設計師的最愛，在網頁設計等方面超越了 Adob​​e XD、Adobe Photoshop 和 Sketch 等選項。不過，自從 Adob​​e 在 2022 年收購了 Figma 之後，可能會有一些變化重新洗牌排行榜。

Figma 有很多用途。它主要用於數字設計，您不能使用 CMYK 進行印刷設計。Figma 的一些主要用途包括：

• 原型製作
• 用戶體驗/用戶界面設計
• 應用程序設計
• 網頁設計
• 演示設計

您可以使用 Figma 模型插件來幫助展示您的設計，使用插件將真實網頁轉換為 Figma 設計，甚至為 Figma 設計創建主模板以節省重複設計類型的時間。

Figma 的價格是多少？

您可以在Figma 網站上或通過下載Figma 應用程序免費創建 Figma 帳戶。免費帳戶提供應用程序所有設計方面的功能。您可以使用 Figma 和 FigJam（Figma 的協作工具）進行設計。

如果您將 Figma 作為業餘愛好者或獨立自由職業者使用，那麼永久免費版本幾乎是完美的。您仍然可以訪問所有插件，可以邀請無限的合作者，使用無限的個人文件，並在所有平台上使用 Figma。

雖然 Figma 的免費版本對任何標准設計師來說都綽綽有餘，但 Figma Professional 訂閱允許您邀請隊友、從團隊圖書館工作、訪問無限的 Figma 文件和版本歷史等等，每位編輯器每月 12 美元。如果您是學生或教育工作者，您可以免費獲得 Figma Professional。

如何使用 Figma：基礎知識

無論您使用 Figma 應用程序還是瀏覽器版本，您都可以輕鬆跟進。

當您打開 Figma 時，您會看到用於啟動新 Figma 文件、新 FigJam 文件或導入在其他程序（如 Sketch 或 Adob​​e XD）中創建的文件的選項。如果您以前使用過 Figma，您還會看到您以前可以打開和處理的 Figma 項目。

瀏覽 Figma 工作區

打開一個新文件最初看起來很乏味。與許多其他設計程序不同，您不是從畫板或畫布開始，而是從一個完全空白的設計頁面開始。但是，如果頭腦充滿靈感，它就不會長期處於空白狀態。

左上角的水平菜單以主菜單圖標——Figma 標誌開始。選擇主菜單，您可以導航到其他文件、Figma 快速操作、典型文件選項以及對插件、小部件和庫的訪問。

接下來，您會發現移動工具 ( V )，以及位於其下方的縮放工具 ( K )。這些工具用於移動元素或放大或縮小設計的某些部分。在這些工具的右側，您會看到區域工具、框架( F )、部分和切片緊靠在一起。

在 Figma 中，框架就是其他程序可能稱為畫板或畫布的東西。選擇框架以繪製自定義大小的畫布。選擇後，右側菜單將顯示常見設備尺寸的預製框架選項：智能手機、平板電腦、台式機、智能手錶、演示文稿和社交媒體選項。您也可以直接單擊並拖動您的框架，使其成為任何自定義尺寸。

回到左上角的菜單，區域工具的右邊是形狀工具、鋼筆工具和文本工具。然後是資源——組件、插件和小部件——以及用於在文件中移動的手形工具。最後，評論工具非常適合做筆記和與隊友協作。

Figma 設計菜單

繪製框架後，選擇其標題可激活框架，為設計做好準備。右側菜單顯示Design、Prototype和Inspect的標題。顧名思義，“設計”選項是您用來設計框架元素的菜單。

雖然最初的設計菜單有些簡單，但隨著您向設計中添加更多元素，菜單選項會發生變化。首先，菜單從上到下運行對齊工具、調整大小工具、自動佈局、佈局網格、圖層、填充、描邊、效果和導出。默認情況下，其中一些是最小化的，但通過單擊+號，您可以打開任何菜單或點擊–將其最小化。

繪製完項目的主框架後，您可以使用形狀工具或鋼筆工具繪製形狀或添加圖像佔位符，還可以使用文本工具以您可能在其他軟件中使用過的方式添加文本。

一旦框架上有了形狀或文本，就可以使用各種右側菜單選項來編輯和設計這些元素。圖層菜單提供不透明度和混合模式；使用Fill，您可以添加顏色或插入具有某些編輯功能（如曝光度、對比度、色溫等）的圖像。

當您在項目中構建更多元素時，圖層將在資產選項卡旁邊的左側圖層菜單中形成。您可以雙擊圖層標題來查找元素，反之亦然；您可以雙擊設計元素以找到突出顯示的圖層。雙擊標題允許您重命名它們以獲得最佳組織。

Figma 原型菜單

設計菜單選項的右側是原型菜單。在完成設計的視覺方面並設置圖像框和文本應放置的位置後，您可以使用原型工具將動畫和過渡添加到設計中。

原型菜單允許您將框架或組件連接在一起作為過渡。您可以選擇順序以及每一幀如何過渡到另一幀。

如果您正在製作從一張幻燈片到下一張動畫的 Figma 演示文稿，這非常有用，但該工具還可以熟練地讓您可視化應用程序和網頁設計的按鈕或菜單的動畫。您可以為所有不同的事物在每個頁面上添加多個轉換，這樣您就可以了解用戶在網站上線時如何與您互動。

雖然使用 Figma 設計網站與創建實時網站不同，但您可以將 Figma 設計交給您的開發團隊，他們可以將您的原型交互重新創建為您網站的真實動畫設計。這意味著您可以通過點擊、時間或其他交互從一個頁面過渡到另一個頁面。

Figma 入門很簡單

現在您知道如何導航 Figma 佈局以及基本設計和原型工具的工作原理。由於 Figma 如此易於訪問，是時候去修改這個設計工具，看看你能創造什麼了。