不會 Figma 也能：把設計稿變成你的網站（Figma MCP 教學）

在 Figma 看到一份很喜歡的網站設計，但不會 Figma，也不知道怎麼把它變成程式？這篇讓 Claude Code 直接讀設計稿：裝好 Figma 外掛、授權一次、貼上畫框連結，它就照著設計稿改你的個人網站外觀。文字內容一個字都不動，只換樣式和版面。

快速回答 終端機執行 claude plugin install figma@claude-plugins-official 裝好外掛，在 Claude Code 輸入 /plugin，到 Installed 選 figma 完成瀏覽器授權。接著在 Figma 對想要的畫框按右鍵 Copy link to selection，把連結和一句需求貼給 Claude Code。免費的 Figma Starter 方案就可以。2026-10-21 實測，用 Figma Community 的免費範本改第 9 篇做的個人網站，2 分 36 秒改好。

做完這篇，你會有

換上設計稿外觀的個人網站：配色、字型、版面都照設計稿，文字還是你原本的
裝好的 Figma 外掛，之後任何 Figma 檔都能這樣用
會從 Figma 複製畫框連結，交給 Claude Code

開始之前要準備：

第 9 篇做的 my-site 資料夾
Figma 帳號，免費的 Starter 方案就可以

步驟 1：裝 Figma 外掛

在終端機執行：

claude plugin install figma@claude-plugins-official

終端機執行 claude plugin install figma@claude-plugins-official，顯示 Successfully installed plugin — 實際畫面（Claude Code 2.1.197，2026-10-21）：一行裝好。

外掛裡包著 Figma 的 MCP 伺服器，也就是讓 Claude Code 能讀 Figma 檔的連線工具。

步驟 2：在 /plugin 找到 figma

到 my-site 資料夾啟動 claude，輸入 /plugin，按 → 鍵切到 Installed。figma MCP 會在 Needs attention 底下，表示還沒授權；選它按 Enter。

/plugin 的 Installed 分頁，Needs attention 底下是 figma MCP，提示 Enter to auth — 實際畫面（Claude Code 2.1.197，2026-10-21）：啟動時也會提醒「1 MCP server needs authentication」。

步驟 3：在瀏覽器授權

瀏覽器會打開 Figma 的授權頁，寫著 Claude Code 想存取你的 Figma 帳號。按 Allow access。

Figma 授權頁：Figma MCP in Claude Code would like to access your account，下方是 Allow access 按鈕 — 實際畫面（2026-10-21）：沒登入 Figma 的話會先要你登入。

看到 Authentication successful 就可以關掉這頁，回到 Claude Code。

瀏覽器顯示 Authentication successful，可以關掉這頁回到 Claude Code — 實際畫面（2026-10-21）

步驟 4：挑一份設計稿，複製畫框連結

到 Figma Community 搜尋 portfolio，挑一份免費範本。這次用的是 Personal Portfolio Website Template，打開後按 Open in Figma，它會複製一份到你的帳號。

Figma Community 的 Personal Portfolio Website Template 範本頁，左側是 Open in Figma 按鈕 — 實際畫面（2026-10-21）：免費範本，複製一份就能用。

在複製好的檔案裡，對首頁那個畫框（frame）按右鍵，在選單裡找到 Copy link to selection（在 Copy/Paste as 底下）。

Figma 畫布上對首頁畫框按右鍵，選單裡有 Copy link to selection — 實際畫面（2026-10-21）：複製的是「這一個畫框」的連結，不是整個檔案。

首頁畫框被選取，左側圖層列出畫框裡的元件 — 實際畫面（2026-10-21）：選到的就是這個畫框。

連結不是金鑰，貼給 Claude Code 沒關係。

步驟 5：一句話請它照著改

回到 Claude Code，輸入（把連結換成你剛複製的）：

照這個 Figma 畫框改我的首頁外觀：<貼上連結>。只改樣式和版面，文字內容維持原本的。改完告訴我改了哪些檔案。

「文字內容維持原本的」很重要。範本裡寫的是範本作者的名字和介紹，不說的話它可能連字一起換掉。

它第一次用 Figma 工具時會先問你：

Claude Code 要用 plugin:figma:figma - Create Session Tool 前詢問 Do you want to proceed，選項是 Yes、Yes and don't ask again、No — 實際畫面（Claude Code 2.1.306，2026-10-21）：選 Yes；之後都不想被問就選第 2 個。

它會讀畫框的設計資料、下載裡面的素材、改 style.css 和 index.html，再自己用瀏覽器截圖跟設計稿比對。做完的回報：

Claude Code 回報改了 style.css、index.html、script.js，新增兩個 SVG 素材，另外列出刻意沒照做的地方，Crunched for 2m 36s — 實際畫面（2026-10-21）：2 分 36 秒做完。

回報裡值得看的是「刻意沒照做的地方」：設計稿上那張人物照片是圖庫照片，放在「嗨，我是你的名字」旁邊會讓人以為是你，所以它只留下黃色圖形；你的網站本來沒有 Instagram 和 LinkedIn，它也沒有自己加。

步驟 6：打開網站看看

用瀏覽器打開 my-site/index.html：

個人網站換成淺灰藍底、右上角黃色圖形、Playfair 字型的大標題「嗨，我是你的名字」，下方「關於我」放進白色卡片 — 實際畫面（2026-10-21）：外觀換成設計稿的，文字還是原本的。

想再調，直接說就好，例如：「小標的黃色改深一點，比較好讀」。

換你做

在 Figma Community 換一份你喜歡的範本，只複製其中一個區塊（例如作品區）的畫框連結，請它「只照這個畫框改作品區」。

常見卡關

啟動時一直出現 1 MCP server needs authentication：還沒授權。輸入 /plugin，到 Installed 選 figma 按 Enter，完成瀏覽器那一步。
它說讀不到畫框：貼的是整個檔案的連結，不是畫框的。回 Figma 對畫框按右鍵，重新 Copy link to selection，連結裡會有 node-id=。
文字也被換成範本的：需求裡少了「文字內容維持原本的」。請它「把文字改回原本的，樣式保留」。
字型跟設計稿不一樣：設計稿用的英文字型沒有中文字，它會配一個接近的中文字型（實測配的是 Noto Serif TC），這是正常的。

你做到了

裝好 Figma 外掛，完成授權
從 Figma 複製畫框連結
一句話讓 Claude Code 照設計稿改網站外觀，文字不動

下一篇幫這個網站的 Logo 和載入畫面加上動畫。

常見問題

要付費的 Figma 方案嗎？

不用。這次用的是免費的 Starter 方案，加上 Community 的免費範本。

一定要用別人的範本嗎？

不用。你自己在 Figma 畫的畫框一樣可以，複製連結的方式相同。

它會改到 Figma 檔嗎？

這次的需求只讀設計稿、改你的網站檔案。Figma 檔是你複製的那一份，原本的範本不會被動到。

下一步

一句話做出個人網站：Claude Code 新手作品集教學：這篇改的網站是在那篇做的。
Claude Code 權限設定懶人包：該自動的自動、該問的一定問：不想每次都被問能不能用 Figma 工具，用 allow 規則。

參考資料

Figma, Claude Code and Figma: Set up the MCP server（Figma 說明中心，外掛安裝與授權） https://help.figma.com/hc/en-us/articles/39888612464151
Figma, Guide to the Figma MCP server（Figma 說明中心，複製畫框連結與工具說明）