從 Figma 設計到程式碼：設計交接的最佳實踐

前言

接案時最常遇到的問題之一就是「設計稿跟做出來的不一樣」。有時候是工程師沒有仔細看設計，有時候是設計師給的規格不夠清楚。這篇文章分享如何讓 Figma 到程式碼的過程更順暢。

看懂 Figma 設計稿

基本操作

即使你不是設計師，也要會基本的 Figma 操作：

• 選取元素：點擊元素查看右側的屬性面板
• 量測間距：按住 Alt/Option 查看元素間的距離
• Inspect 模式：切到 Inspect 面板查看 CSS 屬性
• 匯出資源：選取圖片或圖示後匯出為 SVG 或 PNG

注意設計的規則性

好的設計通常有一致的規則：

• 間距系統：4px 或 8px 的倍數
• 字型大小：通常只有 4-6 種
• 顏色：主色、輔色、灰階色各 3-5 個層級
• 圓角：統一的圓角大小

如果你能找到這些規則，切版就會快很多。

建立 Design Token

把設計中的常數轉換成 Tailwind 的設定：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
        },
        secondary: {
          500: '#8b5cf6',
          600: '#7c3aed',
        },
      },
      fontFamily: {
        sans: ['Noto Sans TC', 'sans-serif'],
      },
      fontSize: {
        'display': ['3rem', { lineHeight: '1.2' }],
        'heading': ['1.5rem', { lineHeight: '1.4' }],
        'body': ['1rem', { lineHeight: '1.6' }],
        'caption': ['0.875rem', { lineHeight: '1.5' }],
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
      },
      borderRadius: {
        'card': '12px',
        'button': '8px',
      },
    },
  },
};

元件對照表

在開始切版前，先把設計稿中的元件整理出來：

按鈕

Figma 名稱	對應元件	狀態
Button/Primary	<Button variant="primary">	default, hover, disabled
Button/Secondary	<Button variant="secondary">	default, hover, disabled
Button/Ghost	<Button variant="ghost">	default, hover

表單元素

Figma 名稱	對應元件
Input/Default	<Input />
Input/Error	<Input error="錯誤訊息" />
Select/Default	<Select />

整理好對照表後，切版時就不用來回切換 Figma 確認。

圖片與圖示處理

SVG 圖示

優先使用 SVG 格式的圖示：

// 方法一：直接 import（需要 SVGR 設定）
import { ReactComponent as SearchIcon } from '@/icons/search.svg';

// 方法二：使用圖示庫
import { Search, Menu, X } from 'lucide-react';

// 方法三：建立圖示元件
function Icon({ name, size = 24, ...props }: IconProps) {
  const icons = {
    search: <path d="..." />,
    menu: <path d="..." />,
  };

  return (
    <svg width={size} height={size} viewBox="0 0 24 24" {...props}>
      {icons[name]}
    </svg>
  );
}

圖片匯出

從 Figma 匯出圖片時的建議：

• 照片：匯出為 WebP，品質 80%
• 圖示：匯出為 SVG
• 有透明背景的圖：匯出為 PNG 或 WebP
• 解析度：@1x 和 @2x 各一份

響應式設計的轉換

從設計稿推測響應式行為

很多設計師只做桌面版的設計稿。你需要主動確認：

1. 手機版的排版方式
2. 平板的中間狀態
3. 導覽列在手機上的行為
4. 圖片在不同螢幕的處理

如果設計師沒有做手機版，至少要在開發前討論清楚。

Breakpoint 對照

/* Tailwind 預設斷點 */
sm: 640px   /* 大手機 / 小平板 */
md: 768px   /* 平板 */
lg: 1024px  /* 小桌面 */
xl: 1280px  /* 桌面 */
2xl: 1536px /* 大螢幕 */

與設計師協作的建議

設計交接會議

在開始開發前安排一次交接會議，確認：

• 互動行為（hover、click、動畫效果）
• 載入狀態和空狀態
• 錯誤狀態的顯示
• 文字過長時的處理

建立共用語言

跟設計師用同樣的名詞。例如：

• 「這個卡片元件」而不是「這個 div」
• 「主要按鈕」而不是「藍色按鈕」
• 「間距用 16px」而不是「大概留一點空間」

定期同步

開發過程中遇到不確定的地方就立刻問，不要自己猜。猜錯了再改反而浪費更多時間。

加速切版的工具

Figma 外掛

• Figma to Code：自動生成 Tailwind CSS
• Inspect：Figma 內建的檢查工具

VS Code 擴充

• Tailwind CSS IntelliSense：Tailwind class 自動完成
• Color Highlight：在編輯器中預覽顏色

線上工具

• Realtime Colors：即時預覽色彩搭配
• Type Scale：計算字型大小比例

結語

Figma 到程式碼的過程不只是「看一看然後寫 CSS」這麼簡單。建立好的流程和工具鏈，能大幅提升切版效率，也能減少與設計師之間的來回修改。好的工程師不只是技術好，還要懂得跟設計協作。