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
3
3.4k
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.8k
なぜコピペで使うコンポーネント集を利用するのか?
mottox2
8
7.2k
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
mottox2
7
3.9k
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
680
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.8k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
660
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
3.2k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
33k
プレイヤー目線の技術ブランディング / personal branding
mottox2
4
4.4k
Other Decks in Design
See All in Design
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
380
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
680
harutaka Vision Deck
zenkigenforrecruit
0
150
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
260
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
Kid Cowboy 103
marilutwin
0
270
Crisp Code inc. ブランドガイドライン
so_kotani
1
190
AI動画生成ガチャ紹介
piyo7
1
130
CMS管理画面のアクセシビリティ
magi1125
7
2.1k
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
290
今日から意識できるアクセシビリティ
fumiko
0
250
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4k
Featured
See All Featured
Site-Speed That Sticks
csswizardry
10
690
Mobile First: as difficult as doing things right
swwweet
223
9.7k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Docker and Python
trallard
44
3.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Making Projects Easy
brettharned
116
6.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
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!