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

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

如果你想知道我撰寫一個 Figma Plugin 的詳細過程可以看這篇
程式小白,靠 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 那邊審核通知,最快半天到一天就能審核完,我自己過往經驗大概都是一天左右。

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

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

3.送審 - 01 02 at 23.51.53 2x

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

3.送審 - 01 03 at 12.42.21 2x

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

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

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

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

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

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

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


關於作者|Kevin Kuo

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

🔗 創作邦官網訂閱電子報更多關於我