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

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

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

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

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

https://youtu.be/jlgg8AQfUhM?si=d8oAs8w6IiBNjodr

UI 字裡行間的字型學

螢幕已經成為我們與各種 App 和網站互動的主要方式

無論是查看訊息、購物

還是使用各種服務

清晰易懂的介面設計對於提升使用者體驗來說非常關鍵

而在這之中

字體（typography）可是扮演了重要的角色噢

假設一下，今天你在介面上看到這張圖：

這樣看起來是不是非常凌亂？

資訊的傳達也變得不那麼清楚

是不是覺得眼睛都快花了

很快就會看不下去了

造成這種情況的原因主要有三個：

1. 使用的字體過於花俏，不容易辨識。
2. 一段話中包含了太多不同字型，沒有統一性。
3. 字體與當前情境的氣氛不符。

該如何避免這個狀況呢？

先教教大家利用 無襯線字（San Serif）

與 **有襯線字(Serif）**來辨識字體所營造的氛圍和風格

• San Serif (無襯線字）

英文：Arial、San Francisco、Helvetica、Roboto、Open Sans、Poppins

中文：微軟正黑體、PingFang、Noto Sans CJK

特點是字體筆劃末端沒有這些腳腳（即「襯線」）

看起來比較簡潔、現代

也是我們現在最常使用在數位介面上的樣式

它的優點是易於閱讀

尤其在小尺寸和螢幕上

例如，Apple 專屬的字體

San Francisco 和 PingFang

完美地呈現了無襯線的簡約感

同時也利於應用在不同尺寸的裝置

• Serif (有襯線字）

英文：Times New Roman、Georgia、Garamond、Baskerville

中文：SimSun、Apple LiSung

就是無襯線的相反

在筆劃末端有長出小腳腳（也就是襯線）

這些筆劃的末端有細小的延伸線或裝飾

可以使字體看起來更傳統和正式

也更經典

尤其在長篇閱讀時更易於辨認和閱讀

就像 Medium 的英文介面中

就大量的被使用「Georgia」

這個字體讓文章看起來更專業且具有書籍般的質感

雖然無襯線字體更常見於數位介面設計

但襯線字體在數位產品中也有其特定的應用場景和優勢

這些字體不僅可以提升品牌形象

還能在長篇閱讀中提供更好的可讀性和舒適度

那怎樣才是合適的字體尺寸呢？

• 字體大小（Font Size）：

通常以像素（px）或點（pt）為單位來衡量

但在 Figma 的世界裡

可以直接輸入數值就好

這個就會對應到 px

例如 14px 或 12pt

• 行高（Line Height）：

或稱為行間距

通常設置為字體大小的 1.5 倍左右

以增加可讀性

在傳遞資訊的過程中

UI 也需要依據 Wireframe 提供的資訊層級來設置文字的層級

以「14px」至「16px」作為常見的基準字體大小

來根據不同裝置和解析度進行調整

• 標題（Headings）：

標題應該比正文大

通常是 18px 至 24px

甚至更大

根據其重要性和位置進行調整

• 副標題（Subheadings）：

副標題比標題小

但仍然需要比正文大

通常是 16px 至 20px

• 正文（Body Text）：

通常設置為 14px 至 16px

確保閱讀舒適

• 輔助文本（Captions、Footnotes）：

這些文本應該比正文小

通常是 10px 至 12px

但仍需維持可讀性

了解上面所說的基本規則後

我們也可以在字體中加入字重（Font Weight）

字重是什麼呢

就是字體的重量

例如標題可以使用 Bold 或 Semi-bold

正文使用 Regular

整理一下

• 基準字體大小：例如，將正文設置為16px。
• 標題和副標題：設置 H1 為 24px，H2為 20px，H3 為 18px。
• 行高：將正文行高設置為 1.5 倍，即 24px。
• 輔助文本：設置為 12px，確保可讀性。

大概會是這種感覺

字體的選擇絕對是一個長期的經驗累積

當我們了解到基礎的知識後

可以看看其他數位產品是如何應用字型

也可以參考設計系統

如 Google 的 Material Design

Apple 的 Human Interface Guidelines 等

後面我們也會提到

如何使用 Figma 的 Prototype 來進行測試和調整

相信大家一定會越來越上手的

關於作者

設計師 Riven

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

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

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

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

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

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