Figma Plugin 上架全攻略:用 AI 加速開發與審核流程

想要開發並上架屬於自己的 Figma Plugin 嗎?這篇完整分享從最初的功能構思、程式碼開發到成功通過審核上架的每個步驟與詳細教學,還包含實際使用 Cursor 等 AI 輔助程式開發工具來加速編寫的實戰經驗與踩坑紀錄,即使是完全不會寫程式的新手也能跟著一步步做出來!

作者:郭政佑 Kevin · ·

TL;DR:這篇整理 Figma Plugin 從開發到上架的完整流程,包含如何用 AI 加速開發、準備審核素材、處理常見被退件原因,適合設計師把自己的工具想法做成可公開使用的外掛。

從開發到上架的 Figma Plugin 完整攻略,分享如何用 AI 加速開發流程並順利通過審核。

這邊要分享如何上架一個 Figma Plugin,我自己主要是透過 AI 撰寫完成 Plugin,這邊也會分享如何快速透過 AI 來去上架一款 Figma Plugin。

如果你想知道我撰寫一個 Figma Plugin 的詳細過程可以看這篇
創作邦 CreatorHomeKevin
程式小白,靠 AI 成功製作了 4 個 Figma Plugin — 我把整個寫程式的過程攤開給大家看
我寫出了 4 個 Figma Plugin,󠀠來分享一下我的一些經驗,這篇分享會用一個我的案例來詳細的把我使用的 Prompt 跟詳細流程列出,還有遇到的困難與我的解決方法。

這邊也分享一個小技巧,我推薦使用 Cursor、Antigravity 等 AI IDE 工具來撰寫 Plugin,好處在於 Plugin 是本地端處理,使用這類工具最方便,另外則是用 AI 建立,後續上架等問題,直接丟給 AI,從介紹但選填內容,AI 很了解產品,都可以給你最適合的答案。

下面這邊就把所有上架步驟跟一些細節分享給大家。

1.針對設計完成的 Figma Plugin 點選 Publish

1.針對設計完成的 Figma Plugin 點選 Publish - 01 02 at 22.37.31 2x

2.填寫基本資料

這邊其實很容易,依照欄位說明撰寫,如果有不懂或想要更方便,可以截圖丟給 AI,告訴他你的這個工具功能。

2.填寫基本資料 - 01 02 at 22.36.32 2x

當然這邊我也會簡單說明一下各欄位和填寫建議

第一步:Describe your resource

Name:你的 Plugin 名稱這邊建議多數 Plugin 都可以加上英文,因為 Figma 是一個國際化工具,使用者全世界都有,寫上英文會讓更多人可以搜尋到。

Tagline:

舉例:

第一步:Describe your resource - 01 02 at 23.05.10 2x

第二步:上傳圖片資料

這邊至少必需要上傳二張圖

1.Plugin ICON:尺寸 128 x 128

2.一張封面圖:尺寸 1920 x 1080

第二步:上傳圖片資料 - 01 02 at 23.40.31 2x

另外還可以上傳更多可以輔助說明跟吸引人的圖片或影片,這會作為輪播圖呈現,可以讓人更好了解你的 Plugin 內容。

第二步:上傳圖片資料 - 01 02 at 23.43.13 2x

第三步:Data security

這邊需要填寫回答一些問題,我做了一些簡單翻譯,大家根據內容來選擇適合的選項就好。

1. Do you host a backend service for your plugin/widget?

您的外掛/小工具是否有架設後端服務?

  • No, I do not host a backend service for my plugin/widget. 不,我沒有為我的外掛/小工具架設後端服務。
  • Yes, but my plugin/widget does not send any data read/derived from Figma’s plugin API to this backend. 有,但我的外掛/小工具不會傳送任何從 Figma 外掛 API 讀取或衍生的資料到此後端。
  • Yes, and data read/derived from Figma’s plugin API is sent to this backend. 有,且從 Figma 外掛 API 讀取或衍生的資料會傳送到此後端。

2. Does your plugin/widget make any network requests with services you do not host?

您的外掛/小工具是否會對您未託管的服務發出任何網路請求?

  • My plugin/widget does not make any network requests. 我的外掛/小工具不會發出任何網路請求。
  • My plugin/widget makes network requests for static assets eg. fonts, images. None of these requests include data read/derived from Figma's plugin API. 我的外掛/小工具會對靜態資源(如字體、圖片)發出網路請求。這些請求皆不包含從 Figma 外掛 API 讀取或衍生的資料。
  • My plugin/widget makes network requests to analytics tools eg. Mixpanel, Sentry, etc. None of these requests include any data read/derived from Figma's plugin API. 我的外掛/小工具會對分析工具(如 Mixpanel、Sentry 等)發出網路請求。這些請求皆不包含任何從 Figma 外掛 API 讀取或衍生的資料。
  • My plugin/widget makes network requests not captured by the above: 我的外掛/小工具會發出以上未提及的網路請求:

3. Does your plugin/widget use any user authentication?

您的外掛/小工具是否使用任何使用者驗證(登入功能)?

  • No, my plugin/widget does not require or use any user authentication. 不,我的外掛/小工具不需要也不使用任何使用者驗證。
  • Yes, my plugin/widget has user authentication that is handled via a third-party identity provider eg. Auth0 or a “Log in with Google” button. 有,我的外掛/小工具擁有使用者驗證功能,並透過第三方身分提供者處理,例如 Auth0 或「使用 Google 登入」按鈕。
  • Yes, my plugin/widget has user authentication that is handled via a site that I host. 有,我的外掛/小工具擁有使用者驗證功能,並透過我託管的網站處理。

4. Do you store any data read/derived from Figma’s plugin API?

您是否會儲存任何從 Figma 外掛 API 讀取或衍生的資料?

  • No, my plugin/widget does not store any data read/derived from Figma’s plugin API. 不,我的外掛/小工具不會儲存任何從 Figma 外掛 API 讀取或衍生的資料。
  • Yes, my plugin/widget stores data read/derived from Figma’s plugin API locally (eg. localStorage, figma.clientStorage, or node.setPluginData). 有,我的外掛/小工具會將從 Figma 外掛 API 讀取或衍生的資料儲存在本地端(例如 localStorage、figma.clientStorage 或 node.setPluginData)。
  • Yes, my plugin/widget stores data read/derived from Figma’s plugin API in a way not captured by the above. 有,我的外掛/小工具會以以上未提及的方式儲存從 Figma 外掛 API 讀取或衍生的資料。

5. How do you manage updates to your plugin/widget?

您如何管理外掛/小工具的更新?

  • I am a solo developer. I manage and update my plugin/widget myself. 我是獨立開發者。我自行管理並更新我的外掛/小工具。
  • I work on a team and code changes are reviewed by a separate person before publishing. 我在團隊中工作,程式碼變更在發布前會由另一人審核。
  • Other 其他

第四步:Add the final details

這邊就最簡單

1.選擇作者,假設有共創作者請一起加入

2.開放留言,這邊可以選擇是否開放使用者留言

第四步:Add the final details - 01 02 at 23.47.41 2x

3.支援 Email,這邊會預設帳號的 Email,但假設你希望使用其它 Eamil,記得在這邊修改

第四步:Add the final details - 01 02 at 23.47.48 2x

3.送審

最後就是送審,提交後要等待 Figma 審核通知;官方沒有保證固定審核時間,實際速度會依提交內容與審核佇列而變動。我過往曾遇過約一天的個人經驗,但不能當成目前承諾。請參考Figma 外掛審核指南安全揭露原則

假設沒通過,他們會告訴你原因,這時就需要針對性去修改,假設通過了就會接上線,到時就能公開分享。

這邊要是沒通過,可以直接把未通過原因丟給 AI,請 AI 解決。

3.送審 - 01 02 at 23.51.53 2x

通過後會收到這樣一封信件,雖然我寫這些工具沒有賺錢,但每次都超有成就好,就像是信中說的希望我持續為社群做貢獻。

3.送審 - 01 03 at 12.42.21 2x

我喜歡 Figma 的原因除了工具本身外,還有這樣一個互相交流跟貢獻的社群,在這邊我也因為很多人分享免費且好用的模版、Plugin 而受惠。

現在有能力後當然持續分享,期望這社群越來越好。

=+=+=+=+=+=+=+=+=+=+=

這邊是我的 Figma 帳號,上面有我製作的 Plugin,有興趣的可以直接看看

Figma
Figma (@creatorhome) | Figma
The latest files and plugins from 創作邦 CreatorHome (@creatorhome) — 平面設計師

另外這是我整理的 Vibe Coding 資源網站,如果你對 Vibe Coding 有興趣,可以查看我整理的資源

Vibe Coding Resources
Vibe Coding Resources
Curated Vibe Coding resources, tools, and tutorials. From AI-assisted coding to automated deployment, build your optimal development flow.


常見問題 FAQ

Figma Plugin 上架需要付費嗎?

不需要。Figma Plugin 上架到 Figma Community 是完全免費的,任何擁有 Figma 帳號的開發者都可以提交外掛進行審核。

Figma Plugin 審核需要多久?

Figma 官方說明審核時間會依個案與佇列變動,沒有固定的 5 到 10 個工作天保證;安全揭露另有官方流程與期限說明。請依外掛審核指南安全揭露原則準備並追蹤提交。

可以用 AI 幫忙開發 Figma Plugin 嗎?

可以。使用 ChatGPT、Claude 等 AI 工具可以大幅加速開發流程,從撰寫程式碼到除錯都能協助。本文就是以 AI 輔助開發的實際經驗為基礎撰寫。

Figma Plugin 被拒絕了怎麼辦?

Figma 會提供具體的拒絕原因和修改建議。根據回饋修正後可以重新提交,大多數情況下修正一次就能通過。

💼 接案路上需要報價單工具?我自己做了一個叫 CaseFlow 的線上報價單 SaaS,專為台灣接案族群設計,30 秒生成專業報價、客戶線上簽名,Beta 階段免費試用。


關於作者|Kevin Kuo

凱文設計 / 創作邦 CreatorHome 創辦人。專注分享 AI 工具應用、設計實務與個人品牌經營,幫助創作者打造可持續的創作事業。

🔗 更多關於我:kevinlearn.com


延伸閱讀:

👉 Vibe Coding 實戰分享:10 款私藏 AI 開發工具

👉 AI 時代的一人工作術:8 個實測工具推薦


設計 × AI 系列延伸閱讀

創作邦重新讀取中