程式小白靠 AI 做出 Figma Plugin：13 句真實 Prompt 與上架卡關全紀錄

不會寫程式，我靠 AI 做出 Figma Plugin「Batch Export Frames」。這篇公開當時的 13 句真實 Prompt、其中 5 句怎麼處理錯誤，以及上架時三個紅字的卡關解法，並對照 2026 年 Figma 官方的開發與上架流程。

作者：郭政佑 Kevin · ·

TL;DR：不會寫程式，也能靠 AI 做出能上架的 Figma Plugin。我做第一個外掛 Batch Export Frames 時，總共對 AI 說了 13 句很白話的 Prompt，其中 5 句都在處理錯誤；真正花時間的是上架審核。重點只有三個：先把需求寫清楚、一次只請 AI 改一件事、出錯就把錯誤訊息整段貼回去。

Figma Plugin 是我最早開始嘗試寫的工具，主要是想解決我自己在 Figma 遇到的一些設計問題。

這篇用我做 Batch Export Frames 的過程當案例，把我用的 Prompt、遇到的困難和解決方法都列出來。我寫的 Prompt 並不複雜，在一些人看來甚至寫得不好，但連我這樣都能成功做完，相信對大家來說應該更有鼓舞效果。

原文寫於 2025 年 1 月，當時我已經上架 4 個 Plugin，現在 Figma Community 上是 7 個。這次重新整理，補上流程圖、Prompt 分類和上架卡關的對照圖；第四句 Prompt 還原成我當時的原句，並補上正確做法。Figma 官方的開發與上架流程都在 2026-10-15 對照官方文件查過，來源放在文末。

為什麼要自己做這個 Plugin

因為 Figma 要一次匯出很多張圖時，得自己一張張選，很麻煩。

當時我正在做一個有大量多圖匯出需求的專案，就想說是不是有 Plugin 可以解決，但稍微找了一下，沒發現符合需求的工具，最後就決定自己寫一個。

我想要的功能是 Adobe Illustrator 的「轉存為螢幕適用」那種感覺：所有畫板列出來、有縮圖、能勾選、一次匯出。目標很具體：做一個可以在 Figma 一次匯出多圖、有預覽、還能點預覽圖定位到畫布的 Plugin。

先看全貌：我做 Plugin 的 4 個步驟

流程圖：第一步寫需求清單，列出要做到什麼和介面大概長怎樣；第二步一句一句請 AI 修改，一次只改一件事；第三步在 Figma 開發模式實際測試，只有自己看得到；第四步送審上架，審核通過大家才裝得到。第三步出錯時，把錯誤訊息整段貼回第二步，形成來回修改的循環
第 2、3 步會來回很多次，出錯就把錯誤訊息貼回去（示意）。

寫程式本身其實沒花太多時間。花時間的是第 2、3 步之間的來回，還有第 4 步的上架審核。

開始前準備

  • 工具：我當時用 Cursor 搭配 ChatGPT。Cursor 是內建 AI 的程式編輯器，可以直接請 AI 讀你的檔案、幫你改程式。ChatGPT 換成 Gemini 或 Claude 也可以。
  • Figma 桌面版：開發中的 Plugin 要從本機檔案載入，所以一定要用桌面版。
  • 看一下官方教學：先大概了解製作流程再用 AI，會更知道怎麼溝通。官方的 Plugin Quickstart Guide 會帶你裝好 Node.js（含 npm）和 TypeScript，並在 Figma 選單「Plugins」→「Development」→「New plugin」建立第一個外掛。
  • 找參考：先找有沒有類似的工具，搞懂它的邏輯，跟 AI 溝通功能會更清楚。也可以到 Figma Community 的 Plugin 專區看看別人做了哪些功能，有人做得出來，就代表做得到。
  • 看編輯器教學：如果你是程式新手，應該連 Cursor 的介面都不太熟，先看一下 Cursor 官網的教學，比較好開始。

1｜先寫需求清單，不要急著寫程式

第一步不是開始寫程式，而是先把需求詳細列出來。

我做的就是用口語列出 Plugin「要做到什麼」，介面也先在腦中有個大概的畫面。這樣後續跟 AI 溝通才有方向，自己也能先確認功能有沒有齊全、有沒有說清楚。

以 Batch Export Frames 為例，需求清單可以寫成這樣（依最後做出來的功能整理）：

  • 讀出目前檔案裡所有的 Frame，每個都有縮圖和名稱
  • 可以全選，也可以一個一個勾
  • 可以選匯出格式
  • 匯出時一次打包下載
  • 點縮圖，畫布會移到那個 Frame

回頭看，我第一句 Prompt 就是因為沒寫清楚「要匯出的是 Frame」，結果沒成功。需求清單寫得越具體，越少來回。

2｜我怎麼跟 AI 溝通：13 句真實 Prompt

以下都是我當時真的輸入的 Prompt，最後工具也順利做出來。先看分類：13 句裡有 5 句在處理錯誤，加功能和微調加起來 7 句，最後 1 句是請 AI 寫說明。

分類圖：13 句 Prompt 依序標上類別。第 1、2、6、12 句是加功能，共 4 句；第 3、4、8、9、10 句是回報錯誤，共 5 句；第 5、7、11 句是體驗微調，共 3 句；第 13 句是請 AI 整理工具介紹
錯誤集中在中段，能動之後就是微調體驗（依本文 13 句 Prompt 整理）。

第 1 句：說需求

「我要寫一個 figma plugin，要能夠快速且能批量選取檔案中要匯出的檔案，然後檔案要有縮圖跟檔名，匯出要跟 figma 匯出功能一樣」

結果：顯示出來的不是 Frame。我一開始沒說清楚要匯出的是「Frame」，所以沒成功；介面也太陽春、不好看。

第 2 句：補清楚是 Frame，順便要求介面

「請幫我在 UI 中顯示檔案中的 frame，讓我可以選擇匯出，要有縮圖跟 frame 名稱，另外 UI 要使用 figma 風格，好看一點」

結果：無法正常執行，跳出錯誤。

第 3 句：把錯誤貼回去

「An error occurred while running this plugin 跳錯誤」

結果：執行時跳出這個錯誤，我就把這段錯誤貼給 AI，跟它說「跳錯誤」，它就能自己理解並修改。

第 4 句：發現程式寫錯檔案

「還是錯誤，另外 code.ts 內容應該寫在 code.js」

結果：我發現它每次都把程式寫在 code.ts，但要寫在 code.js 才能執行。當時我不懂原理，只知道寫在 js 才會成功。另外也看到 UI 了，它確實照前面的需求，用 Figma 風格把介面改好看了。

補充正確做法：Figma 只會執行 JavaScript，manifest 裡的 main 一定要指向 JavaScript 檔。官方範本是用 TypeScript 寫 code.ts，再編譯成 JavaScript 給 Figma 讀；在 VS Code 按 Command-Shift-B（Windows 是 Ctrl-Shift-B）選「watch-tsconfig.json」，存檔就會自動編譯。我當時直接把程式寫進 code.js 也能跑，只是跳過了編譯這一步。（Figma 官方 Quickstart，2026-10-15 查核）

第 5 句：改開啟流程、加全選

「Plugin 應該點擊就能打開，目前點擊會先跳出 batch Export 選取，很麻煩，然後要新增全選功能，讓我可以一次全選所有 frame，另外勾選框的右邊要增加一點空白」

結果：可以成功開啟了，但流程和介面還有可以調整的地方，所以請它照我的需求再改。

第 6 句：補選資料夾功能

「匯出應該要讓我選擇匯出資料夾，目前沒有這功能」

結果：測試時發現沒辦法選匯出資料夾，所以請它補上。

第 7 句：改成匯出時才選

「資料夾應該點選匯出時選擇」

結果：它做了選資料夾的功能，但要先設定再匯出。我習慣匯出時才選，所以請它改。

第 8 句：再貼一次錯誤

「我發現我無法匯出，會跳以下錯誤
無法保存檔案時發生錯誤：window.showDirectory Picker is not a function」

結果：一樣跳錯誤，我就把詳細的錯誤資訊貼給它，AI 會理解並協助解決。這個錯誤的意思是，外掛的視窗裡叫不到「選資料夾」這個瀏覽器功能。

第 9 句：只匯出第一張

「我發現只有匯出第一張圖，應該要能讓我一次匯出多個」

結果：我勾了很多張，但只有第一張被匯出，所以請它修改。

第 10 句：換方法，改成打包下載

「好像還是一張圖，嘗試幫我打包下載好了，單張圖好像還是會錯」

當時我會把同一段話重複貼兩次，想讓 AI 更重視這個要求。現在模型變聰明了，講一次就夠。

結果：匯出還是會錯，可能是多個檔案的關係，所以我改請它把所有圖片打包成一個壓縮檔匯出。這次順利完成，完全照我的需求執行。

這句是關鍵：同一個方法一直修不好時，換一個做法，比繼續叫它修更快。

第 11 句：預覽圖不要被裁切

「想請你修改一下圖片預覽，我希望預覽中的圖可以不要填滿，而是維持原本的比例呈現」

結果：功能其實已經做完了，這是小地方的修改。預覽框是方形，圖用填滿的方式放進去，有些圖會被裁掉。改完之後能看到圖片完整的樣子，效果完全符合預期。

第 12 句：點預覽圖就定位到畫布

「想請你幫我製作一個功能，這個功能是當我點選預覽圖時，可以直接在 figma 的畫布移動到該 frame 位置，並拉近呈現完整 frame 畫面」

結果：這是實際用了一下才決定加的功能。預覽圖比較小，發現錯字想改時，如果點預覽圖就能跳到那個位置，會方便很多。最後它也順利做出來了。

第 13 句：請 AI 寫工具說明

「請幫我用文字整理一下我這個工具的介紹與功能描述與介面說明」

這句跟寫程式無關。寫完之後我會請 AI 幫我整理一段介紹，這樣就有一份結構清楚的工具說明，上架時可以直接用。

到這邊，Plugin 在我電腦本機已經可以執行了，後面花更多時間的是上架。會這樣一句一句列出來，是想讓大家看到「非工程師」寫出一個 Plugin 的真實樣貌：沒有想像中難，我用的 Prompt 都很白話。

Batch Export Frames 的介紹圖，右側是外掛介面，標上 5 個編號：1 全選，一次勾選所有 Frame；2 預覽縮圖，點一下畫布跳到那個 Frame；3 改檔名，不會動到原本的 Frame 名稱；4 選格式，PNG、JPG 等，可選倍數；5 匯出，全部打包成一個 ZIP
13 句 Prompt 之後做出來的介面（Figma Community 介紹圖，2026-10-15 截取）。

3｜真正的考驗在上架：解錯比寫程式花更多時間

沒上架的 Plugin 只能自己電腦用，上架之後才能公開分享。下面分享我怎麼處理。

第一步：送出上架並填資料

現在的入口是在 Figma 桌面版點 Figma 圖示，到「Plugins」→「Manage plugins」，在你的 Plugin 旁的選單選「Publish」。接著要填名稱、一句話簡介、說明和分類，再上傳圖示（建議 128×128px）和縮圖（建議 1920×1080px），也可以填資料安全的揭露表。

過程中有不知道怎麼填的，我一樣是「截圖丟給 AI」，它會給答案，我負責操作和複製貼上就好。

送出後，Plugin 會先顯示「In review」。審核結果會寄到你的 Figma 帳號信箱；官方沒有寫固定天數，只說看當時的審核量。被退件的話，照回饋修好再送一次就可以。

第二步：遇到紅字，請 AI 解釋原因

過程中你可能會看到一些紅字，不要太擔心，一樣問 AI 就好。

不過我強烈建議一件事：請它告訴你「這個紅字是什麼問題，該怎麼解決」，不能只要它給解法。這樣才學得到東西，下次再做、再上架都會更有經驗。

我自己這次就卡在一個很值得分享的地方。

對照圖。左邊一開始：3 個紅字一起丟給 AI，紅字消失了，但有一個功能壞掉，一直請它重寫還是修不好。右邊後來：拆開一次只修一個，修一個就測一次原本的功能，找到是哪一個修改造成衝突，把紅字旁的官方規範貼給 AI，上架成功
一次修 3 個錯，壞掉時就找不到是哪一個造成的（示意）。

上架時跳出三個紅字錯誤，我為了方便，一次截圖請它解決這三個問題。後來紅字消失了，但出現新問題：有一個功能失效了。我一直請它重寫，還是沒辦法恢復。

還原到上架前的程式碼，功能又正常了。這時我就想：「是不是上架時改的那三個錯誤，影響到原本的程式？」

於是我把三個問題分開丟給 AI，請它告訴我原因和怎麼解決。我仔細讀內容，每解決一個，就測一次原本失效的功能。最後發現，是其中一個修改讓原本的程式沒辦法正常運作。

一開始兩者一直衝突、解決不了。後來發現紅字旁有一個官網連結，裡面是一份規範文件。Figma 調整過規範，AI 可能不知道最新的版本，所以一直解決不了。我直接把規範內容複製給它，也說明前面失敗的原因，讓它了解新規範後才解決，最後完成上架。

這次學到的：

  1. 不要一次讓它解決太多問題，出錯時很難找到原因。
  2. 請 AI 告訴你改了什麼、為什麼改，可以學到很多。
  3. 真的不要急。AI 已經很快了，有時慢慢來反而更好。

上架的每個欄位怎麼填，我另外寫在 Figma Plugin 上架全攻略。

結果：Batch Export Frames 現在能做什麼

這個外掛後來又更新了幾個版本，2025 年 2 月的第 5 版加了 WebP 和倍數匯出。依 Figma Community 頁面，目前的功能是：

  • 一次讀出檔案裡的 Frame，可以全選或複選
  • 匯出 PNG、JPG、SVG、PDF、WebP，倍數可選 0.5x 到 4x
  • 每個 Frame 都有預覽，點預覽圖會定位到畫布上的位置
  • 匯出前可以改檔名，不影響原本的 Frame 名稱
  • 全部打包成一個 ZIP 下載

到 2026-10-15，頁面顯示有 2.5k 人使用，完全免費。

後來又做了幾個 Plugin

做完這個之後，我陸續又上架了幾個，現在 我的 Figma 頁面上有 7 個 Plugin：

Plugin做什麼使用人數
IG Multi Image Splitter做 IG 輪播圖並切成多張4k
Batch Export Frames批量匯出 Frame（本文案例）2.5k
KeyPop產生鍵盤快捷鍵圖示，支援多種作業系統1.2k
Layer Renaming批次整理圖層名稱434
MultiDesign Assistant換色、調尺寸、等比縮放、加圓形文字底89
Frame Generate用自訂尺寸、群組和預設值批次建立 Frame44
Taiwan Data Filler填入台灣在地的姓名、地址、統編等假資料15

使用人數以各 Plugin 的 Figma Community 頁面為準（2026-10-15）。

現在回頭看，我會怎麼做

現在做 Plugin，我沒有固定用哪一個工具，看當下訂閱的方案和哪個好用，就用哪個。現在各家 AI Agent 做 Figma Plugin 的能力，應該都綽綽有餘了。

工具不是重點。不管用哪個，有三件事我一定會先做：需求清單寫到「Frame」這種 Figma 名詞都對、一次只請 AI 改一件事、上架前先讀一次紅字旁的官方規範。

給想試試看的你一個建議

先挑一個你每週都在 Figma 重複做的動作，寫成 5 行以內的需求清單，再丟給 AI。像這類簡單的工具，自己寫可能比找到一款剛好合用的 Plugin 還快。

新的時代，工具可以自己客製化，真的是一件很幸福的事。

限制與注意

  • 這是 2025 年 1 月的流程。Cursor、ChatGPT 的介面和模型都更新過，Prompt 照抄不一定得到一樣的結果，但溝通的方法一樣適用。
  • AI 寫的程式要自己測。每改一次就實際跑一次，尤其是匯出、刪除這類會動到檔案的功能。
  • Figma 規範會改。上架被擋時，先看紅字旁的官方連結，再把規範內容提供給 AI。
  • 審核時間不固定。官方說依當時的審核量而定，有填資料安全揭露表的，審核可能要到兩週。

相關資源

資源說明
Figma Plugin Quickstart Guide官方入門：環境安裝、建立第一個 Plugin、TypeScript 編譯
How Plugins Run官方說明：主程式和介面視窗各能做什麼
Publish plugins to the Figma Community官方上架步驟、圖片尺寸與審核流程
Figma Community Plugin 專區找參考、看別人做了哪些功能
我的 Figma 頁面本文提到的 7 個 Plugin
Figma Plugin 上架全攻略上架每個欄位怎麼填、資料安全問答
Vibe Coding 資源策展網站我用 AI 做資源網站的經驗紀錄

本文 Figma 開發與上架流程、Plugin 功能與使用人數於 2026-10-15 對照官方頁面查核，之後可能變動。

小結

  1. 先寫需求清單：功能和介面先想清楚，Figma 的名詞（例如 Frame）要寫對。
  2. 一句一句改：一次只改一件事，出錯就把錯誤訊息整段貼回去；同一招一直修不好就換方法。
  3. 上架要有耐心：紅字拆開一個一個修，每修一個就測一次，必要時把官方規範貼給 AI。

如果只能先做一件事，就打開 Figma，把你最常重複的那個動作寫成 5 行需求清單。

常見問題 FAQ

完全不會寫程式，真的做得出來嗎？

做得出來，我就是例子。但你要能清楚描述需求、願意一次次測試，並把錯誤訊息貼回去給 AI。簡單的工具（匯出、改名、批次建立）最適合當第一個練習。

用 TypeScript 還是 JavaScript？

官方範本用 TypeScript，寫完要編譯成 JavaScript，因為 manifest 的 main 一定要指向 JavaScript 檔。新手直接請 AI 照官方範本做就好；如果遇到「改了沒反應」，先確認編譯有沒有跑。

上架審核要多久？

官方沒有寫固定天數，只說看當時的審核量；有填資料安全揭露表的，審核可能要到兩週。送出後在 Manage plugins 會看到「In review」，結果會寄到 Figma 帳號信箱。

被退件怎麼辦？

照退件的回饋修改後，再送一次就可以。修改時一樣一次改一個問題，改完先在本機測過原本的功能。

一定要用 Cursor 嗎？

不一定。我當時用 Cursor 搭配 ChatGPT，現在則是看手上訂閱的方案和哪個好用就用哪個，各家 AI Agent 做 Figma Plugin 都夠用。重點是需求寫清楚、一次改一件事。

關於作者｜Kevin Kuo

Kevin Kuo / 郭政佑是 凱文設計 Kevin Design 與 創作邦 CreatorHome 的內容創作者，長期整理 AI 工具、設計方法、創作者工作流與個人品牌經營。

更多公開介紹可參考 Kevin on CreatorHome、Kevin Design AI Guide。

延伸閱讀：Figma Plugin 上架全攻略｜2026 Figma Plugin 推薦：36 個好用外掛整理｜Vibe Coding 資源策展網站

創作邦載入中