如何在 Figma 中創建按鈕

Figma 上的設計按鈕可以通過利用平台上的組件和自動佈局屬性以不同的方式創建。因此，可以使用標籤、尺寸和圖標來自定義按鈕。如果您不確定如何在 Figma 上創建按鈕，那麼您來對地方了。

本文將解釋如何創建按鈕以及如何充分利用 Figma。

創建按鈕

按鈕是設計功能用戶界面時常用的元素。您可以在 Figma 設計中創建一個按鈕。如果您是 Figma 新手，您必須首先掌握基礎知識。

以下是創建按鈕的分步指南：

1. 創建新的 Figma 設計。

   

2. 按鍵盤上的 F 鍵添加框架，然後選擇“桌面”或“手機”。

   

3. 使用鍵盤 R 鍵添加一個高度為 50 像素、寬度為 200 像素的矩形。

   

4. 按鍵盤上的“T”添加文本。將文本居中，使其水平和垂直位於文本框的中間。

   

5. 將此文本框放在矩形的中間。

   

6. 按照您的意願對組件進行分組。

您可以通過使用顏色選擇器創建一些顏色來添加顏色，也可以從互聯網訪問十六進制顏色。

對比

按鈕內的文本顏色取決於它與黑色或白色背景的對比度是否更好。您可以使用這兩個選項來查看哪一個效果最好。如果您不喜歡任何選項，可以調整按鈕樣式和顏色。

創建基本按鈕

Figma 上可以創建三個基本按鈕。

主按鈕

主按鈕為純色，帶有黑色或白色文本。當用戶使用應用程序時，此按鈕會吸引用戶。您可以通過以下方式創建一個：

1. 為您的按鈕選擇一種顏色。
2. 選擇矩形，然後應用選定的顏色。

   

3. 文本顏色為白色或黑色，具體取決於更好的對比度。

   

輔助按鈕

這通常是一個白色按鈕，但用您選擇的顏色勾勒出輪廓。按鈕文本也可以具有相同的顏色。這是您可以創建的第二個最重要的按鈕。它還應該吸引用戶的注意力。

1. 將矩形的顏色更改為白色 (#FFFFFF)。

   

2. 在矩形中添加描邊。您可以在這裡選擇您喜歡的顏色。

   

3. 將文本顏色更改為與文本顏色相同。

   

第三按鈕

第三按鈕不如前兩個按鈕重要。它們可以用作鏈接、取消訂閱或後退按鈕。它們通常是純文本，並且在某些情況下可以帶有下劃線。

1. 將矩形設置為白色，沒有描邊。

   

2. 將文本顏色更改為您喜歡的顏色。

   

您可以創建類似於主按鈕或輔助按鈕的第三按鈕。您還可以更改描邊寬度以獲得更好的可見性。

使用文本、自動佈局和顏色創建按鈕

借助平台上的工具，您可以獲得使用自動佈局和文本工具的實踐經驗。通過分步指導，創建按鈕應該相對容易實現。要創建按鈕，您需要創建文本圖層，將文本圖層轉換為自動佈局框架，並設置按鈕的樣式。

創建文本層

在這一步中，使用文本工具。

1. 點擊工具欄中的文本工具或按字母“T”。

   

2. 當文本工具處於活動狀態時，點擊畫布，然後輸入單詞“按鈕”。請注意，文本圖層名稱將與畫布上鍵入的任何內容相匹配，除非在圖層面板中手動更改它。

   

3. 如果需要更改圖層名稱，請雙擊左側邊欄，然後輸入您選擇的新名稱。

   

現在，您還可以通過增大或減小字體大小來調整字體大小。

1. 選擇您的文本圖層。

   

2. 導航到右側邊欄，然後更改“文本”部分的字體大小。您還可以更改字體或堅持默認選項。

   

將文本圖層轉換為自動佈局框架

此時，該按鈕需要進一步調整，使其看起來更迷人。通過自動佈局，您可以讓事情變得更加有趣。自動佈局是 Figma 上的一項強大功能，可應用於響應式設計。這些設計會自動適應內容大小、對象放置和設備類型等變化。

自動佈局可用於將圖層轉換為框架或現有框架。要將佈局應用到現有框架，請選擇文本圖層，然後按“Shift”“A”快捷鍵。應用佈局後，您會注意到一些變化。

• 文本層將位於框架內。自動佈局僅適用於組件和框架，因此 Figma 自動將文本圖層放置在新框架內。框架沒有填充顏色。這應用於按鈕樣式步驟。
• 選擇框架時，自動佈局設置將顯示在右側邊欄上。自動佈局可以進一步調整。
• 您注意到框架隨著文本的變化而縮小和放大。借助此類動態元素，您可以節省設計在各種設備上查看的內容或翻譯成其他語言的時間。

設置按鈕樣式

您可以從添加顏色開始。

1. 選擇一個框架圖層，然後在右側邊欄中選擇“填充設置”。這會自動填充顏色
   。顏色選擇器會更改顏色。

   

2. 選擇文本圖層並將填充調整為#FFFFFF。

   

3. 再次選擇框架，然後使用右側邊欄設置來調整角半徑。

   

接下來的事情是修復框架填充。將字母文本轉換為自動框架佈局後，會在文本和框架邊界之間自動添加填充。此時的填充在所有邊上看起來都是相等的。您可以將底部和頂部內邊距更改為小於左右內邊距。

您可以根據需要更新填充。可以使用以下快捷鍵同時更改左右內邊距或頂部和底部內邊距：

• 按住<⌥ Option>或<Alt>，然後單擊填充區域以輸入相對邊的填充值
• 按住 <⌥ Option> 或 <Alt> 的同時拖動手柄可更改相對側的內邊距

此時，按鈕看起來不錯，但您仍然可以更新標籤。您需要雙擊文本才能進行編輯。輸入“註冊”。當您鍵入時，按鈕會調整大小。這是使用自動佈局和文本工具設計按鈕的方法。您現在可以嘗試新的東西，例如將按鈕變成組件或添加變體。

製作一個可點擊的按鈕

Figma 被 Uber、Facebook、Google 和 Netflix 等公司使用。可點擊按鈕功能使此類公司的設計人員更容易創建交互式可點擊按鈕。這些按鈕使此類平台上的導航變得更加容易。

以下是如何在 Figma 中開發此類按鈕：

1. 在菜單中選擇“原型”選項（右）。

   

2. 單擊“原型”選項卡下方的“加號”(+) 圖標。這允許您添加交互。

   

3. 在交互詳細信息窗口中選擇“單擊時”。

   

4. 選擇“打開鏈接”選項。

   

5. 添加單擊按鈕後將直接指向的頁面鏈接。

   

6. 點擊“X”圖標退出交互詳細信息窗口。

   

7. 導航到右上角的“播放”選項按鈕。

   

8. 點擊“播放”按鈕即可預覽設計。

如果將光標懸停在按鈕上，它會變為手狀圖標。這表明該按鈕現在可以單擊。

注意：創建可點擊 Figma 按鈕時，請始終使用“點擊時”，而不是“拖動時”。“點擊時”允許向按鈕添加可點擊的鏈接。無法單擊“拖動時”按鈕。

使用 Figma 按鈕進行更好的設計

Figma 按鈕具有主題、狀態、內部填充、表格長度、寬度和高度等變量。通過學習如何在平台上創建按鈕，您可以充分利用 Figma 並在 Figma 庫中添加有價值的組件。

您嘗試過在 Figma 上創建按鈕嗎？如果是這樣，您的經歷是什麼樣的？請在下面的評論部分告訴我們。