UI 元件 ＆設計系統
UI Components & Design System
「從一致性出發，打造兼具美感與功能的介面語言」
Designing a scalable and cohesive component library that unifies user experience across products.
專案概述 /
Project Overview
此專案以 元件系統化（Design System Thinking） 為核心，建立表單、按鈕、圖示與註冊流程的統一規範。
透過 Figma Component、Variant 與 Auto Layout，整合互動狀態（Hover、Focus、Disable），讓設計能更有效率地延伸與維護。
整體採用 柔霧綠與深藍灰 的冷靜配色，傳達專業、信任與自然平衡的品牌印象。
設計理念 /
Concept
- 一體化設計語言：以主色系與字體規範為基礎，建立多層級按鈕、輸入框、切換開關與表單組件。
- 模組化建構：透過元件變體（Variants）快速生成不同狀態，減少重複設計。
- 品牌一致性：在視覺語調中導入柔和色調與圓角設計，呈現兼具專業與親和的品牌感。
成果展示 /
Final Design
元件：Checkbox、Radio、Switch、Input、Steps、Icon、Form、Register Flow
系統：Primary / Secondary Button、Outline / Filled Icon、表單互動狀態
練習：以 Airbnb 與 Revolut App 為範例的 UI 臨摹練習，強化界面架構與互動節奏
