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

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

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

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

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

https://youtu.be/PV3UHjauSgI

Navigation 導覽選單

網站的導覽列（Navigation bar）就像是網站的導航地圖

它實際上是一個連結列表

目的是在引導使用者到他們想要到達的目標頁面

就像路標一樣，導覽列使用超連結連接到網站內的其他頁面

同時告訴你點擊導覽列上的各個項目會帶你到哪個網頁

網站的導覽列設計的幾個注意要點：

確認你的網站結構及分類、避免過於複雜的導覽列設計、關鍵字的挑選、扁平化你的導覽列結構

我們先建立一個 Frame 大小是 1440*80

再建立一個長條的 Frame

作為搜尋框的部分

再用我們前面單元學到的方式

建一個搜尋按鈕

再放入到搜尋框的右側

記得上下右的邊距保留 8px

接下來我們點選上方操作欄位的最左邊按鈕

向下選 收藏庫（Libraries）

並選擇 Element UI Kit 2.15.7 (Community) 加入

（要先下載這個 Element UI Kit 2.15.7 (Community)）

然後我們點選左側欄位 資產（Assets）

選擇在 Element UI Kit 2.15.7 (Community) 中的 icon

我們需要選擇「向下箭頭、電話、人形、購物車」

接下來我們選取「電話、人形、購物車」

點選右側選單的 平均水平間隔（Distribute horizontal spacing）

靠上（Align top）讓 icon 對齊

然後點選 Auto Layout

並將物件水平間隔（Horizontal Gap. between items）設定 16

再把 Icon Group

放在 Navigation bar 右側

下一步，在上方選單點選「文字」

並將文字與向下箭頭 Icon 放在一起

並建立成 Component

接下來改成對應的文字後

將三個文字組透過點選 Auto Layout

並將物件水平間隔（Horizontal Gap. between items）設定 24

再將文字組放在 Navigation bar 的搜尋框右側

最後再調整細節就完成了

關於作者

設計師 Riven

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

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

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

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

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

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