100 種 Figma 設計的方法｜UI/UX 設計專欄

Figma 是一款 UI/UX 使用者介面與體驗設計軟體，專用於介面設計和原型製作，能讓多名設計師同時在同一專案上協作，這使得團隊合作變得更加簡單。Figma 支援向量圖形編輯，並提供各種設計元件庫和擴充套件，方便設計師快速建立和調整設計。

Figma 不僅適用於設計師，也對開發者友好。開發者可以直接查看設計的樣式、間距等細節，並導出設計資產和切圖標註，這極大地縮短了設計與開發之間的溝通時間。

我們可以直接註冊並下載軟體到 Windows, macOS 使用，並且 Figma 是網頁瀏覽器就能打開的軟體，因此就算不安裝也可以在任何設備上使用，包括 Linux 作業系統等。

很開心這次可以挑戰鐵人賽！接下來的 30 天我會每天發佈一則關於 Figma 的小教學，並且為了能夠有體驗更好地學習軟體操作，也會搭配一支螢幕錄影的影片，可以點進 YouTube 頻道觀看順便訂閱噢！🥸

https://youtu.be/Qncz8g6L7z0

Grid 網格系統

在數位產品設計中

我們會定義網格系統

這就好比是一個房間內的家具布置

我們會按照一定的規範和邏輯來擺放家具

確保每件家具都整齊有序地排列在房間裡

這樣就能創造出一個有條理的空間

在這個單元中

我將帶你了解數位產品介面中的網格系統知識

並教你如何在 Figma 中建立這樣的系統

Figma 的 Layout Grid

就是跟 Sketch 之類的 UI 設計軟體中

通稱叫 Grid System 是一樣的東西

但是 Figma 有一個特別的地方

就是除了可以像我們熟知的建立在 Frame（畫布） 上以外

它還可以建立在 Components（元件） 裡噢

12 等分的格線系統在切版上真的很方便

所以我們在設計的時候也會很喜歡用

也方便我們設計時在排版介面使用

接下來，我們開啟 Frame

在右側操作選單中的 Layout grid 點擊新增

在選單中的下拉選單選擇 Columns

然後我們這次設定 12 等分排版、格線是有 30px 間距

所以在 Count 輸入12、Gutter 輸入 30

之後我們就可以輕易有序地排版

如果我們希望可以保留這樣的 Grid 網格系統

我們可以在右側操作選單中的 Layout grid 點擊 Styles

再點擊 Create Styles

輸入名稱

我們就可以獲得這個網格的 Components

之後就不需要重新設定

這樣就是最簡易的網格

我們在實作的單元上會反覆用到

所以現在可以先知道該怎麼開啟

我們明天見！

關於作者

設計師 Riven

資深數位產品設計師｜虛擬 VTuber

社群傳送門 - https://portaly.cc/designer.riven

在 IT 和網路產業近十年的數位產品設計師，專注於 UI/UX 使用者介面與體驗設計領域，在全臺多間大專院校與社群機構擔任顧問及講師，並於國內外各大線上課程平台開立設計課程，目前已累積超過近萬名學員參與上課。

為 Adobe 官方合作的設計師兼 Insider，曾環島舉辦設計工作坊，並獲邀代表台灣飛往美國洛杉磯參加 Adobe MAX 設計師年會，並以設計師 KOL 角色與 Intel、微軟、華碩、微星等知名品牌合作推廣科技產品。

常在 Medium 寫作設計上的知識與觀察，並得到官方認證 #Design 領域 Top Writer，同時也會在 YouTube 上製作影片教學設計的方法，近期開始實驗使用 VTuber 技術在 IG 用 Reels 短影片分享設計技巧。

▌擅長利用淺顯易懂的內容，將艱難的設計與開發技術，用任何人都能夠聽得懂的語彙，說給每一個人聽。