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

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

mottox2
September 07, 2022
Design
1
160

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

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

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

mottox2

September 07, 2022
Tweet

More Decks by mottox2

See All by mottox2
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
360
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.2k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
360
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
2.7k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
29k
プレイヤー目線の技術ブランディング / personal branding
mottox2
4
3.1k
JSXで作るDSL / jsx-dsl
mottox2
1
1.5k
SSRを検討する際にSSGも検討しませんか？ / ssr or ssg
mottox2
15
9.2k
Next.js meets Netlify
mottox2
3
1.4k

Other Decks in Design

See All in Design
認知科学コーチング
fuj1mann
0
320
CHOKOKU COMPANY DECK ver0.5 0816
naotaka
0
210
yamanohanabuta logoguideline
misamochimasu
0
320
ブランドイメージを戦略的に浸透させる VI策定プロセス
sevendex
3
230
デザインシステムと画面パターン
fkady
0
470
Visional 新卒デザイナー向け 会社説明資料 / Visional Company Briefing for Designer
visional_design
6
3.7k
Forget-me-not
kackington
1
330
Design System Build #01 | RAKSUL
itoz
3
520
コミュニケーションデザイン組織のタタキ台 - SmartHR Communication Design Group
bebe
11
20k
認知科学のススメ
takanorip
4
3.2k
WIP croco
rottentwinkies
1
110
Visionalが運用する「コミュニケーションデザイン評価モデル」/ Visional Communication Design Evaluation Model
visional_design
3
900

Featured

See All Featured
Visualization
eitanlees
126
12k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.2k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
10k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
12
5k
Happy Clients
brianwarren
89
5.7k
Testing 201, or: Great Expectations
jmmastey
23
5.5k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
6
2.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
Robots, Beer and Maslow
schacon
152
7.2k
Web development in the modern age
philhawksworth
197
9.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
239
11k

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!