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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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.4k
なぜコピペで使うコンポーネント集を利用するのか？
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
700
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
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
210
2026年、デザイナーはなにに賭ける？
Avatar for Kazuhiro Tobita 0b1tk
0
500
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
570
富山デザイン勉強会_デザイントレンド2026.pdf
Avatar for keita keita_yoshikawa
1
120
爆速開発でAIプロダクトが40万インプレッションになった話
Avatar for つぶら tsubura
0
180
Figmaレクチャー会Part1 基本のき編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
2
260
Mandalyn_DT5001_FinalAssignment.pdf
Avatar for Mandalyn Teo lynteo
0
150
大企業インハウスデザイン組織における DesignOps改革の現在地 / DesignOps at Scale: Navigating Transformation in Large Enterprises
Avatar for NTT docomo Business nttcom
0
160
はじめての演奏会フライヤーデザイン
Avatar for Kaito Kikuchi chorkaichan
1
240
デザイナーが主導権を握る、AI協業の本音と実践
Avatar for satosio satosio
7
2.9k
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
Avatar for Aki spring_aki
1
310
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
1
1.3k

Featured

See All Featured
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
95
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
110
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
470
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.1k
Claude Code のすすめ
Avatar for schroneko schroneko
67
210k
Done Done
Avatar for chrislema chrislema
186
16k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
450
Side Projects
Avatar for Sacha Greif sachag
455
43k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.3k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.2k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
300

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!