中的表格上苦苦掙扎的人的詳細指南

RAHIM26 · 發表於 2023-11-1 15:24:28

我們將使用元件建立一個表，以便稍後您可以在可擴充套件性和編輯方面節省大量時間。此外，您還可以輕鬆地將表格整合到您的設計系統中。在本教程中，我們將討論如何使用元件和原子設計方法在 Figma 中建立表格。我們還將瞭解表格佈局的基本元素以及如何將元件包含在元件庫中，以便它們成為您正在使用的設計系統的一部分。為了方便您使用，我準備了一個模型示例，其中使用了本教程所需的所有元件。要繼續學習，您至少需要對 Figma 的基本概念、其介面以及如何使用 Figma 元件有一定的瞭解。但是，如果您是 Figma 新手並且正在使用表資料，我建議您觀看“入門”視訊，以幫助您更好地端到端理解 Figma，以及文章“如何構建複雜的 Web 表”不久前發表在 Smashing 雜誌上。為了簡化本教程的範圍，我們假設顏色、字型和效果已經作為樣式存在於您即將開始的 Figma 專案中。就原子設計而言，它們是原子。
要了解更多資訊， littleBits的人們寫了一篇關於該主題的精彩文章。本教程的目 美國手機號碼列表 標受眾是設計師（UX、UI），他們要麼已經在工作流程中採用 Figma，要麼計劃在下一個設計專案中嘗試 Figma，但不確定如何開始。所以，事不宜遲，讓我們深入研究吧！小提示：在撰寫本文時，Figma 引入了外掛。在釋出時，還沒有任何適合處理表格的好方法，但情況可能會很快發生變化。誰知道呢，也許這篇文章實際上會幫助有抱負的 Figma 外掛開發人員建立一個非常簡潔的 Figma Tables 外掛，或者至少，我希望它會。參加關於前端、設計和使用者體驗的精彩研討會，包括實用要點、現場會議、視訊錄製和友好的問答。與布拉德·弗羅斯特（Brad Frost）、史蒂夫·沃爾特（Stéph Walter）和其他許多人一起。跳轉到研討會 ↬ 功能面板簡將桌子想象成一個有機體。表格單元格是由單個原子組成的分子。從設計角度來說，它們是細胞屬性。那麼，讓我們從細胞開始。它具有三個屬性：背景邊界內容現在我們將仔細研究其中的每一個。背景背景將是 Figma 中的一個單獨元件。大小並不重要，因為我們可以根據需要拉伸元件，但我們首先將大小設定為 100×36 畫素。

在此元件中，新增一個與元件本身大小相同的矩形。它將是元件內的唯一物件。我們需要使用約束將矩形的邊框附加到元件的邊框（在“約束”部分的右側面板中將約束設定為“左和右”和“上和下”），以便矩形自動拉伸到元件的大小成分。如果您想檢視實際效果，請觀看本教程，瞭解 Figma 中的約束如何工作。背景元件背景元件（“原子”）（大預覽）矩形的填充顏色將決定單元格的背景顏色。我們為其選擇白色。我建議從專案開始時配置的顏色樣式中選擇該顏色。背景顏色更改背景顏色（大預覽）邊框這個比背景有點棘手。你不能只用一筆畫建立一個矩形。我們可能需要不同型別的邊框：一種用於單獨的單元格（周圍有邊框），一種用於僅具有頂部和底部邊框的整行單元格，或者一種用於我們可能希望用更寬的線。有很多選擇。邊框屬性：邊界線（左、右、上、下，或者沒有任何一條）行寬線條顏色線條樣式單元格邊框內的每條線可能具有不同的寬度、顏色和樣式。例如，左邊的一條可能是一條連續的紅線，而上面的一條可能是一條灰色的虛線。讓我們建立一個大小為 100×36 畫素的元件（與之前相同）。

Gregorybiz · 發表於 2024-10-14 16:10:26

		自動登入	找回密碼
密碼			立即註冊