【 Figma 外掛 】HTML 轉 Figma 設計檔，只要點三下

成果

只要 3 步驟，就能把網站 HTML 轉成 Figma 設計檔。

1. 貼上網址

2. 按下按鈕

3. 蹦，完成！

費用

• 免費版：30 天內可以輸出 10 個檔案。

• Pro 版：無限制。

(💡 建議：免費版就很夠用了。設計師平日工作用到 html.to.design 的機會不多，真的需要再切換帳號就好。)

操作步驟

1. 打開 Figma。

2. 在「Plugins」搜尋「html.to.design」，開啟。

   

   
   

3. 貼上想轉換的網頁。( 如 notion 官網 )，將「Autolayout」勾選。

   

   
   

4. 點擊「Import」等待。 ( 過程中可能會出現字體不支援，點擊「Apply」就可以了。)
   
   

   

5. 完成！
   
   

   

設定選項

html.to.design 中有多種輸出選項可以調整：

1. Viewports ( 裝置尺寸 )

預設是電腦版 1920px，可以自訂不同尺寸，或多選一次匯出多種不同裝置尺寸。

2. 主題

有些網站有做白色主題和暗黑主題，可以勾選切換。

3. 其它功能

html.to.design 還提供了其它 Figma 的功能選項，包含：

• AutoLayout：Figma 設計稿自動建立 AutoLayout。

• Hyperlinks：帶入網頁中的連結。

• Create styles：網頁 CSS 建立成 Figma Style。

• Use styles：套用 Figma 檔案原有的樣式。

AutoLayout 差異

使用時，建議一定要將「Autolayout」勾選。

若沒有勾選，輸出的設計稿經常會有跑版問題，如下圖比較：

• 未選擇 autolayout：跑版

• 選擇 autolayout：排版正確

從 Figma 設計稿中也可以看得出來：

• 未選擇 autolayout：元件隨意擺放

• 選擇 autolayout：元件已建立 autolayout

其它優點：命名方式和網頁的 HTML 相同

html.to.design 有個很貼心的設計，生成設計稿的命名，會和開發者模式的 HTML 互相對應。

不管是設計師檢查，或是和前端工程師溝通，都非常方便。

收藏外掛󠀠

建議各位可以將這個功能收藏起來，因為實在太好用，才不會要用時忘記名稱又跑來看這篇文章。

➊ 在 Figma 的外掛列中，找到外掛並點擊，進入外掛資訊。
( 如下圖是以 Photopea 為例 )

➋ 點擊更多「…」，按下「Save」，即可收藏。

➌ 可以在外掛的「Saved」頁籤中找到收藏的所有外掛。

推薦用途

使用 html.to.design 外掛，有以下好處：

• 前人做的網站沒有留設計稿，可以下載來用。

• 觀察市面上網站的設計方法。

• 拆解網頁元件，應用到自己的設計中。

帶著走

1. 使用 html.to.design 外掛，一鍵將 HTML 轉成設計稿。

2. 記得勾選「Autolayout」。

想了解更多 Figma 密技？歡迎加到書籤，我會分享更多給你 👋