建立一套可複用、易維護的按鈕設計系統，能大幅提升介面設計效率。本教學展示如何在 Fireworks 中利用「元件」、「樣式」與「9 宮格縮放」，快速衍生出主要、次要、危險、禁用、載入中等多狀態、多尺寸按鈕變體。

系統架構規劃

層級	說明	Fireworks 實作方式
基礎形狀	圓角矩形，支援 9 宮格縮放	矢量圓角矩形 → 右鍵「轉換為元件」→ 勾選「9 宮格縮放」
狀態層	Normal / Hover / Active / Disabled / Loading	元件內建「狀態」面板，每個狀態獨立編輯外觀
主題皮膚	Primary / Secondary / Danger / Ghost 等	建立「樣式」：填充漸變、描邊、陰影、文字樣式一鍵套用
尺寸變體	Large / Medium / Small / Icon-only	9 宮格縮放 + 文字大小/內距樣式組合

關鍵技巧

1. 漸變填充標準化：定義「品牌主色 → 深 15%」線性漸變為主按鈕標準，Hover 時亮度 +10%，Active 時亮度 -10%。
2. 陰影分層：外部投影（疊加模式，模擬環境光）+ 內部陰影（正片疊底，模擬內凹感）分離控制。
3. 文字樣式綁定：在「樣式」面板建立「Btn-Text-L/M/S」，包含字體、大小、行高、字間距、抗鋸齒等級。
4. 圖標佔位：在元件內預留 16×16 / 20×20 px 圖標區，使用「剪貼蒙版」自動裁切。

匯出與交付

• 匯出 CSS Sprite 圖集 + 對應 CSS 代碼片段
• 或導出 SVG 元件供前端直接內嵌
• 同步輸出「設計規格文件」（Markdown/HTML），記錄色值、間距、動畫緩動參數

掌握此工作流，從「畫按鈕」進化到「設計按鈕系統」，讓團隊協作更高效、視覺語言更一致！