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
3k
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.6k
なぜコピペで使うコンポーネント集を利用するのか?
mottox2
8
6.9k
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
mottox2
7
3.8k
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
640
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.7k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
620
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
3.1k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
33k
プレイヤー目線の技術ブランディング / personal branding
mottox2
4
4.3k
Other Decks in Design
See All in Design
Goodpatch Tour💙 / We are hiring!
goodpatch
31
790k
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
280
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
270
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
1
140
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
190
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
320
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
620
How to go from research data to insights?
mastervicedesign
0
220
横断組織デザイナーの働き方
mixi_design
PRO
0
330
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
270
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3k
Masked shaman-Storyboard 2025
ashley0521
0
160
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How to Ace a Technical Interview
jacobian
276
23k
Thoughts on Productivity
jonyablonski
69
4.5k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Practical Orchestrator
shlominoach
186
10k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Designing for humans not robots
tammielis
250
25k
A Tale of Four Properties
chriscoyier
158
23k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
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!