Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Figma Plugin公開までの壁を乗り越える

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for mottox2 mottox2
September 07, 2022
Design
3
3.9k

Figma Plugin公開までの壁を乗り越える

『Figmaお楽しみトーク Vol.2』の登壇資料です

Create Figma Plugin https://yuanqing.github.io/create-figma-plugin/

Avatar for mottox2

mottox2

September 07, 2022
Tweet

More Decks by mottox2

See All by mottox2
もう一歩進めたい OG画像の動的生成
Avatar for mottox2 mottox2
7
2.2k
なぜコピペで使うコンポーネント集を利用するのか？
Avatar for mottox2 mottox2
8
7.4k
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
Avatar for mottox2 mottox2
7
4k
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
Avatar for mottox2 mottox2
0
750
手触りのよいウェブを考える / better-mobile-web
Avatar for mottox2 mottox2
3
1.9k
組織と権限とSlack App / slack-app-with-roles
Avatar for mottox2 mottox2
1
690
SSRを避けるためにやっていること / ssr-alternative
Avatar for mottox2 mottox2
9
3.3k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
Avatar for mottox2 mottox2
7
33k
プレイヤー目線の技術ブランディング / personal branding
Avatar for mottox2 mottox2
4
4.7k

Other Decks in Design

See All in Design
Emmy's Artwork
Avatar for McKenna mcksmith
0
190
新規AIプロダクトで、事前に知るべきだった3つの壁 〜医療AIを1年間作って、従来の開発が通用しなかった話〜 / Three Walls in Building AI Products
Avatar for Takuya Shikichi shikichee
2
3.1k
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
Avatar for MIXI DESIGN mixi_design
PRO
1
180
爆速開発でAIプロダクトが40万インプレッションになった話
Avatar for つぶら tsubura
0
150
チームをデザイン対象にする / Design for your team
Avatar for 株式会社カミナシ kaminashi
1
500
From the Visible Crossroads: Turning Outputs into Outcomes
Avatar for takai_kanako takaikanako
2
1k
デザイナーがAIを使い倒して爆速プロダクト開発！社内ハッカソンでの取り組み紹介
Avatar for 都村　美帆 abokadotyann
9
2.9k
hicard_credential_202601
Avatar for hicard hicard
0
140
UI/UX & Web Design Portfolio 2025｜Madoka Kumagai
Avatar for Madoka madoka_portfolio
2
110
【サイバーエージェント】Creative Switch 会社説明資料
Avatar for 【CyberAgent】クリエイター新卒採用 cyberagent_creators
0
5.1k
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
Avatar for インクルーシブデザインスタジオCULUMU culumu
1
570
【MIXI MEETUP！ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ！生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
Avatar for MIXI DESIGN mixi_design
PRO
0
190

Featured

See All Featured
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.4k
Visualization
Avatar for Eitan Lees eitanlees
150
17k
HDC tutorial
Avatar for Michiel Stock michielstock
1
360
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
88
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.3k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
54
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.3k
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.2k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
60
42k

Transcript

  1. Figma Plugin/Widget 公開までの壁を乗り越える Figmaお楽しみトーク vol.2 @mottox2

  2. @mottox2

  3. Japanese Font Mixer Plugin

  4. Simple Markdown Notes Widget

  5. 初プラグインを公開するまでに お蔵入りになったものがある 公開だけがゴールではないけど・ ・ ・

  6. Figmaプラグイン開発どこまでやった？ C プラグインを利用してい1 C プラグイン開発を試したことがあ1 C プラグインで機能を実装したことがあ1 C プラグインを公開したことがある

  7. Figmaプラグイン開発どこまでやった？ C プラグインを利用してい1 C プラグイン開発を試したことがあ1 C プラグインで機能を実装したことがあ1 C プラグインを公開したことがある 自分はずっと実装止まりだった

  8. Figmaプラグイン開発どこまでやった？ C プラグインを利用してい1 C プラグイン開発を試したことがあ1 C プラグインで機能を実装したことがあ1 C プラグインを公開したことがある ここのハードルが高い

  9. プラグイン公開への ハードルを下げるヒント 今日話すこと

  10. 前提 9 FigmaPluginやWidgetの機能は実装してい 9 大きなものではなく小さなツール的なものを作っている

  11. なにがハードルになっているのか？ 1. 開発環境の設定 2. UIの整備 3. ストア掲載情報の準備

  12. 開発環境の設定 a デスクトップアプリから作るテンプレートは最初の一歩と してはいいが、 作り続けていくうちに辛くな$ a `@figma/create-widget`がいい感じのものを吐き出す が、 プラグイン向けに同等のものはない

  13. UIの整備 QドキュメントによるとFigmaとの一貫性を保つことが推奨 されていE Q 紹介されているCSS/JSはあまり使い勝手がよくない https://www.figma.com/plugin-docs/figma-components

  14. ストア掲載情報の準備 % 最初の設定が単純にめんどくさ2 % アイコンとカバー画像が必F % プラグインの出来がよくないとやる気がでない

  15. 1. 開発環境の設定 2. UIの整備

  16. 解決策 Create Figma Pluginを使う

  17. Create Figma Pluginとは W 作者はShopifyのデザイナー@yuanqing9 W Figmaプラグイン開発におけるテンプレートの展開、 ビル ド周りの整備、 UIコンポーネント、

    ユーティリティ集を含む 総合的なツールキット https://yuanqing.github.io/create-figma-plugin/

  18. Demo

  19. DEMO A npx create-figma-plugi9 A npm install; npm run watch2

    A Figma側で生成されたmanifest.jsonをimportす A プラグインの実装を行う

  20. @create-figma-plugin/build S PluginもWidgetも同じCLIから作れs S Preact前提でエントリーポイントが隠蔽されていて、 ui.tsx でexport defaultしたコンポーネントがマウントされs & 余計なものが見えないのでシンプルに扱える

  21. @create-figma-plugin/build 基本的なテンプレートだとファイルはこれだけ
 余計なものに目がいかなu R src/ui.tsx iframe側のエントリーポインf R src/main.ts sandbox側のエントリーポインf R

    package.jsoP R tsconfig.jsoP R README.md

  22. @create-figma-plugin/ui # Preact製のUIコンポーネントライブラf # Storybookのページが公開されていb # https://yuanqing.github.io/create-figma-plugin/ storybook

  23. None

  24. @create-figma-plugin/utilities ( Figmaプラグイ ン開発に使えるUtilityが用意されていF ( Events, Node, Color, Settings系はよくつか (

    特にEvent系Utilityはお気に入り

  25. 3. ストア掲載情報の準備

  26. おまけ: ストア情報を揃える u ストア情報を入力するので一番大変なのは画像づくE u スクショをうまく使って作るのが7 u Communityの先人の知恵をお借りするのがよさそS u 気に入らなくてもストア情報の更新は後からでもできる

  27. おわりに H Create Figma Pluginに乗っておけば公開までに迷うこと が減$ H ストアは先人の知恵を借りてある程度楽にな$ H あとは気持ち次第

  28. Thank you!