前言

在前面的篇章中，分享到如何透過 AI 工具快速生成前端程式碼，使用 V0 將 Figma 設計稿轉換為 Vue + Tailwind 的畫面架構。如果有興趣可以回頭參考第九篇。

不過還是想來分享，如何閱讀與拆解設計稿中的畫面結構，為了因應實務上各種情況，我們仍需要具備自行拆解設計稿的能力。
這個章節主要聚焦在「如何從 Figma 設計稿中拆解歸類 UI 元素」這件事，掌握從視覺畫面轉換為有邏輯的版面結構，作為從設計到前端開發——也就是切版的關鍵轉換點✨。

從設計稿判斷 HTML 結構與元件劃分

看到畫面時，開發者可以先思考要如何做結構拆解。從 Figma 的圖層來看，畫面大致可分為兩大區塊：導覽列與內文區塊。

導覽列

導覽列由圖片、圖示與文字（Text）組成，可以透過 HTML 中的 <img>、<a> 或 svg 等元素來完成。
由於導覽列通常會在每個頁面中重複出現，因此在 Figma 工作區域設計時，我們將它製作成「Component」。同樣的道理，在開發階段也建議將導覽列抽成 Vue 元件，並在每個要使用的單一元件檔案（SFC）中重複引入做使用。SFC 的介紹可參考第十二篇裡的「單一元件檔案（SFC, Single File Component）」章節，有更詳細的說明 💡。

註冊內容

在拆解畫面結構時，可以依照左右兩側的內容，分別對應適合的 HTML 元素：

左側區塊

• 可以拆解成<div>加上背景漸層底色樣式。
• 圖片部份可從 Figma 匯出後，使用 <img> 元素做處理。

右側區塊

• 最上面「立即註冊」的標題，可以從Figma屬性面板(右側)，找到「Typography」屬性中的字體大小判斷使用哪種標題元素（例如 <h1> 、 <h6>）。使用適當的標題層級不僅有助於內容結構清晰，也能強化 SEO（搜尋引擎最佳化）效果，根據 Google Developer Style Guide 建議，良好的標題階層設計不僅有助於讀者理解，也可協助搜尋引擎正確索引頁面內容。
• 下方的文字「歡迎！透過 LINE 註冊，開始使用服務吧。」可以使用一般段落元素 <p> 。

互動元素

• 「LINE 註冊」的按鈕可使用 <button> 元素。
• 提示登入區塊的最外層使用 <div> 包覆可以方便增加底色，「在此登入」可使用 <a> 元素，方便加上事件處理。
• 至於「隱私權政策」與「服務條款聲明」因為點擊後會有事件觸發，可使用 <a> 元素來設定對應連結。

這樣我們大致了解，要使用什麼html元素來完成這些功能囉！接著來看樣式的部份，我們會以Tailwind做介紹，Tailwind 是 utility first 會更好的在專案做客製化的運用。utility first是一種風格設計方法，強調直接使用具有特定功能的樣式類別（utility classes）來建構，而不是依賴語意化類別或預先定義的元件。

Figma 設計對應到 Tailwind CSS

Tailwind的基礎使用方法是在元素class加上要使用的樣式類別，我們先用一個簡單的例子來說明，Tailwind 是怎麼對應到「像素尺寸」的。
Tailwindcss 的單位是以 rem 為主，而一般來說 1 rem 等於 16px，所以如果我們看到：

<p class="p-4">.....

以這個例子來看，中文意思就是：「在段落元素的四個方向，加上16px的內距（padding）。」，p-4 也就是 1rem = 16px 的內距。以此類推，如果是 p-8 就會變成 2rem X 16px = 32px 的內距。

接下來，我們回到 Figma，點選要實作的圖層元素，從右側屬性面板查看對應的資訊。
以下是一個範例，來看看怎麼將「最新消息」這個文字標籤的樣式，轉換成 Tailwind 的寫法：

最後的組成會是這樣：

<a href="#" class="text-[#525252] font-normal tracking-normal font-sans text-center">
  最新消息
</a>

這樣我們就完成「導覽列連結文字」元素的樣式套用囉！
除了這種人工對照的方式，也可以試著使用 Figma 的「Dev Mode」來檢查細節，不過現在這功能變成付費才可以使用了QQ。
或者是安裝Inspector套件來輔助查看一些設計細節。

（Inspector顯示的元素資訊）

Vue 元件的檔案結構與命名方式

當我們拆解完畫面結構後，下一步就可以開始思考，這些畫面區塊該怎麼組合成 Vue 的元件（Component）。

在命名上，建議可以遵循 「語意清楚、用途明確」 的原則來命名，例如：

• 導覽列可以命名為 NavBar.vue
• 商品資訊卡片可以命名為 ProductCard.vue
  避免使用像 Box1.vue 或 LayoutA.vue 這種看不清楚、缺乏語意的命名方式，否則日後維護時容易產生混淆，導入元件時也難以直觀理解用途，且在檔案導入也會通過名稱來識別引用了哪些 SFC。

📁 檔案目錄結構舉例如下：

src/
│
├── components/
│   ├── NavBar.vue             # 導覽列元件（共用）
│   └── common/                # 可再細分分類
│       └── .........                 # 基礎元件
│
├── views/
│   └── UserRegister.vue       # 註冊頁面（頁面級元件）
│
├── assets/
│   └── images/
│       └── logo.png           # 導覽列 logo 圖片
│
public/
└── .........             # 不經轉譯的靜態資源

導覽列會與其他元件共用，可在 src/components 底下新增 NavBar.vue，但當元件逐漸變多時，也可以進一步依照功能區塊分類，例如放在 components/common/、components/form/ 等資料夾中，有助於維持專案結構的整潔與可閱讀性。
而註冊內容的部份，屬於頁面相對應的主要功能內容，為對應路由的頁面級元件(Page-level components)，因此可以直接放在 src/views 資料夾中(例如 建立 UserRegister.vue)。這類元件通常會透過 Vue Router 對應路由畫面，因此建議集中管理在 src/views 目錄中。
至於圖片的部份，(例如 導覽列LOGO圖片、內容左側圖片 等)可放在 src/assets，這裡的資源會經過 編譯處理(例如 hash 命名、圖片壓縮優化 等 )。如果有些靜態資源不需要被打包處理，也可以放在 /public 資料夾中，這樣就會以原樣保留。

另外一個小技巧✨，可以參考 Figma 的設計結構，對照 Figma 是否為 Component（元件）、Variant（變體）概念，這些通常對應到前端中可以抽離重複使用的元件，例如 像是多次出現的按鈕、卡片、輸入框 等，透過這樣的對應思維，可以更精準地判斷哪些部分該抽出元件、哪些是頁面級功能。

(參考來源 Vue.js Components 基礎介紹、Vue.js 自動命名推導)

結語

這篇文章我們實際拆解了 Figma 設計稿，從畫面結構分析、元件劃分到命名規劃，一步步建立轉換思維從 UI 設計到 Vue 元件規劃。

掌握這些設計與開發之間的過渡邏輯，不僅能提升開發效率，也能在與設計師協作時更有默契(*≧︶≦)╰(￣ω￣ｏ)。
接下來，我們會進一步介紹「Vue 3 的基本語法」，漸漸進入 Vue 與 Nuxt 的開發流程，把設計稿中的畫面，一步步實作出來。

參考資料與延伸閱讀

⑴ Google 開發人員指南來源：headings and titles
⑵ Vite 官方文件
⑶ Tailwindcss 官方文件
⑷ Vue.js 自動命名推導
⑸ Vue.js Components 基礎介紹