程式小白，靠 AI 成功製作了 4 個 Figma Plugin — 我把整個寫程式的過程攤開給大家看

Figma Plugin 是我最早開始嘗試寫的工具，主要目的是希望能協助我解決 Figma 的一些設計問題所做的嘗試。

最終我寫出了 4 個 Figma Plugin，󠀠以下來分享一下我的一些經驗，這篇分享會用一個我的案例來詳細的把我使用的 Prompt 跟詳細流程列出，還有遇到的困難與我的解決方法。

希望盡量詳細的去拆解過程，也讓大家看到其實我寫的 Prompt 並沒有很複雜，可能在一些人來看甚至是寫的不好，但連我這樣寫的不算好的人都能成功完成，相信對大家來說應該更有鼓舞效果

󠀠

󠀠󠀠

前期準備

󠀠▍工具：Cursor AI+ChatGPT

󠀠▍資源：Figma Plugin 製作的官方教學：有時這類製作教學有很完整且基礎的教學，相比於直接問 AI，先大概了解一下製作的流程再使用 AI 會更知道如何溝通。

󠀠▍目標：製作一個可以在 Figma 中一次匯出多圖，且有預覽效果跟定位圖片功能的 Plugin。

▍找參考：先找看看有沒有類似的工具或 Plugin，搞懂邏輯，這樣可以更清楚要如何設計我們的 Plugin，也更好的跟 AI 溝通功能，這邊我是參考 Adobe Illustrator 的「轉存為螢幕適用」。

󠀠▍看教學：建議可以看一下 Cursor 的教學，因為如果你是程式新手，應該連介面都不太熟悉，先看一下怎麼操作，會更好開始。

󠀠以上就是一開始的準備，當你準備好後就能開始製作了。

󠀠

======

1. 列出  Plugin 的功能與介面詳細描述

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

󠀠舉例來說我要製作一個能一次匯出多圖的工具，我就要列出詳細需求，先自己確認功能是否齊全與說明清楚。

󠀠這邊我做的就是口語化列出 Plugin「要做到什麼」，介面描述也先大概有一個畫面，知道要長怎樣，這樣後續跟 AI 溝通就有一個方向。

󠀠

2. 我怎麼跟 AI 溝通

󠀠

以下分享皆為真實的 Prompt，最後工具也有順利寫出

󠀠

第一句 Prompt：

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

程式結果：

1. 顯示匯出的圖片要是「Frame」，沒有正確顯示出來，我沒有在一開始說清楚要 Frame，所以沒成功。

2. 介面太陽春不好看。

󠀠

󠀠第二句 Prompt：

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

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

󠀠

󠀠

第三句 Prompt：

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

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

󠀠

第四句 Prompt：

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

󠀠程式結果：

1. 我發現一個狀況，它每次都會把程式碼寫在 code.ts，但應該要寫在 code.js，這也是我後來發現的，我不懂原理，但結果就是寫在 js 才能成功執行。

󠀠2. 有看到 UI，它的確依照前面需求，用 Figma 風格幫我把 UI 改好看了。

第五句 Prompt：

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

󠀠程式結果：可以成功開啟了，但是流程跟介面上有可以調整的地方，所以請它針對我的需求幫我去調整。

󠀠󠀠

第六句 Prompt：

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

程式結果：這邊在測試時發現它無法選擇匯出資料夾，所以請它補上這功能

󠀠

󠀠

第七句 Prompt：

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

程式結果：它有做了資料夾選擇功能，但是要先設定再匯出，但我習慣是匯出時選擇，所以就請它修改。

󠀠

󠀠

第八句 Prompt：

「我發現我無法匯出，會跳以下錯誤

無法保存檔案時發生錯誤：window.showDirectory Picker is not a function」

󠀠程式結果：一樣跳出錯誤，就把詳細錯誤資訊貼給它，AI 會理解並協助解決。

󠀠

󠀠

第九句 Prompt：

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

󠀠程式結果：遇到的狀況是我勾選多圖，但只有第一張圖被匯出，應該要能匯出多個，所以請它修改

󠀠󠀠

第十句 Prompt：

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

󠀠程式結果：這邊發現匯出還是會錯，可能是多個檔案的原因，所以我改成請它嘗試把所有圖片打包成一份「壓縮檔」匯出。

󠀠結果順利完成，完全有依照我的需求來去執行。

󠀠

第十一句 Prompt：

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

󠀠程式結果：其實已經完成了我想要的功能了，這邊是小地方不滿意的修改，主要是預覽圖它使用填滿的方式，但預覽圖是方形，所以有些圖會被裁切。

󠀠這邊就讓它幫我修改一下，讓我能預覽圖片完整外觀，最後效果完全符合預期。

󠀠

第十二句 Prompt：

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

󠀠程式結果：這功能是實際用了一下後決定新增的，因為預覽圖比較小，加上發現錯誤後會想修改，如果能點選預覽圖後直接讓畫面定位到指定位置，就很方便，最後它有順利完成！

󠀠󠀠

最後一句 Prompt：

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

󠀠說明：這句其實跟撰寫程式無關，只是寫完我會讓 AI 幫我撰寫這樣一段內容，這樣就等於有一份詳細且結構清晰的工具介紹了。

󠀠

以上就是整個詳細流程，到這邊其實我電腦本地端已經可以執行，後面花更多時間的上架。

󠀠會想要這樣列出呈現，是想給大家看到「非工程師」寫出一個 Plugin 的真實樣貌，也想讓大家知道沒有想像的難，我用的 Prompt 超白話跟簡單。

󠀠󠀠

3. 真正的考驗在發佈，解決錯誤比寫程式花更多時間

󠀠

接著是「發佈」，沒發佈只能自己電腦用，發佈後可以公開分享出去，所以我下面會分享我怎麼處理的。

󠀠

第一、發佈並填寫資料

在 Figma Plugin 旁有「Publish」選項，點擊後會有一些基本資料要填寫，還需上傳封面圖跟 Plugin 圖示。

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

󠀠

第二、遇到「紅字」

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

󠀠不過這邊強力建議一件事，就是要請它告訴你「這紅字是什麼問題，並且該如何解決」，不能只是要它給解法。

󠀠因為這樣才能學到東西，之後再次製作跟上架也比較有經驗，我自己這次過程就遇到一個卡關的地方很值得跟大家分享。

󠀠就是發佈時跳出三個紅字錯誤出來，我就為了方便，一次截圖請它幫我解決這三個問題。

󠀠後來「紅字消失」，這三個問題被解決了，但這邊發生一個問題，在解決問題後出現新問題，我發現「有一個功能失效了」，我一直請它重寫還是無法成功恢復。

後來還原到發布前的程式碼又正常了，這時我就在想「是不是發布時修改的三個錯誤去影響到程式碼了」。

這時我把三個問題分開給 AI，並請它告訴我原因跟怎麼解決，我詳細去讀內容跟了解，解決完一個就測試一次原本失效的功能。

󠀠最後發現，是其中一個修改導致的，它會讓我原本的程式無法正常運行。

󠀠一開始發現二者一直衝突，解決不了，最後是發現紅字旁有一個官網連結，裡面有一份規範文件，Figma 有調整過規範，AI 可能不知道最新的規範，所以一直無法解決問題。

󠀠所以我就直接把規範的內容複製給它看，同時也跟它說明為何前面失敗的原因，讓它去了解新規範後才解決問題，最後完成上架。

󠀠

這邊分享一下學到的：

① 不要一次讓它解決太多問題，有錯不容易找到原因

② 請 AI 告訴你改了什麼及為何改，可以學到很多東西

③ 真的不要急，AI 已經很快了，有時慢慢來才好

󠀠

＊＊＊

󠀠

最後有我最後成功上架的 Plugin，歡迎大家可以體驗看看。

󠀠Batch Export Frames 工具簡介：

① 可以一次讀取你文件中的 Frame，讓你可以批量輸出，有全選、複選功能。

② 能夠輸出 PNG、JPG 二種格式，輸出是變成一包壓縮檔。

③ Frame 都能預覽，且點選預覽圖可以定位到檔案中位置，輸出前還能修改檔名，但不影響原有 Frame 名稱。

我的 Figma 頁面，上面有上架的四款 Plugin
▶︎ https://www.figma.com/@creatorhome

󠀠

＊＊＊

最後也說一下為何我要寫這個工具，是因為我最近正在製作一個專案有多圖匯出需求，當下一張張選擇匯出好煩，後來就想是不是有 Plugin 可以解決，但稍微找了一下沒發現符合需求的工具。󠀠

最後就想自己寫個 Plugin 來解決，所以就花了一點時間寫，真的沒有花太多時間，只是後續有些小問題被退件，但也很快解決，只能說未來可能這類簡單工具，自己寫可能比找到一款適合的 Plugin 還快。

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

＊＊＊

▶︎ 想要即時了解我的相關資訊，可追蹤我的社群：https://kevinlearn.com

▶︎ 各種免費資源整理與設計、AI 新知，上創作邦官網：https://creatorhome.tw