# 靈感源自 Figma 的設計系統

> Category: 設計與創意
> 協作設計工具。色彩鮮活多元，活潑而不失專業。

## 1. 視覺主題與氛圍

Figma 的介面是那個設計了自身的設計工具——一堂排版精妙的大師課，自訂可變字體（figmaSans）在極細（字重 320）與粗體（字重 700）之間無縫切換，並在大多數字體系統從不涉足的中間值（330、340、450、480、540）處設有停駐點。這種細粒度的字重控制為每個文字元素賦予了精確校準的視覺分量，透過微小差異建構層級，而非「一般與粗體」這種粗放工具。

頁面呈現出一種迷人的二元性：介面外殼嚴格遵循黑白配色（字面上僅能偵測到 `#000000` 和 `#ffffff` 兩種顏色），而英雄區和產品展示區則爆發出鮮活的多色漸層——電光綠、亮黃、深紫、熱粉。這種分隔意味著設計系統本身是無色的，將產品的多彩輸出作為核心內容。Figma 的行銷頁面本質上是一面陳列彩色藝術作品的白色畫廊牆。

讓 Figma 與眾不同的，除了可變字體之外，還有它的圓形與膠囊幾何造型。按鈕使用 50px 圓角（膠囊）或 50%（圖示按鈕的完美圓形），營造出一種有機的、工具調色板式的感覺。虛線輪廓聚焦指示器（`dashed 2px`）是一種刻意為之的設計選擇，與 Figma 編輯器中的選取控點相呼應——網站的 UI 語言引用了產品的 UI 語言。

**核心特徵：**
- 自訂可變字體（figmaSans），具有非尋常的字重停駐點：320、330、340、450、480、540、700
- 嚴格黑白的介面外殼——顏色僅存在於產品內容中
- figmaMono 用於大寫技術標籤，搭配寬字母間距
- 膠囊形（50px）與圓形（50%）按鈕幾何造型
- 虛線聚焦輪廓，呼應 Figma 編輯器的選取控點
- 鮮活的多色英雄漸層（綠、黃、紫、粉）
- OpenType `"kern"` 特性全域啟用
- 全域負字母間距——即便正文文字也使用 -0.14px 至 -0.26px

## 2. 色彩方案與用途

### 主色
- **純黑** (`#000000`)：所有文字、所有實色按鈕、所有邊框。介面唯一的「顏色」。
- **純白** (`#ffffff`)：所有背景、白色按鈕、深色表面上的文字。二元體系的另一半。

*注：Figma 行銷網站的介面層僅使用這兩種顏色。所有鮮亮色彩僅出現在產品截圖、英雄漸層和嵌入內容中。*

### 表面與背景
- **純白** (`#ffffff`)：主要頁面背景和卡片表面。
- **玻璃黑** (`rgba(0, 0, 0, 0.08)`)：用於次要圓形按鈕和玻璃效果的微妙深色疊加。
- **玻璃白** (`rgba(255, 255, 255, 0.16)`)：深色／彩色表面上按鈕的磨砂玻璃疊加。

### 漸層系統
- **英雄漸層**：由電光綠、亮黃、深紫和熱粉構成的鮮活多停駐點漸層。這個漸層是英雄區的視覺標誌——它代表著工具的創意無限可能。
- **產品區域漸層**：各產品區域（Design、Dev Mode、Prototyping）在其展示中可能使用獨特的色彩主題。

## 3. 排版規則

### 字體族
- **主字體**：`figmaSans`，備選字體：`figmaSans Fallback, SF Pro Display, system-ui, helvetica`
- **等寬體 / 標籤**：`figmaMono`，備選字體：`figmaMono Fallback, SF Mono, menlo`

### 層級

| 角色 | 字體 | 尺寸 | 字重 | 行高 | 字母間距 | 備注 |
|------|------|------|--------|-------------|----------------|-------|
| 展示 / 英雄 | figmaSans | 86px (5.38rem) | 400 | 1.00（緊湊） | -1.72px | 最大衝擊力，極端字距 |
| 區塊標題 | figmaSans | 64px (4rem) | 400 | 1.10（緊湊） | -0.96px | 功能區塊標題 |
| 副標題 | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | 強調區塊文字 |
| 輕量副標題 | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | 輕字重區塊文字 |
| 功能標題 | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | 粗體卡片標題 |
| 大號正文 | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px 至 -0.14px | 描述、引言 |
| 正文 / 按鈕 | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px 至 normal | 標準正文、導覽、按鈕 |
| 輕量正文 | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px 至 normal | 輕字重正文 |
| 等寬標籤 | figmaMono | 18px (1.13rem) | 400 | 1.30（緊湊） | 0.54px | 大寫區塊標籤 |
| 等寬小號 | figmaMono | 12px (0.75rem) | 400 | 1.00（緊湊） | 0.6px | 大寫微型標籤 |

### 原則
- **可變字體精準性**：figmaSans 使用大多數系統從不觸及的字重——320、330、340、450、480、540。這透過微妙的字重差異而非大幅跳躍來建構層級。330 與 340 之間的差異幾乎無法察覺，卻在結構上意義重大。
- **輕體為基礎**：大多數正文使用 320–340（比典型的 400「一般」更輕），營造出空靈、通透的閱讀體驗，與設計工具的美學相契合。
- **處處字距微調**：每個文字元素都啟用 OpenType `"kern"` 特性——字距微調不是可選項，而是結構性的。
- **預設負字距**：即便正文也使用 -0.1px 至 -0.26px 的字母間距，營造出全域緊湊的文字效果。展示文字進一步壓縮至 -0.96px 和 -1.72px。
- **等寬字體用於結構**：figmaMono 以大寫形式搭配正字母間距（0.54px–0.6px），創造出技術指示牌標籤。

## 4. 元件樣式

### 按鈕

**黑色實色（膠囊）**
- 背景：純黑（`#000000`）
- 文字：純白（`#ffffff`）
- 圓角：圓形（50%），用於圖示按鈕
- 聚焦：虛線 2px 輪廓
- 最強調

**白色膠囊**
- 背景：純白（`#ffffff`）
- 文字：純黑（`#000000`）
- 內距：8px 18px 10px（不對稱垂直）
- 圓角：膠囊（50px）
- 聚焦：虛線 2px 輪廓
- 深色／彩色表面上的標準 CTA

**玻璃深色**
- 背景：`rgba(0, 0, 0, 0.08)`（微妙深色疊加）
- 文字：純黑
- 圓角：圓形（50%）
- 聚焦：虛線 2px 輪廓
- 淺色表面上的次要操作

**玻璃淺色**
- 背景：`rgba(255, 255, 255, 0.16)`（磨砂玻璃）
- 文字：純白
- 圓角：圓形（50%）
- 聚焦：虛線 2px 輪廓
- 深色／彩色表面上的次要操作

### 卡片與容器
- 背景：純白
- 邊框：無或極簡
- 圓角：6px（小型容器）、8px（圖片、卡片、對話框）
- 陰影：微妙至中等的層次感效果
- 產品截圖作為卡片內容

### 導覽
- 白色背景上的簡潔水平導覽
- Logo：黑色 Figma 字標
- 產品標籤：膠囊形（50px）標籤導覽
- 連結：黑色文字，1px 底線裝飾
- CTA：黑色膠囊按鈕
- 懸停：透過 CSS 變數控制文字顏色

### 特色元件

**產品標籤列**
- 水平膠囊形標籤（50px 圓角）
- 每個標籤代表 Figma 的一個產品區域（Design、Dev Mode、Prototyping 等）
- 啟用標籤高亮顯示

**英雄漸層區塊**
- 全寬鮮活多色漸層背景
- 帶 86px 展示標題的白色文字疊加
- 產品截圖懸浮在漸層中

**虛線聚焦指示器**
- 所有互動元素在聚焦時使用 `dashed 2px` 輪廓
- 引用 Figma 編輯器中的選取控點
- 一種將網站與產品相連接的元設計選擇

## 5. 版面原則

### 間距系統
- 基礎單位：8px
- 刻度：1px、2px、4px、4.5px、8px、10px、12px、16px、18px、24px、32px、40px、46px、48px、50px

### 格線與容器
- 最大容器寬度：最高 1920px
- 英雄區：全寬漸層，內容置中
- 產品區：交替展示
- 頁尾：深色全寬區塊
- 響應式範圍：559px 至 1920px

### 留白哲學
- **畫廊式節奏**：充裕的間距讓每個產品區塊如同獨立展品般呼吸。
- **色彩區塊作為視覺喘息**：漸層英雄區和產品展示區在單色介面區塊之間提供色彩上的緩衝。

### 圓角比例
- 極小（2px）：小型連結元素
- 微妙（6px）：小型容器、分隔線
- 舒適（8px）：卡片、圖片、對話框
- 膠囊（50px）：標籤按鈕、CTA
- 圓形（50%）：圖示按鈕、圓形元素

## 6. 深度與層次

| 層級 | 處理方式 | 用途 |
|-------|-----------|-----|
| 平坦（層級 0） | 無陰影 | 頁面背景、大多數文字 |
| 表面（層級 1） | 漸層／深色區塊上的白色卡片 | 卡片、產品展示 |
| 抬升（層級 2） | 微妙陰影 | 懸浮卡片、懸停狀態 |

**陰影哲學**：Figma 節制地使用陰影。主要的深度機制是**背景對比**（彩色／深色區塊上的白色內容）以及產品截圖本身固有的立體感。

## 7. 應為與不為

### 應為
- 使用 figmaSans 搭配精準的可變字重（320–540）——細粒度字重控制即是設計本身
- 保持介面嚴格的黑白配色——顏色僅來自產品內容
- 對所有互動元素使用膠囊（50px）和圓形（50%）幾何造型
- 套用虛線 2px 聚焦輪廓——標誌性的無障礙模式
- 在所有文字上啟用 `"kern"` 特性
- 將 figmaMono 以大寫形式搭配正字母間距用於標籤
- 全域套用負字母間距（-0.1px 至 -1.72px）

### 不為
- 不要新增介面顏色——單色調色盤是絕對的
- 不要使用標準字重（400、500、600、700）——使用可變字體的獨特停駐點（320、330、340、450、480、540）
- 不要在按鈕上使用尖銳角落——僅使用膠囊和圓形幾何造型
- 不要使用實線聚焦輪廓——虛線才是標誌
- 不要將正文字重提高至 450 以上——輕字重美學是核心
- 不要在正文使用正字母間距——它始終為負值

## 8. 響應式行為

### 斷點
| 名稱 | 寬度 | 主要變化 |
|------|-------|-------------|
| 小螢幕手機 | <560px | 緊湊版面，堆疊排列 |
| 平板 | 560–768px | 微調 |
| 小桌面 | 768–960px | 兩欄版面 |
| 桌面 | 960–1280px | 標準版面 |
| 大桌面 | 1280–1440px | 擴展 |
| 超寬螢幕 | 1440–1920px | 最大寬度 |

### 折疊策略
- 英雄文字：86px → 64px → 48px
- 產品標籤：行動裝置水平捲動
- 功能區塊：堆疊單欄
- 頁尾：多欄 → 堆疊

## 9. 智能體提示指南

### 快速顏色參考
- 全部：「純黑（#000000）」與「純白（#ffffff）」
- 玻璃深色：「rgba(0, 0, 0, 0.08)」
- 玻璃淺色：「rgba(255, 255, 255, 0.16)」

### 範例元件提示
- "在鮮活的多色漸層（綠、黃、紫、粉）上建立一個英雄區。標題為 86px figmaSans 字重 400，行高 1.0，字母間距 -1.72px。白色文字。白色膠囊 CTA 按鈕（50px 圓角，8px 18px 內距）。"
- "設計一個帶膠囊形按鈕的產品標籤列（50px 圓角）。啟用態：黑色背景，白色文字。非啟用態：透明，黑色文字。figmaSans 20px 字重 480。"
- "建構一個區塊標籤：figmaMono 18px，大寫，字母間距 0.54px，黑色文字。啟用字距微調。"
- "建立 20px figmaSans 字重 330 的正文，行高 1.40，字母間距 -0.14px。白底純黑文字。"

### 迭代指南
1. 精確使用可變字體字重停駐點：320、330、340、450、480、540、700
2. 介面始終黑白——絕不為外殼新增顏色
3. 虛線聚焦輪廓，不用實線
4. 正文字母間距始終為負，等寬標籤始終為正
5. 按鈕／標籤用膠囊（50px），圖示按鈕用圓形（50%）