Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Figma Plugin公開までの壁を乗り越える
Search
mottox2
September 07, 2022
Design
2
2.6k
Figma Plugin公開までの壁を乗り越える
『Figmaお楽しみトーク Vol.2』の登壇資料です
Create Figma Plugin
https://yuanqing.github.io/create-figma-plugin/
mottox2
September 07, 2022
Tweet
Share
More Decks by mottox2
See All by mottox2
もう一歩進めたい OG画像の動的生成
mottox2
7
1.4k
なぜコピペで使うコンポーネント集を利用するのか?
mottox2
8
6.7k
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
mottox2
7
3.7k
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
610
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.7k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
580
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
3.1k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
32k
プレイヤー目線の技術ブランディング / personal branding
mottox2
4
4.1k
Other Decks in Design
See All in Design
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
580
アジャイル開発におけるFigmaAI新機能の活用
abokadotyann
1
150
ピクシブにおける「ビジョン」の取り扱われ方 #pixivdevmeetup / 20240920
minamitary
1
700
Designing and Automating Component Specifications (Into Design Systems)
nathanacurtis
3
400
エムスリー株式会社 デザイングループ紹介資料 / m3design-team-profile
m3designer
0
3.1k
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
3
590
トップデザインチームが描く、 2030年に活躍するデザイナー
hiranotomoki
1
2.2k
Design System for training program
mct
0
110
Speed Design
sergeychernyshev
22
490
ito aya|Portfolio2409
itoaya116
0
200
We Baby Bears-Triple T Tiger
yvonnehsuanho
PRO
0
440
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
13
5.3k
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
31
1.4k
4 Signs Your Business is Dying
shpigford
180
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Ruby is Unlike a Banana
tanoku
96
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2k
Web development in the modern age
philhawksworth
205
10k
Done Done
chrislema
181
16k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Designing for humans not robots
tammielis
249
25k
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コンポーネント、
ユーティリティ集を含む 総合的なツールキット https://yuanqing.github.io/create-figma-plugin/
Demo
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
None
@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!