Slide 1
Slide 1 text
Figma Plugin/Widget
公開までの壁を乗り越える
Figmaお楽しみトーク vol.2 @mottox2
Slide 2
Slide 2 text
@mottox2
Slide 3
Slide 3 text
Japanese Font Mixer
Plugin
Slide 4
Slide 4 text
Simple Markdown Notes
Widget
Slide 5
Slide 5 text
初プラグインを公開するまでに
お蔵入りになったものがある
公開だけがゴールではないけど・
・
・
Slide 6
Slide 6 text
Figmaプラグイン開発どこまでやった？
C プラグインを利用してい1
C プラグイン開発を試したことがあ1
C プラグインで機能を実装したことがあ1
C プラグインを公開したことがある
Slide 7
Slide 7 text
Figmaプラグイン開発どこまでやった？
C プラグインを利用してい1
C プラグイン開発を試したことがあ1
C プラグインで機能を実装したことがあ1
C プラグインを公開したことがある
自分はずっと実装止まりだった
Slide 8
Slide 8 text
Figmaプラグイン開発どこまでやった？
C プラグインを利用してい1
C プラグイン開発を試したことがあ1
C プラグインで機能を実装したことがあ1
C プラグインを公開したことがある
ここのハードルが高い
Slide 9
Slide 9 text
プラグイン公開への
ハードルを下げるヒント
今日話すこと
Slide 10
Slide 10 text
前提
9 FigmaPluginやWidgetの機能は実装してい
9 大きなものではなく小さなツール的なものを作っている
Slide 11
Slide 11 text
なにがハードルになっているのか？
1. 開発環境の設定
2. UIの整備
3. ストア掲載情報の準備
Slide 12
Slide 12 text
開発環境の設定
a デスクトップアプリから作るテンプレートは最初の一歩と
してはいいが、
作り続けていくうちに辛くな$
a `@figma/create-widget`がいい感じのものを吐き出す
が、
プラグイン向けに同等のものはない
Slide 13
Slide 13 text
UIの整備
QドキュメントによるとFigmaとの一貫性を保つことが推奨
されていE
Q 紹介されているCSS/JSはあまり使い勝手がよくない
https://www.figma.com/plugin-docs/figma-components
Slide 14
Slide 14 text
ストア掲載情報の準備
% 最初の設定が単純にめんどくさ2
% アイコンとカバー画像が必F
% プラグインの出来がよくないとやる気がでない
Slide 15
Slide 15 text
1. 開発環境の設定
2. UIの整備
Slide 16
Slide 16 text
解決策
Create Figma Pluginを使う
Slide 17
Slide 17 text
Create Figma Pluginとは
W 作者はShopifyのデザイナー@yuanqing9
W Figmaプラグイン開発におけるテンプレートの展開、
ビル
ド周りの整備、
UIコンポーネント、
ユーティリティ集を含む
総合的なツールキット
https://yuanqing.github.io/create-figma-plugin/
Slide 18
Slide 18 text
Demo
Slide 19
Slide 19 text
DEMO
A npx create-figma-plugi9
A npm install; npm run watch2
A Figma側で生成されたmanifest.jsonをimportす
A プラグインの実装を行う
Slide 20
Slide 20 text
@create-figma-plugin/build
S PluginもWidgetも同じCLIから作れs
S Preact前提でエントリーポイントが隠蔽されていて、
ui.tsx
でexport defaultしたコンポーネントがマウントされs
& 余計なものが見えないのでシンプルに扱える
Slide 21
Slide 21 text
@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
Slide 22
Slide 22 text
@create-figma-plugin/ui
# Preact製のUIコンポーネントライブラf
# Storybookのページが公開されていb
# https://yuanqing.github.io/create-figma-plugin/
storybook
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
@create-figma-plugin/utilities
( Figmaプラグイ
ン開発に使えるUtilityが用意されていF
( Events, Node, Color, Settings系はよくつか
( 特にEvent系Utilityはお気に入り
Slide 25
Slide 25 text
3. ストア掲載情報の準備
Slide 26
Slide 26 text
おまけ: ストア情報を揃える
u ストア情報を入力するので一番大変なのは画像づくE
u スクショをうまく使って作るのが7
u Communityの先人の知恵をお借りするのがよさそS
u 気に入らなくてもストア情報の更新は後からでもできる
Slide 27
Slide 27 text
おわりに
H Create Figma Pluginに乗っておけば公開までに迷うこと
が減$
H ストアは先人の知恵を借りてある程度楽にな$
H あとは気持ち次第
Slide 28
Slide 28 text
Thank you!