Figma 可以用來建立完整的品牌識別系統，重點是把 Logo、品牌色、字體、元件、應用版型與使用規範整理成一份可協作、可交付、可維護的檔案。好的 figma 品牌識別系統不只讓設計師看得懂，也要讓行銷、產品、工程與外部合作夥伴知道什麼可以用、怎麼用、什麼情況不能用。
Figma 品牌識別系統是什麼？和品牌手冊有什麼不同？
Figma 品牌識別系統是把品牌視覺規範整理在 Figma 裡，讓團隊可以共同查看、更新與重複使用。它和傳統品牌手冊最大的差異，在於 Figma 檔案可以包含 Styles、Variables、Components、Variants 與 Team Library，讓規範不只是文件，而是能直接進入設計流程的資產。
品牌手冊常見形式是 PDF，適合交付、審核與對外說明；Figma 品牌規範則更適合持續維護。以台灣新創、電商品牌或 B2B SaaS 團隊來說，品牌識別常常會從 Logo 延伸到官網、社群、簡報、廣告素材與產品介面，若只靠一份靜態 PDF，很快就會出現版本不同步的問題。
| 項目 | 主要用途 | 常見內容 | 適合交付對象 |
|---|---|---|---|
| 品牌識別系統 | 維持品牌一致性與可執行規則 | Logo、色彩、字體、圖形、版型、應用規範 | 設計師、行銷、品牌負責人 |
| 品牌手冊 | 整理品牌規範與對外說明 | 品牌理念、視覺規範、使用範例、錯誤用法 | 客戶、合作廠商、內部團隊 |
| UI Kit | 讓產品介面設計更一致 | 按鈕、表單、卡片、導覽、狀態樣式 | UI/UX 設計師、產品團隊 |
| Design System | 管理產品設計與開發規則 | Design Tokens、元件規範、互動狀態、開發交付 | 產品、設計、工程團隊 |
品牌識別系統不只是 Logo
只交付 Logo，通常不足以支撐品牌長期使用。Logo 是品牌識別的核心資產之一，但品牌識別系統還需要定義色彩、字體、版型、圖像風格與應用規則。
- Logo 規範：主標誌、副標誌、圖標版、單色版、反白版、安全距離、最小尺寸。
- 色彩規範：主色、輔色、中性色、語意色、對比限制、深淺色模式需求。
- 字體規範：品牌字體、UI 字體、字階、字重、行高與使用場景。
- 圖像與圖形規範：圖標、輔助圖形、插畫風格、影像裁切原則。
- 應用規範：社群版型、簡報、名片、官網區塊、電子報、廣告素材。
- 使用限制：錯誤拉伸、任意改色、低對比、混用字體、破壞版面比例。
我通常會把「非設計師也能不能照著用」當成判斷標準。如果只有設計師本人看得懂，那份檔案還不能算是成熟的品牌識別系統。
品牌識別、品牌手冊、UI Kit、Design System 對照
品牌識別、品牌手冊、UI Kit 與 Design System 的層級不同。品牌識別解決品牌如何被看見，UI Kit 解決介面如何被設計，Design System 則進一步管理產品設計與工程協作規則。
| 名稱 | 核心問題 | 是否適合放在 Figma | 常見誤解 |
|---|---|---|---|
| 品牌識別 | 品牌看起來應該一致到什麼程度 | 適合，尤其適合整理可重複使用資產 | 以為只要做 Logo 就完成 |
| 品牌手冊 | 品牌規範如何被理解與交付 | 適合，可同步輸出 PDF | 以為 PDF 版本不用維護 |
| UI Kit | 產品介面元件如何被重複使用 | 非常適合 | 把按鈕元件誤當完整品牌系統 |
| Design System | 設計、產品與工程如何用同一套規則工作 | 適合，但需要治理流程 | 小品牌一開始就做得過度龐大 |
開始做之前：品牌資料與競品研究清單
做 figma 品牌識別系統之前，先整理品牌定位、目標受眾、競品、調性與實際應用場景。這些資料會決定 Figma 裡要建立哪些頁面、哪些規範需要優先完成，以及哪些應用版型必須納入交付。
品牌資料不需要一開始就寫成厚重提案，但不能完全空白。設計師若沒有前置輸入，只能靠視覺偏好猜方向；品牌負責人若沒有確認應用情境，後續很容易出現「Logo 好看，但放到簡報、官網、社群都不順」的落差。
- 品牌定位：品牌提供什麼價值，主要服務誰，和競品差在哪裡。
- 受眾輪廓：年齡層、使用場景、購買決策、內容接觸管道。
- 競品清單：至少整理直接競品、替代方案與同調性品牌。
- 品牌調性：專業、親切、精緻、效率、生活感、科技感等需有取捨。
- 應用場景：官網、社群、簡報、包裝、名片、招牌、產品介面。
- 限制條件：既有 Logo、既有色彩、字體授權、內部團隊能力、更新頻率。
- 交付對象：只給品牌主使用，或也會交給行銷、工程、外部設計合作夥伴。
接案專案最容易忽略的是「誰會在交付後使用這份檔案」。若使用者包含行銷或業務，規範就要比設計師自用檔案更白話、更有範例。
品牌策略要先放進 Figma 哪些頁面？
品牌策略可以放在 Figma 的 Strategy 頁面，整理成短句、表格與關鍵詞，而不是長篇品牌宣言。對品牌設計師來說，這頁的價值是讓後面的 Logo、色彩、字體與版型都有判斷依據。
| 策略項目 | Figma 頁面呈現方式 | 台灣品牌場景範例 |
|---|---|---|
| MI 品牌理念 | 品牌核心、受眾、價值主張 | 新創品牌整理產品解決的主要問題 |
| BI 行為準則 | 品牌語氣、服務態度、內容原則 | 餐飲品牌定義門市、社群與客服語氣 |
| VI 視覺系統 | Logo、色彩、字體、圖形、版型 | 電商品牌統一官網、廣告與包裝視覺 |
| 競品觀察 | 品牌色、字體、版面密度、溝通語氣比較 | B2B SaaS 避免和同業首頁視覺過度相似 |
台灣常見品牌場景要先確認
不同品牌類型需要的交付重點不一樣。小品牌不一定要一開始就建立完整 Design System，但至少要知道哪些場景會最常使用品牌資產。
- 新創品牌：優先確認官網首頁、簡報、產品介面、招募素材。
- 電商品牌：優先確認商品頁、社群貼文、廣告素材、包裝貼紙、電子報。
- 餐飲品牌：優先確認招牌、菜單、外帶包裝、社群版型、門市告示。
- B2B SaaS：優先確認網站、簡報、白皮書、產品 UI、業務提案文件。
- 個人品牌：優先確認社群頭像、貼文版型、簡報、網站個人頁與電子報。
Figma 品牌識別系統檔案架構怎麼規劃？
Figma 品牌識別系統檔案建議依照「策略、核心視覺、系統資產、應用場景、交付維護」排序。清楚的頁面命名能降低協作成本，也能讓客戶或團隊快速找到 Logo、品牌色、字體、元件與應用規範。
檔案架構不要只按照設計師工作順序排列，也要按照使用者查找順序設計。交付後最常被打開的通常是 Logo、Color、Typography、Applications 與 Guidelines，所以這些頁面要比靈感整理或過程稿更容易找到。
| 頁面名稱 | 內容 | 用途 |
|---|---|---|
| 00 Cover | 品牌名稱、版本、更新日期、負責人 | 讓使用者確認是否為最新版本 |
| 01 Strategy | 品牌定位、受眾、調性、競品觀察 | 作為視覺判斷依據 |
| 02 Logo | 主標誌、副標誌、圖標版、單色版、反白版 | 管理 Logo 使用方式 |
| 03 Color | 品牌色票、語意色、對比規範、Variables | 建立可維護色彩系統 |
| 04 Typography | 字體家族、字階、行高、用途、Text Styles | 統一標題、內文與介面文字 |
| 05 Grid and Layout | 格線、間距、圓角、版面比例 | 讓品牌應用版型保持一致 |
| 06 Icon and Graphic | 圖標、輔助圖形、圖像風格規則 | 補齊非 Logo 的視覺延伸 |
| 07 Components | Logo 元件、按鈕、標籤、社群元件、簡報元件 | 讓常用資產可以重複使用 |
| 08 Applications | 名片、簡報、社群、官網、廣告、包裝範例 | 驗證品牌是否能落地 |
| 09 Guidelines | Do/Don’t、使用限制、交付說明 | 協助非設計團隊正確使用 |
| 10 Changelog | 版本紀錄、更新原因、影響範圍 | 避免多人協作時版本失控 |
我不建議把所有探索稿和正式規範混在同一層。探索稿可以放在 Archive 或 Working 頁面，但交付用頁面必須乾淨，否則客戶會分不清哪個才是正式版本。
建議頁面命名架構
頁面命名要讓人一眼看出順序與用途。數字前綴能讓 Figma 頁面維持固定排序，英文命名則方便產品與工程團隊銜接。
| 建議頁面名稱 | 可放內容 | 命名目的 |
|---|---|---|
| 00 Cover | 封面、版本、聯絡窗口 | 快速辨識檔案狀態 |
| 01 Strategy | 品牌定位、受眾、語氣 | 保留設計決策依據 |
| 02 Logo | Logo 版本、安全距離、錯誤用法 | 集中管理標誌規範 |
| 03 Color | Styles、Variables、語意色 | 讓色彩可以被重複使用 |
| 04 Typography | Text Styles、字階與排版規範 | 統一文字層級 |
| 05 Layout | Grid、Spacing、Radius | 整理版面骨架 |
| 06 Assets | Icon、Pattern、Illustration rules | 管理輔助視覺元素 |
| 07 Components | Logo Components、UI Components、社群模組 | 建立可複製資產 |
| 08 Applications | 名片、社群、簡報、官網、包裝 | 呈現實際落地方式 |
| 09 Guideline | 使用規範、交付說明 | 降低誤用機率 |
| 10 Changelog | 更新紀錄、版本差異 | 支援長期維護 |
元件與樣式命名規則
命名規則要能被設計師、產品與工程看懂。品牌識別系統製作到後期，命名比視覺排版更影響維護成本。
| 類型 | 命名範例 | 用途 |
|---|---|---|
| 品牌色 | Color/Brand/Primary/500 | 主品牌色標準值 |
| 輔助色 | Color/Brand/Secondary/400 | 輔助視覺與重點區塊 |
| 中性色 | Color/Neutral/900 | 文字、背景與分隔線 |
| 語意色 | Color/Semantic/Success | 成功、警示、錯誤狀態 |
| 標題字 | Typography/Heading/H1 | 頁面主標題 |
| 內文字 | Typography/Body/Regular | 一般段落 |
| Logo 元件 | Logo/Primary/Full Color | 主 Logo 彩色版 |
| Logo 變體 | Logo/Icon/Mono | 小尺寸或單色場景 |
| 間距 | Spacing/16 | 版面與元件間距 |
| 圓角 | Radius/Small | 按鈕、卡片與輸入框 |
Logo 規範如何在 Figma 裡製作？
Logo 規範在 Figma 裡要整理成可查看、可複製、可限制誤用的頁面。至少應包含主標誌、副標誌、圖標版、單色版、反白版、安全距離、最小尺寸與錯誤用法，並把常用版本做成 Components。
Logo 頁面不要只放一排圖檔。對品牌負責人來說，真正重要的是知道什麼情況該用哪一版 Logo；對設計師來說，重要的是能從元件庫拿到正確版本，不必每次複製舊稿。
- 建立 Logo Overview 區塊，列出主標誌、副標誌、圖標版與文字版。
- 建立 Logo Components，將不同版本整理成 Variant。
- 標示安全距離，使用固定參考單位，例如以圖標寬度或文字高度作為 clear space。
- 標示最小尺寸，分別列出印刷與螢幕使用建議。
- 建立背景情境，示範淺色、深色、照片背景與低對比情況。
- 建立 Do/Don’t 區塊，列出可用與禁用方式。
Logo 元件化：主版、副版、圖標版
Logo 元件化的做法，是把不同 Logo 版本整理成同一組 Component Set，並用 Variant 區分 Version、Color 與 Background。這樣能避免團隊在不同檔案裡複製到過期版本。
- Version：Primary、Secondary、Icon、Wordmark。
- Color：Full Color、Mono、White、Black。
- Background：Light、Dark、Image。
- Language：若品牌有中英文版本，可用 zh-TW、en 區分。
Logo Component 不需要做得像產品元件那麼複雜，但一定要讓常見版本可以直接切換。若品牌還在頻繁調整階段，建議先不要發布到 Team Library，等定稿後再發布正式版本。
安全距離與錯誤用法頁
安全距離與錯誤用法是讓非設計團隊也能用對 Logo 的關鍵。這一頁要用清楚範例說明 Logo 周圍要保留多少空間，以及哪些變形、改色與低對比用法不能出現。
| Do | Don’t |
|---|---|
| 使用官方 Component 或匯出的正式檔案 | 從截圖或舊簡報複製 Logo |
| 保留規範安全距離 | 讓文字、圖片或邊框貼近 Logo |
| 依背景選擇彩色、單色或反白版 | 在低對比背景上硬放彩色 Logo |
| 等比例縮放 | 水平或垂直拉伸變形 |
| 使用核准色彩 | 任意改成活動色、漸層或特效 |
品牌色在 Figma 的設定方式：Styles、Variables 與語意色
品牌色在 Figma 裡應同時考慮 Styles、Variables 與語意色。Styles 適合建立容易套用的色票，Variables 適合管理模式與 token，語意色則用來定義成功、警示、錯誤、連結、背景等使用情境。
只把品牌主色放成幾個色塊，後續一定會混亂。更好的方式是把色彩分成三層：品牌色票、語意用途、元件用途。品牌色票回答「這是什麼顏色」，語意色回答「這個顏色用在哪裡」，元件色回答「按鈕、表單、提示訊息應該使用哪個色彩」。
| 層級 | 範例 | Figma 建議做法 | 用途 |
|---|---|---|---|
| 品牌色票 | Primary 500、Secondary 400、Neutral 900 | 建立 Color Styles 或 Variables collection | 保存品牌標準色 |
| 語意色 | Text Primary、Background Default、Border Subtle | 用 Variables 建立語意命名 | 讓設計依用途套用色彩 |
| 元件色 | Button Primary Background、Input Border Focus | 在 UI Kit 或元件規範中承接 | 支援產品介面與狀態管理 |
Figma Variables 對 2026 年的品牌設計特別有用，因為許多品牌不只做一份靜態規範，還要銜接網站、產品介面、深色模式或活動頁。設計師可以先用 Variables 建立 Light 模式，若產品確實需要，再擴充 Dark 模式。
品牌色票與語意色不要混在一起
品牌色票與語意色混在一起，會讓後續維護變得困難。Primary 500 是色彩本身，Button Background 是使用用途，兩者應該分層管理。
| 類型 | 命名範例 | 代表意思 | 適合誰使用 |
|---|---|---|---|
| Brand Token | Brand/Primary/500 | 品牌主色標準值 | 品牌設計師 |
| Semantic Token | Text/Primary | 主要文字色 | UI 設計師、產品團隊 |
| Component Token | Button/Primary/Background | 主要按鈕背景色 | 產品設計與工程 |
這個分層看起來多一步，但能避免品牌主色改版時，全站按鈕、文字與背景跟著失控。品牌色調整不等於每個 UI 狀態都要同步改成同一個值。
深色模式是否需要納入品牌識別？
深色模式不一定要納入每一套品牌識別系統。若品牌主要用在社群、印刷與簡報，通常先做好淺色背景規範即可；若品牌會進入網站、App、SaaS 產品或長時間使用的介面，就應評估深色模式。
- 需要納入：產品有 dark mode、網站有深色主題、品牌常在深色背景曝光。
- 可以暫緩：只用於名片、簡報、社群貼文、包裝或短期活動。
- 必須測試：Logo 反白版、主色在深色背景的對比、文字可讀性、警示色辨識度。
- 不建議做法：直接把 Light 色票反轉，卻沒有檢查可讀性與品牌辨識。
品牌字體、字階與排版規範如何建立？
品牌字體規範要把字體家族、字重、字級、行高、用途與限制整理成 Text Styles。Figma 裡的 Typography Styles 不只是方便套版，也能讓官網、簡報、社群與產品介面的文字層級保持一致。
台灣品牌常會遇到中文字體、英文字體與 UI 字體不一致的情況。品牌標題可以有比較強的個性，但內文與介面文字要優先考慮可讀性。這是我在做品牌規範時會刻意分開處理的地方，因為漂亮的品牌字體不一定適合長篇閱讀或產品操作。
| 文字層級 | 用途 | 建議設定內容 |
|---|---|---|
| Display | 大型主視覺、首頁標語、活動標題 | 字體、字重、字級、行高、使用限制 |
| Heading | 文章標題、頁面區塊標題、簡報章節 | H1 到 H4 樣式 |
| Body | 內文、產品說明、電子報段落 | Regular、Medium、Bold |
| Caption | 註解、圖說、表單提示 | 小字級與可讀性限制 |
更多品牌字體選擇邏輯，可以延伸參考 品牌字體選擇。在 Figma 檔案裡，則要把選擇結果轉成可以直接套用的樣式。
Figma Text Styles 建議命名
Text Styles 命名要同時看得出層級與用途。若後續會銜接 UI Kit，建議使用穩定命名，不要用「大標」、「小標」這類只能靠記憶理解的名稱。
| Style 名稱 | 字級範例 | 行高範例 | 用途 |
|---|---|---|---|
| Typography/Display/Large | 48 | 56 | 主視覺標題 |
| Typography/Heading/H1 | 36 | 44 | 頁面主標題 |
| Typography/Heading/H2 | 28 | 36 | 章節標題 |
| Typography/Heading/H3 | 22 | 30 | 小節標題 |
| Typography/Body/Large | 18 | 28 | 導言與重點段落 |
| Typography/Body/Regular | 16 | 24 | 主要內文 |
| Typography/Caption/Regular | 13 | 20 | 註解、表單提示 |
上述數值是常見起點，不是所有品牌都必須照抄。正式設定時要依品牌字體、使用平台與內容密度調整。
品牌字體與 UI 字體可以不同嗎？
品牌字體與 UI 字體可以不同，前提是要清楚定義使用邊界。品牌字體可以用在 Logo、主視覺、社群標題與簡報封面；UI 字體則應優先考慮可讀性、載入穩定性與多語支援。
判斷規則很直接：若文字需要長時間閱讀或承載操作資訊，就使用 UI 字體；若文字主要負責品牌記憶與視覺辨識，可以使用品牌字體。這樣能兼顧美感與可用性，也能避免產品團隊為了品牌調性犧牲介面清楚度。
輔助圖形、圖標、格線與版型怎麼系統化？
輔助圖形、圖標、格線與版型是品牌識別系統的延伸層。它們能讓品牌不只靠 Logo 被辨識，也能在社群、官網、簡報與產品介面中維持一致的視覺節奏。
很多品牌系統做到 Logo、色彩、字體就停下來，結果一進入實際應用，設計師還是每張圖重新排。更完整的做法，是把圖形語言、Icon System、Grid System、Spacing、Radius 與常用版型整理成可複製規則。
- 輔助圖形：定義線條、幾何形、圖案、背景紋理的使用方式。
- Icon System：定義尺寸、線寬、圓角、填色、狀態與命名。
- Grid System：定義常用版面欄位、邊界與對齊規則。
- Spacing System：定義 4、8、16、24、32 等間距節奏。
- Radius System：定義按鈕、卡片、標籤、圖片容器的圓角規則。
- 版型模組：整理社群貼文、簡報頁、官網區塊與廣告版型。
若品牌會進入產品介面，格線與間距規範可以銜接 8pt Grid 與間距系統；若品牌會有按鈕或介面元件，也可以延伸到 按鈕設計規範。
Icon 與圖形元件的規範方式
Icon 規範要讓每個圖標看起來像同一套語言。Figma 裡可以把圖標做成 Components，並統一尺寸、線寬、圓角、命名與狀態。
| 規格 | 建議定義 | 說明 |
|---|---|---|
| 尺寸 | 16、20、24、32 | 依 UI 與品牌應用需求分級 |
| 線寬 | 1.5 或 2 | 同一套圖標避免混用不同筆畫 |
| 圓角 | Sharp、Rounded | 對應品牌個性與介面風格 |
| 填色 | Outline、Filled | 避免同一情境混用兩種語言 |
| 狀態 | Default、Hover、Disabled | 產品介面需要時再建立 |
| 命名 | Icon/Navigation/Search | 依用途分類，避免只用圖形外觀命名 |
8pt Grid、間距與圓角規則
8pt Grid 適合用來建立穩定的版面節奏，但品牌識別系統不一定要寫到完整 RWD 斷點。重點是定義常用間距、容器寬度、圓角與版面密度。
| 項目 | 建議值 | 適用情境 |
|---|---|---|
| 小間距 | 4、8 | 圖標與文字、標籤內距 |
| 中間距 | 16、24 | 卡片內距、段落間距、表單群組 |
| 大間距 | 32、48、64 | 頁面區塊、簡報版面、主視覺留白 |
| 圓角 | 4、8、12 | 按鈕、卡片、圖片容器 |
| 格線 | 4 欄、8 欄、12 欄 | 社群版型、網站版面、簡報模板 |
Figma 品牌識別系統應該包含哪些應用頁面？
Figma 品牌識別系統應包含能驗證品牌落地的應用頁面，例如名片、簡報、社群貼文、官網區塊、電子報、廣告、包裝與招牌。應用頁面不是裝飾用範例，而是檢查品牌規範是否真的能被使用。
品牌應用頁面的優先順序，應該依品牌最常出現的接觸點決定。電商品牌沒有商品頁與社群版型會很難用；B2B SaaS 沒有簡報與官網區塊會很難交付；餐飲品牌沒有菜單與門市告示範例，也容易在現場使用時失真。
- 名片：檢查 Logo、字體、色彩在小尺寸印刷上的可讀性。
- 簡報：檢查品牌是否能支撐標題頁、內容頁、資料頁與結尾頁。
- 社群貼文：檢查版型彈性、標題字級、品牌元素露出比例。
- 官網區塊：檢查品牌色、字體、按鈕與圖像風格是否能進入網站。
- 電子報：檢查文字密度、標題層級與 CTA 區塊一致性。
- 廣告素材：檢查短訊息、高對比與快速辨識能力。
- 包裝或貼紙：檢查印刷場景下的 Logo、色彩與資訊層級。
- 招牌或門市告示：檢查遠距辨識與低複雜度使用情境。
應用頁面不需要每個都做到最終稿，但至少要呈現品牌規則如何套用。漂亮 mockup 沒有規格說明，對後續維護幫助很有限。
不同品牌類型的最低交付版本
最低交付版本要依品牌類型決定。預算有限時，先做最常用、最容易出錯、最會影響品牌一致性的項目。
| 品牌類型 | 基本版 | 標準版 | 完整版 |
|---|---|---|---|
| 新創品牌 | Logo、色彩、字體、簡報 | 加上官網區塊、產品 UI 基礎 | 加上 UI Kit、Team Library、Dev Mode 註解 |
| 電商品牌 | Logo、色彩、字體、社群版型 | 加上商品頁、廣告、電子報 | 加上包裝、活動頁、長期模板系統 |
| 餐飲品牌 | Logo、色彩、字體、菜單 | 加上門市告示、社群、外帶包裝 | 加上招牌、制服、展店應用規範 |
| B2B SaaS | Logo、色彩、字體、簡報 | 加上官網、白皮書、UI 基礎元件 | 加上 Design Tokens、UI Kit、工程交付規範 |
| 個人品牌 | Logo 或字標、色彩、社群版型 | 加上簡報、網站個人頁、電子報 | 加上課程、活動、媒體簡介模板 |
如何把品牌識別銜接到 UI Kit 或 Design System？
品牌識別銜接 UI Kit 或 Design System 時，要先把品牌色、字體、Logo、Icon 與基礎元件整理成可發布資產。Figma 的 Variables、Components、Team Library 與 Dev Mode 可以讓品牌規範進入產品設計與工程交付流程。
銜接時不要急著把所有品牌元素都做成產品元件。比較穩的流程是：先確認品牌規範，再建立基礎 Styles 與 Variables，接著整理 UI Kit 元件，最後才發布 Team Library 並補上 Dev Mode 註解。
- 整理品牌基礎：Logo、品牌色、字體、圖標與版型規則。
- 建立 Styles 與 Variables：把色彩、文字、間距與圓角轉成可重複使用樣式。
- 建立 UI Kit：按鈕、表單、卡片、標籤、導覽、提示訊息。
- 補齊元件狀態：Default、Hover、Pressed、Disabled、Error、Success。
- 發布 Team Library：只發布正式、穩定、命名清楚的資產。
- 整理 Dev Mode 註解：標示 token 命名、狀態規則與特殊使用限制。
品牌識別與產品設計系統的關係，可以理解為上游與下游。品牌規範提供視覺語言，UI Kit 與 Design System 則把這套語言變成可操作的產品規則。
哪些品牌規範可以進入 Team Library？
Team Library 適合發布穩定且會被重複使用的資產。尚未定稿的探索稿、一次性活動視覺與過期版本，不應該發布成正式 Library。
- Color Styles 或 Color Variables：品牌色、中性色、語意色。
- Typography Styles：標題、內文、註解、按鈕文字。
- Logo Components：主版、副版、圖標版、單色版、反白版。
- Icon Components：常用功能圖標與品牌圖形符號。
- 基礎 UI Components：按鈕、表單、標籤、卡片、提示訊息。
- 版型 Components：簡報頁、社群貼文模組、官網區塊。
交給工程師前要整理什麼？
交給工程師前，要整理清楚命名、狀態、尺寸、間距、顏色來源與互動限制。Dev Mode 可以輔助查看規格，但不能取代設計師對規則的說明。
- 確認色彩使用的是 Variables 或正式 Styles，不是手動填色。
- 確認文字使用 Text Styles，不是每個畫面各自設定。
- 確認元件狀態完整，例如 hover、disabled、error。
- 確認按鈕、表單、卡片有清楚尺寸與間距規則。
- 確認特殊品牌限制有註解，例如 Logo 不可裁切、不可變色。
- 確認命名能對應 Design Tokens 或前端樣式邏輯。
品牌識別系統完成後如何維護？
品牌識別系統完成後，要透過權限、版本紀錄、更新規則與 Changelog 維護。Figma 檔案若沒有治理方式，很容易在多人協作後出現重複元件、過期色票、未發布版本與不一致的應用版型。
小團隊不需要一開始就建立大型企業制度，但一定要有 Owner、Editor、Viewer 的權限分工。誰可以改 Logo？誰可以發布 Library？誰負責記錄更新？這些問題若沒有先定義，交付後很快會失控。
- 指定檔案 Owner，負責正式規範與 Library 發布。
- 限制 Editor 人數，避免非必要修改直接進入正式檔案。
- 將外部合作夥伴設為 Viewer 或只開放特定頁面複製。
- 每次更新都記錄在 Changelog，包含日期、更新內容、影響範圍。
- 大型改版前複製分支或建立 Working 檔案，確認後再合併到正式檔。
- 定期檢查未使用 Styles、重複 Components 與過期應用範例。
維護的核心不是把檔案鎖死，而是讓修改有脈絡。品牌會成長，規範也會調整；真正的問題是調整後團隊是否知道哪個版本才是準的。
Figma 檔案權限與更新紀錄
Figma 權限可以用小團隊情境來設定：品牌負責人或設計主管當 Owner，主要設計師當 Editor，行銷、業務、外部廠商多數情況使用 Viewer。正式交付時，Changelog 頁面要保留每次更新的紀錄。
| 角色 | 權限 | 責任 |
|---|---|---|
| Owner | 管理檔案、發布 Library、核准重大更新 | 維持正式版本正確 |
| Editor | 新增與修改規範、整理元件 | 執行設計更新 |
| Viewer | 查看、留言、依權限複製 | 使用規範，不直接改檔 |
製作 Figma 品牌識別系統常見錯誤
製作 Figma 品牌識別系統最常見的錯誤，是只做漂亮版面，卻沒有可複製規則。其他問題包括命名混亂、沒有 Do/Don’t、沒有應用頁面、Styles 與 Variables 沒整理、完成後沒有維護機制。
| 錯誤 | 結果 | 修正方式 |
|---|---|---|
| 只放 Logo 圖檔 | 團隊不知道何時用哪一版 | 建立 Logo Components、Variant 與使用規範 |
| 色票沒有命名規則 | 主色、輔色、語意色混用 | 分成 Brand Token、Semantic Token、Component Token |
| 文字樣式手動設定 | 不同頁面字級與行高不一致 | 建立 Typography Styles |
| 沒有錯誤用法 | 非設計團隊容易誤用 Logo 與色彩 | 補上 Do/Don’t 區塊 |
| 沒有應用頁面 | 看不出品牌是否能落地 | 至少建立社群、簡報、官網或主要使用場景 |
| 沒有 Changelog | 版本更新後無法追蹤 | 建立更新紀錄與檔案 Owner |
最危險的不是檔案看起來亂，而是看起來很完整，實際上每個元素都不能重複使用。這種檔案在交付當下很漂亮，三個月後通常就會變成無人敢改的舊稿。
只做漂亮版面，沒有可複製規則
品牌規範頁面可以設計得好看，但不能只有展示效果。每個視覺元素都應該回答：名稱是什麼、用途是什麼、在哪裡可用、在哪裡不可用、是否已做成 Style 或 Component。
| 問題 | 修正方式 |
|---|---|
| 色彩只是一排色塊 | 補上 HEX、用途、對比限制與 Variables 命名 |
| Logo 只有展示圖 | 補上安全距離、最小尺寸、背景使用範例 |
| 社群版型只有單張完成稿 | 拆成標題、圖片、標籤、CTA 等可調整模組 |
| 元件沒有狀態 | 補上 Default、Hover、Disabled、Error 等狀態 |
Figma 品牌識別系統交付檢查表
Figma 品牌識別系統交付前，應確認檔案架構、頁面命名、Styles、Variables、Components、應用頁面、權限與 Changelog 都已整理完成。交付標準不是檔案是否好看，而是團隊能否使用、協作與維護。
- 檔案封面是否包含品牌名稱、版本、日期與負責人。
- Strategy 頁面是否整理品牌定位、受眾、調性與應用場景。
- Logo 頁面是否包含主版、副版、圖標版、單色版、反白版。
- Logo 是否有安全距離、最小尺寸與錯誤用法。
- 品牌色是否建立 Styles 或 Variables。
- 色彩是否區分品牌色票、語意色與元件用途。
- Typography 是否建立 Text Styles，並標示用途。
- Icon、輔助圖形、格線、間距與圓角是否有基本規範。
- 常用 Logo、Icon、版型或 UI 元件是否做成 Components。
- Applications 頁面是否涵蓋品牌最常出現的使用場景。
- Guidelines 是否包含 Do/Don’t 與非設計團隊能理解的說明。
- Team Library 是否只發布正式、穩定、命名清楚的資產。
- Dev Mode 或交付註解是否足以讓工程師理解規格。
- Figma 權限是否分清 Owner、Editor、Viewer。
- Changelog 是否記錄版本、日期、更新內容與影響範圍。
若要再延伸品牌基礎觀念，可以參考 品牌識別設計指南、品牌手冊、品牌色策略 與 品牌形象一致性。但在 Figma 檔案交付上，最終仍要回到能不能被查找、複製、套用與更新。
本文不涵蓋的範圍
Figma 品牌識別系統的重點是製作、整理、交付與維護品牌規範。Logo 創作美學課、完整品牌策略顧問提案、平面設計軟體比較、圖片素材規劃、Canva 模板教學與前端工程實作，不屬於這個範圍。
- 不教 Illustrator 或 Photoshop 的完整 Logo 繪製流程。
- 不提供完整品牌顧問報價或服務銷售內容。
- 不規劃圖片素材、攝影方向或生成式圖片流程。
- 不把 Figma Community 模板視為完整品牌識別系統。
- 不深入前端 token pipeline 或程式碼實作。
品牌識別設計是什麼？
品牌識別設計是建立品牌被辨識與被一致使用的視覺規則，通常包含 Logo、色彩、字體、圖形、版型與應用規範。成熟的品牌識別設計不只看單一圖像，也要看它能否在社群、官網、簡報、包裝與產品介面中穩定延伸。
Figma 可以做品牌手冊嗎？
可以。Figma 適合製作可協作、可更新的品牌手冊，並能把 Logo、品牌色、字體與元件整理成可重複使用資產。若需要對外交付，也可以再從 Figma 匯出 PDF 版本。
Figma 品牌識別系統和一般 PDF 品牌手冊差在哪？
PDF 品牌手冊適合閱讀與歸檔，Figma 品牌識別系統更適合協作與維護。Figma 可以使用 Styles、Variables、Components、Team Library 與 Dev Mode，讓品牌規範直接進入設計與交付流程。
品牌識別系統一定要包含 Logo 嗎？
通常需要。Logo 是品牌識別最核心的視覺資產之一，但完整品牌識別系統還應包含色彩、字體、圖形、版型、應用頁面與使用限制。只交付 Logo，通常不足以維持品牌一致性。
品牌識別系統、UI Kit、Design System 有什麼不同？
品牌識別系統管理品牌視覺與應用規範，UI Kit 管理產品介面元件，Design System 則管理更完整的產品設計與工程協作規則。三者可以銜接，但範圍不同。
小品牌或個人品牌也需要做 Figma 品牌識別系統嗎？
需要，但不一定要做得很大。小品牌或個人品牌至少可以整理 Logo、品牌色、字體、社群版型與基本使用規範，避免每次製作內容都重新決定視覺方向。
Figma 品牌識別系統應該包含哪些頁面？
建議包含 Cover、Strategy、Logo、Color、Typography、Layout、Icon and Graphic、Components、Applications、Guidelines 與 Changelog。若品牌會銜接產品設計，還可以加入 UI Kit 或 Design Tokens 頁面。
品牌色要用 Styles 還是 Variables？
兩者可以並用。Styles 適合一般設計師快速套用色彩，Variables 適合管理語意色、模式切換與 Design Tokens。若品牌會進入網站或產品介面，Variables 的維護彈性通常更高。
Logo 規範在 Figma 裡要怎麼做？
Logo 規範應包含主標誌、副標誌、圖標版、單色版、反白版、安全距離、最小尺寸與錯誤用法。常用 Logo 版本建議做成 Components，並用 Variants 管理不同版本與顏色。
品牌識別系統可以交給工程師使用嗎？
可以，但需要整理成工程師能理解的規格。交付前應確認色彩、字體、間距、元件狀態、Design Tokens 命名與 Dev Mode 註解都清楚，避免工程端只能看畫面猜規則。
完成品牌識別系統後要怎麼維護？
完成後應設定 Owner、Editor、Viewer 權限，並用 Changelog 記錄每次更新。若有 Team Library，正式發布前要確認元件與樣式命名清楚，避免把未定稿資產發布給全團隊使用。
製作 Figma 品牌識別系統最常見的錯誤是什麼？
最常見的錯誤是只做漂亮展示頁，沒有 Styles、Variables、Components、Do/Don’t、應用頁面與維護規則。這會讓檔案交付後難以複製、難以更新，也難以讓非設計團隊正確使用。