在 Figma 中創建表格

在本教程中，我們將討論如何使用組件和原子設計方法在 Figma 中創建表格。 我們還將了解表格佈局的基本元素以及如何將組件包含在組件庫中，以便它們可以成為您正在使用的設計系統的一部分。

為了方便您，我準備了一個模型示例，它使用了本教程所需的所有組件。

要繼續學習，您至少需要對 Figma 的基本概念、其界面以及如何使用 Figma 組件有一定的了解。 但是，如果您是 Figma 新手並使用表格數據，我建議您觀看“入門”視頻以幫助您更好地了解 Figma 端到端，以及文章“如何構建複雜的 Web 表格”這是不久前在 Smashing Magazine 上發表的。

為了簡化本教程的範圍，我們假設顏色、字體和效果已經作為樣式存在於您即將開始的 Figma 項目中。 就原子設計而言，它們是原子。 （要了解更多信息， littleBits的人們就該主題寫了一篇很棒的文章。）

本教程的目標受眾是已經在其工作流程中採用 Figma 或計劃在其下一個設計項目中嘗試 Figma 但不確定如何開始的設計師（UX、UI）。

所以，事不宜遲，讓我們開始吧！

快速說明：在撰寫本文時，Figma 介紹了插件。 在發佈時，沒有任何好的表格可以用於處理表格，但情況可能會很快發生變化。 誰知道呢，也許這篇文章實際上會幫助一個有抱負的 Figma 插件開發人員創建一個非常簡潔的 Figma Tables 插件，或者至少，我希望它會。

介紹

把桌子想像成一個有機體。 表格單元格是由單個原子組成的分子。 在設計方面，它們是細胞屬性。

所以，讓我們從細胞開始。 它具有三個屬性：

1. 背景
2. 邊境
3. 內容

現在我們將仔細研究它們中的每一個。

背景

背景將是 Figma 中的一個單獨組件。 大小並不重要，因為我們可以根據需要拉伸組件，但讓我們從將大小設置為 100×36 像素開始。

在這個組件中，添加一個與組件本身大小相同的矩形。 它將是組件內的唯一對象。 我們需要使用約束將矩形的邊框附加到組件的邊框上（在“約束”部分的右側面板中將約束設置為“Left & Right”和“Top & Bottom”），以便矩形自動拉伸到零件。

如果你想看到它的實際效果，請觀看本教程，了解約束如何在 Figma 中工作。

矩形的填充顏色將決定單元格的背景顏色。 讓我們為它選擇白色。 我建議從項目開始時配置的顏色樣式中選擇該顏色。

邊境

這個比背景有點棘手。 您不能只用筆劃創建一個矩形。 我們可能需要不同類型的邊框：一種用於單獨的單元格（周圍有邊框），一種用於只有頂部和底部邊框的整行單元格，或者一種用於表格標題，我們可能希望用更寬的線。 有很多選擇。

邊框屬性：

• 邊界線（左、右、上、下或沒有任何一個）
• 行寬
• 線條顏色
• 線條樣式

單元格邊框內的每一行可能有不同的寬度、顏色和样式。 例如，左邊的可能是一條連續的紅線，而最上面的一條可能是一條灰色的虛線。

讓我們創建一個大小為 100×36 像素的組件（與我們之前所做的相同）。 在組件內部，我們需要為每個邊框添加 4 行。 現在註意我們將如何做到這一點。

1. 用組件寬度的長度為底部邊框添加一條線；
2. 將其位置設置為底部邊框和約束以水平拉伸並粘在底部邊框上；
3. 對於上邊框，複製下邊框的線，將其旋轉 180 度並粘貼到組件的頂部。 （不要忘記將其約束更改為粘在頂部並水平拉伸。）；
4. 接下來，對於左邊框，只需旋轉 -90 度，並將其位置和約束設置在左側，緊貼左邊框並垂直拉伸；
5. 最後但同樣重要的是，您可以通過將其旋轉 90 度並設置其位置和約束來創建右邊框。 將每條線的描邊顏色和描邊寬度分別設置為灰色（從顏色樣式中選擇）和 1 個像素。

注意：您可能會問自己為什麼我們旋轉了底部邊框的線。 好吧，當你在 Figma 中改變線條的筆觸寬度時，它會上升。 所以我們必須將這個“上升”方向設置為組件的中心。 更改線條的筆劃寬度（在我們的例子中是邊框大小）不會擴展到組件（單元格）之外。

現在我們可以為單元格中的每個邊框分別隱藏或自定義樣式。

如果您的項目有多種表格邊框樣式（下面顯示了一些邊框示例），您應該為每種樣式創建一個單獨的組件。 只需像以前一樣創建一個新的主組件，然後按照您的需要對其進行自定義。

單獨的筆劃組件將節省大量時間並增加可擴展性。 如果您更改主組件內的筆觸顏色，則整個表格都會調整。 與上面的背景顏色相同，每個單獨的單元格都可以有自己的筆劃參數。

內容

這是所有組件中最複雜的組件。

我們需要在項目中創建表格內容的所有可能變體：純文本、帶有圖標（左或右、不同對齊方式）的文本、複選框、開關以及單元格可能包含的任何其他內容。 為了簡化本教程，請檢查模型文件中的組件。 如何在 Figma 中創建和組織組件是另一篇文章的主題。

但是，對內容組件有一些要求：

• 組件應在垂直​​和水平方向上輕鬆拉伸以適合單元格；
• 組件的最小尺寸應該小於默認的單元格大小（尤其是高度，記住可能的單元格填充）；
• 避免任何邊距，以便組件可以在單元格內正確對齊；
• 避免不必要的背景，因為單元格本身已經擁有它。

內容組件可以逐步創建：從文本組件等基本組件開始，隨著項目規模的擴大添加新組件。

我們希望內容在組件中的原因與其他元素相同——它節省了正常運行時間。 要更改單元格的內容，我們只需要在組件中進行切換即可。

創建單元組件

我們創建了所有需要的原子：背景、邊框、內容。 是時候創建一個細胞成分了，即由原子構成的分子。 讓我們收集一個單元格中的所有組件。

將背景組件設置為底層並將其拉伸到整個單元格大小（將約束設置為“左右”和“上下”）。

添加與背景組件具有相同約束的邊框組件。

現在到最複雜的部分——內容內容。

單元格有填充，因此您需要使用組件的內容製作一個框架。 除填充外，該框架應拉伸到整個單元格大小。 內容組件也應該被拉伸到整個幀大小。 內容本身需要被剝奪任何邊距，因此所有填充將由單元格設置。

歸根結底，單元格填充是組件中唯一的屬性，我們只會設置一次，以後沒有機會更改它。 在上面的示例中，我將所有邊設置為 4px。

注意：作為修復，您可以在需要額外邊距的列的左右創建具有空單元格的列（例如，沒有內容和寬度為 16 像素）。 或者，如果您的表格設計允許，您可以在單元格組件內添加水平填充。 例如，Google Material Design 中的單元格默認具有 16 像素的填充。

不要忘記刪除單元格和框架的“剪輯內容”選項（這可以在“屬性”部分的右側面板中完成）。 單元格的內容可以超出其邊界； 例如，當您的單元格內有一個下拉菜單並且您想通過彈出窗口顯示其狀態時。

注意：我們將使用這種單元格樣式作為主要樣式。 如果您的表格有其他樣式，請不要擔心——我們將在表格狀態和組件中介紹，而不是覆蓋部分。

標準表格的單元格選項

此步驟可能是可選的，但如果您的表格需要狀態，那麼您不能沒有它。 如果表格中有多個邊框樣式，則更是如此。

因此，讓我們創建額外的單元格組件，以便更輕鬆地構建表格。 使用表格時，我們將根據其在表格中的位置（例如，取決於邊框的類型）選擇適當的組件。

為了做到這一點，讓我們使用我們的單元組件並從中再創建八個主組件。 我們還需要禁用負責邊界的相應層。 結果應如下圖所示。

頂行是表格頂部和中間的單元格。 底行僅適用於底部的單元格。 這樣我們就可以一個接一個地放置單元格，沒有間隙並保持相同的筆劃寬度。

幾個例子：

注意：對於上面創建的每個邊框樣式，最好添加前面描述的主組件。

所以我們已經排除了覆蓋單元實例的必要性（準確地說，禁用了適當的層）。 取而代之的是，我們使用各種組件。 現在，例如，如果一列使用與默認樣式不同的樣式（填充顏色或邊框），您可以選擇此列並簡單地更改相關組件。 一切都會好起來的。 另一方面，手動更改每個單元格的邊框（禁用適當的邊框）是您不想打擾的痛苦。

現在我們準備從我們製作的各種細胞成分（分子）創建表格（根據原子設計 - 生物體）。

自定義表格

更改整個表格中的行高相對容易：突出顯示表格，更改元素高度（在這種情況下，單元格的高度，屬性部分右側面板中的 H），然後從元素為0。就是這樣：更改行高需要兩次點擊！

更改列寬：突出顯示列並更改寬度大小。 將表格的其餘部分靠近後，使用對齊面板中的Tide Up選項以及最右側圖標下下拉列表中的第一項來選擇整個表格。

注意：我不建議對行和列進行分組。 如果更改擴展元素的列大小，您將獲得寬度和高度的小數值。 如果您不將它們分組並捕捉到像素網格，則單元格大小將保持為整數。

背景顏色、筆劃類型和內容數據可以在適當的組件或八個單元格主組件之一（具有不同筆劃樣式的單元格）中更改。 唯一不能立即更改的參數是單元格邊距，例如content paddings 。 其餘的很容易定制。

組件，而不是覆蓋

看看我們最終得到的結果，這似乎有點矯枉過正。 如果您的項目中只有一張表。 在這種情況下，您可以簡單地創建一個單元格組件並關閉背景和筆觸組件。 只需將它們包含在單元格組件中，創建表格並為每個單獨的單元格進行必要的自定義。

但是，如果組件包含在由許多其他文件使用的庫中，那麼最有趣的東西就來了。

注意：*我不建議更改組件實例中的背景顏色和筆劃。 僅在 master 中更改它們。 通過這樣做，那些具有覆蓋的實例將不會得到更新。 這意味著您必須手動執行此操作，而這正是我們試圖避免的。 所以讓我們堅持使用主組件。*

如果我們需要創建其他類型的表格單元格（例如表格標題），我們為具有適當樣式的單元格添加必要的主組件集（就像我們在上面對具有不同筆劃樣式的八個單元格所做的那樣），並且用它。 是的，它比覆蓋組件的實例需要更長的時間，但是這樣您就可以避免更改主控將這些更改應用於所有佈局的情況。

表狀態

讓我們談談表格元素的狀態。 一個單元格可以具有三種狀態：默認、懸停和選中。 列和行相同。

如果您的項目相對較小，則所有狀態都可以通過表組件實例內部的覆蓋來設置。 但如果它很大，並且您希望將來能夠更改狀態的外觀，則必須為所有內容創建單獨的組件。

您需要為每種狀態添加具有不同筆觸變體的所有八個單元格（可能更少，取決於筆觸樣式）。 是的，我們還需要單獨的背景顏色組件和狀態筆觸。

最後，它看起來類似於：

這就是麻煩的所在。不幸的是，如果我們按照上述方式進行所有操作（將組件的狀態從一個更改為另一個時），則存在丟失單元格內容的風險。 除了內容類型與主單元格中相同的情況外，我們必須對其進行更新。 在這一點上，我們對此無能為力。

我在模型文件中添加了以幾種不同方式製作的表格：

• 使用本教程（單元格樣式的單獨組件）；
• 使用單元格組件（用於邊框、背景和內容的組件）；
• 使用將所有內容結合在一起的單元格組件（僅添加內容組件）。

嘗試四處玩耍並更改單元格的樣式。

結論

如果您在多個項目中使用相同的組件庫並且每個項目中都有合理數量的表格，您可以創建組件的本地副本（具有筆劃樣式的單元格組件，如果需要，還可以創建具有不同樣式的單元格組件）狀態），自定義它們，並在項目中使用它們。 可以根據本地組件設置單元格內容。

此外，如果您將該表用於具有不同類型表的大型項目，則上述所有組件都可以輕鬆縮放。 表格組件可以改進到無窮大甚至更遠，例如在懸停和其他類型的交互時創建單元格狀態。

問題、反饋、想法？ 在下方發表評論，我會盡我所能幫助你！

Figma Table Mockup 下載

正如所承諾的，我創建了一個完整版本的 Figma 表格模型，歡迎您將其用於學習目的或您喜歡的任何其他內容。 享受！

相關閱讀

• “原子設計”，布拉德·弗羅斯特
• “如何構建複雜的 Web 表”，Smashing Magazine 的 Slava Shestopalov
• “在 Figma 中創建原子組件”，設計與工程團隊，littleBits
• “Figma 表格：單個單元組件的數據網格設計”，Roman Kamushken，Setproduct

有用的資源

• Figma YouTube 頻道
  YouTube 上的官方 Figma 頻道——如果你是 Figma 的新手，首先要看的就是它。
• 谷歌表格同步
  一個 Figma 插件，可幫助您從 Google 表格中獲取數據到您的 Figma 文件中。 這應該適用於本教程中的技術，但您需要花費一些時間來重命名所有文本圖層才能使其正常工作。