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

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

@mottox2

Japanese Font Mixer Plugin

Simple Markdown Notes Widget

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

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

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

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

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

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

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

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

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

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

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

解決策 Create Figma Pluginを使う

Create Figma Pluginとは W 作者はShopifyのデザイナー@yuanqing9 W Figmaプラグイン開発におけるテンプレートの展開、ビルド周りの整備、 UIコンポーネント、
ユーティリティ集を含む総合的なツールキット https://yuanqing.github.io/create-figma-plugin/

DEMO A npx create-figma-plugi9 A npm install; npm run watch2
A Figma側で生成されたmanifest.jsonをimportす A プラグインの実装を行う

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

@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

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

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

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

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

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

Thank you!

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

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

mottox2

More Decks by mottox2

Other Decks in Design

Featured

Transcript

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

@mottox2

Japanese Font Mixer Plugin

Simple Markdown Notes Widget

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

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

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

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

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

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

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

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

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

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

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

解決策 Create Figma Pluginを使う

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

Demo

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

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

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

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

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

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

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

Thank you!