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
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
260
(第1回) アーキテクト・テックリード育成講座
masakaya
0
160
横断組織デザイナーの働き方
mixi_design
PRO
0
330
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
66k
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
210
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
190
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
980
aya_murakami_portfolio
ayakaimi1101
0
1.1k
プロダクトデザインの「守破離」の「破」について
hayashirine
0
310
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
550
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.4k
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Unsuck your backbone
ammeep
669
57k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
The Language of Interfaces
destraynor
156
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Embracing the Ebb and Flow
colly
84
4.6k
Practical Orchestrator
shlominoach
186
10k
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!