Figma 設計稿色彩轉 CSS 實戰

從 Figma 提取色彩

方法一：直接複製 HEX

在 Figma 中選取元素 → 右側面板「Fill」→ 點擊色彩方塊 → 複製 HEX 值。

方法二：使用 Figma 的 CSS 檢視

選取元素 → 右下角「Inspect」→ 直接複製 CSS 程式碼。

方法三：匯出色彩 Token

使用 Figma 外掛（如 Tokens Studio）將設計 Token 匯出為 JSON。

建立 CSS 色彩變數

:root {
  /* 品牌色 */
  --color-primary: #2596be;
  --color-primary-light: #e0f2fe;
  --color-primary-dark: #075985;

  /* 語意色 */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* 中性色 */
  --color-text: #1f2937;
  --color-text-muted: #6b7280;
  --color-bg: #ffffff;
  --color-border: #e5e7eb;
}

用 OKLCH 更好的做法

:root {
  /* 用 OKLCH 定義，調整更直覺 */
  --color-primary: oklch(0.63 0.11 227);

  /* 同色相不同明暗 — 只改 L 值 */
  --color-primary-50: oklch(0.97 0.03 227);
  --color-primary-100: oklch(0.93 0.05 227);
  --color-primary-500: oklch(0.63 0.11 227);
  --color-primary-900: oklch(0.30 0.11 227);
}

Figma 到 Tailwind CSS

如果你的專案使用 Tailwind CSS：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          DEFAULT: '#2596be',
          light: '#e0f2fe',
          dark: '#075985',
        }
      }
    }
  }
}

常見問題

Q: Figma 的色彩和網頁上看起來不一樣？

A: 檢查 Figma 的色彩設定是否為 sRGB（File → Color Profile）。大多數螢幕和瀏覽器都使用 sRGB。

Q: 設計稿有很多相似的灰色，該怎麼整理？

A: 用轉換器查看 HSL 值，合併差異在 5% 以內的灰色。通常 3-5 個灰階就夠用。

Q: 透明度在 Figma 和 CSS 中的表示不同嗎？

A: 不同。Figma 用 0-100%，CSS 用 0-1 或 0%-100%。Figma 80% 透明度 = CSS rgba(r,g,b, 0.8)。