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

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

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

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
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!