Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Figma Plugin公開までの壁を乗り越える

Avatar for mottox2 mottox2
September 07, 2022
Design
3
3.4k

Figma Plugin公開までの壁を乗り越える

『Figmaお楽しみトーク Vol.2』の登壇資料です

Create Figma Plugin https://yuanqing.github.io/create-figma-plugin/
Avatar for mottox2

mottox2

September 07, 2022
Tweet

More Decks by mottox2

See All by mottox2
もう一歩進めたい OG画像の動的生成
Avatar for mottox2 mottox2
7
1.8k
なぜコピペで使うコンポーネント集を利用するのか？
Avatar for mottox2 mottox2
8
7.2k
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
Avatar for mottox2 mottox2
7
3.9k
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
Avatar for mottox2 mottox2
0
680
手触りのよいウェブを考える / better-mobile-web
Avatar for mottox2 mottox2
3
1.8k
組織と権限とSlack App / slack-app-with-roles
Avatar for mottox2 mottox2
1
660
SSRを避けるためにやっていること / ssr-alternative
Avatar for mottox2 mottox2
9
3.2k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
Avatar for mottox2 mottox2
7
33k
プレイヤー目線の技術ブランディング / personal branding
Avatar for mottox2 mottox2
4
4.4k

Other Decks in Design

See All in Design
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
360
The Golden Whitney
Avatar for OhTristanArt ohtristanart
PRO
0
570
ブランドパーソナリティ言語化における生成AI活用の実際
Avatar for Hiroki Hosaka h0sa
0
180
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
Avatar for Shota Ikeyatsu ikeyatsu
2
1.8k
DC Style Redesign
Avatar for Brynn McDucky P. mcduckyart
0
140
デフォルトの16:9（960*540px）のケース / Google Slide Size Test
Avatar for Arthur arthur1
0
3k
アクセシビリティに取り組むメリット
Avatar for Rikiya Ihara / magi magi1125
1
210
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
Avatar for 北見海貴 kitami
1
230
【最新】マズロー安達の弟子実績（1期-4期の26人分）
Avatar for マズロー安達 maslow_akkun
0
670
Yumika Yamada Portfolio
Avatar for Yumii yumii
0
880
読書シェア会 vol.5 / Yumemi.grow 20250526
Avatar for Rakus_Dev rakus_dev
0
1.6k
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
Avatar for kkaru kkaru
0
470

Featured

See All Featured
KATA
Avatar for Megan Lloyd mclloyd
30
14k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
840
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.9k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.1k
A better future with KSS
Avatar for Kyle Neath kneath
238
17k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k

Transcript

  1. Figma Plugin/Widget 公開までの壁を乗り越える Figmaお楽しみトーク vol.2 @mottox2

  2. @mottox2

  3. Japanese Font Mixer Plugin

  4. Simple Markdown Notes Widget

  5. 初プラグインを公開するまでに お蔵入りになったものがある 公開だけがゴールではないけど・ ・ ・

  6. Figmaプラグイン開発どこまでやった？ C プラグインを利用してい1 C プラグイン開発を試したことがあ1 C プラグインで機能を実装したことがあ1 C プラグインを公開したことがある

  7. Figmaプラグイン開発どこまでやった？ C プラグインを利用してい1 C プラグイン開発を試したことがあ1 C プラグインで機能を実装したことがあ1 C プラグインを公開したことがある 自分はずっと実装止まりだった

  8. Figmaプラグイン開発どこまでやった？ C プラグインを利用してい1 C プラグイン開発を試したことがあ1 C プラグインで機能を実装したことがあ1 C プラグインを公開したことがある ここのハードルが高い

  9. プラグイン公開への ハードルを下げるヒント 今日話すこと

  10. 前提 9 FigmaPluginやWidgetの機能は実装してい 9 大きなものではなく小さなツール的なものを作っている

  11. なにがハードルになっているのか？ 1. 開発環境の設定 2. UIの整備 3. ストア掲載情報の準備

  12. 開発環境の設定 a デスクトップアプリから作るテンプレートは最初の一歩と してはいいが、 作り続けていくうちに辛くな$ a `@figma/create-widget`がいい感じのものを吐き出す が、 プラグイン向けに同等のものはない

  13. UIの整備 QドキュメントによるとFigmaとの一貫性を保つことが推奨 されていE Q 紹介されているCSS/JSはあまり使い勝手がよくない https://www.figma.com/plugin-docs/figma-components

  14. ストア掲載情報の準備 % 最初の設定が単純にめんどくさ2 % アイコンとカバー画像が必F % プラグインの出来がよくないとやる気がでない

  15. 1. 開発環境の設定 2. UIの整備

  16. 解決策 Create Figma Pluginを使う

  17. Create Figma Pluginとは W 作者はShopifyのデザイナー@yuanqing9 W Figmaプラグイン開発におけるテンプレートの展開、 ビル ド周りの整備、 UIコンポーネント、

    ユーティリティ集を含む 総合的なツールキット https://yuanqing.github.io/create-figma-plugin/

  18. Demo

  19. DEMO A npx create-figma-plugi9 A npm install; npm run watch2

    A Figma側で生成されたmanifest.jsonをimportす A プラグインの実装を行う

  20. @create-figma-plugin/build S PluginもWidgetも同じCLIから作れs S Preact前提でエントリーポイントが隠蔽されていて、 ui.tsx でexport defaultしたコンポーネントがマウントされs & 余計なものが見えないのでシンプルに扱える

  21. @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

  22. @create-figma-plugin/ui # Preact製のUIコンポーネントライブラf # Storybookのページが公開されていb # https://yuanqing.github.io/create-figma-plugin/ storybook

  23. None

  24. @create-figma-plugin/utilities ( Figmaプラグイ ン開発に使えるUtilityが用意されていF ( Events, Node, Color, Settings系はよくつか (

    特にEvent系Utilityはお気に入り

  25. 3. ストア掲載情報の準備

  26. おまけ: ストア情報を揃える u ストア情報を入力するので一番大変なのは画像づくE u スクショをうまく使って作るのが7 u Communityの先人の知恵をお借りするのがよさそS u 気に入らなくてもストア情報の更新は後からでもできる

  27. おわりに H Create Figma Pluginに乗っておけば公開までに迷うこと が減$ H ストアは先人の知恵を借りてある程度楽にな$ H あとは気持ち次第

  28. Thank you!