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プラグイン開発のススメ
Search
Tomoki Kobayashi
May 28, 2023
Design
0
1.2k
Figmaプラグイン開発のススメ
名古屋Figma勉強会 #01 での発表資料
https://connpass.com/event/283140/
Tomoki Kobayashi
May 28, 2023
Tweet
Share
More Decks by Tomoki Kobayashi
See All by Tomoki Kobayashi
Skip Skip Run Run Run ♫
temoki
0
380
さようならRxSwift こんにちは*****
temoki
1
250
Androidで不安定なPlatform Viewsとの闘い
temoki
0
650
iOSパッケージマネージャー奮闘記 完結編
temoki
2
430
事業譲渡を受けたアプリとの統合で失敗、 そしてユーザーからの評価回復に至るまで
temoki
1
520
Apple Vision Proデベロッパラボに参加してきた
temoki
0
370
年末年始の成果、そして現状の紹介
temoki
0
130
Apple HIGのススメ
temoki
0
230
ChatGPTにSVGでお絵描きさせる
temoki
0
520
Other Decks in Design
See All in Design
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
140
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
130
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
kiyoshifuwa
0
120
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
66k
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
470
Personal Story Sequence - Vendetta(WIP)
elrns88
0
400
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
430
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
230
発表資料テンプレート / My slide template
thatblue
0
200
Dive Deep into Communication
yomtsu
0
210
TUNAG BOOK 2024
stmn
0
470
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1367
200k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Thoughts on Productivity
jonyablonski
69
4.5k
Navigating Team Friction
lara
183
15k
Gamification - CAS2011
davidbonilla
80
5.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Code Review Best Practice
trishagee
66
17k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Code Reviewing Like a Champion
maltzj
521
39k
Why Our Code Smells
bkeepers
PRO
335
57k
It's Worth the Effort
3n
184
28k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Transcript
⼩さな課題解決からはじめる Figmaプラグイン開発のススメ 2023.05.28 名古屋Figma勉強会
発表テーマの背景
Figmaデータを読み解くのに苦労した NO MORE TOFU • 前職では創業当初からFont Awesomeの アイコンをアプリの各所で使⽤していた
(FigmaにFont Awesomeフォント組み込み) • Figmaでアイコンを⾒ると が出現! • Inspectを⾒ても何のアイコンかわからない… • デザイナーにその都度確認するしかない… • もしかしたらプラグインがあるかも…!?
そんなプラグインは⾒つからず
Figmaプラグインを作ってみよう!
Figmaプラグイン開発に必要な技術 為せば成る、為さねば成らぬ、何事も、成らぬは⼈の為さぬなりけり • Figmaプラグインはウェブ技術により動いている • 動作は Java Script で記述し、UIは HTML
で構築する • デザイナーでも簡単な動的ウェブサイトのコーディング経験があればできる • Figma公式ドキュメントがイラストやアニメーションで丁寧に教えてくれる • (⾃分も簡単なウェブサイトコーディングくらいの知識しかなかった)
プラグイン開発をはじめる Figmaデスクトップアプリが助けてくれる • Figmaデスクトップアプリで雛形を作成 • npmでFigmaプラグイン開発のための パッケージをインストール • VScode等で
code.js と ui.html の 2つを変更する • Figmaデスクトップアプリで開発中の プラグインをデバッグ https://www. fi gma.com/plugin-docs/plugin-quickstart-guide/
プラグイン動作の仕組み code.js と ui.html の間でメッセージをやりとりする code.js ui.html 矩形作成ボタンが押されたよ! 今のページに矩形作ったよ! https://www.
fi gma.com/plugin-docs/how-plugins-run
Figmaデータのなかみ ノードのツリー構造 • Documentノード • Pageノード • Frameノード • Frameノード
• Textノード • Textノード • Frameノード • …
Figmaプラグインを設計する 課題:Font Awesomeのアイコン名をわかるようにしたい
どんなプラグインにすればよいのか? FigmaでFont Awesomeのアイコン名をわかるようにしたい • 初めに考えたのはエンジニアがプラグインを使って アイコン名を確認できるようにすること • しかしプラグインの実⾏は有料プランのユーザーのみだった •
エンジニアは閲覧だけなので無料プランを利⽤していた • ではデザイナーにてアイコン名がわかるように何とかする • Textの名前が になっているのをアイコン名に変更すれば良いのでは? • デザイン作業後、エンジニアに共有する前に⼀括変換できればいいのでは? user / f 0 0 7
プラグインを設計する ① Font Awesomeのアイコンを⾒つけて名前を変更する • 編集中のページの⼦ノード→孫ノード… と下に辿ってTextノードを⾒つける • Textノードがアイコンかどうかを判定 •
フォントがFont Awesome • 1⽂字だけ • ⾒つかったアイコンを表⽰して ユーザーに名前を変更してよいか確認 • その⽂字のコード(Unicode)から アイコン名を調べて名前に反映する
プラグインを設計する ① Font Awesomeのアイコンを⾒つけて名前を変更する • 編集中のページの⼦ノード→孫ノード… と下に辿ってTextノードを⾒つける • Textノードがアイコンかどうかを判定 •
フォントがFont Awesome • 1⽂字だけ • ⾒つかったアイコンを表⽰して ユーザーに名前を変更してよいか確認 • その⽂字のコード(Unicode)から アイコン名を調べて名前に反映する
プラグインを設計する ① Font Awesomeのアイコンを⾒つけて名前を変更する • 編集中のページの⼦ノード→孫ノード… と下に辿ってTextノードを⾒つける • Textノードがアイコンかどうかを判定 •
フォントがFont Awesome • 1⽂字だけ • ⾒つかったアイコンを表⽰して ユーザーに名前を変更してよいか確認 • その⽂字のコード(Unicode)から アイコン名を調べて名前に反映する
プラグインを設計する ② ⽂字コードからFont Awesomeのアイコン名を引くには? • Font AwesomeのGitHubリポジトリに 公開されているアイコン情報を使⽤ •
⽂字コードからアイコン名を引くための 辞書を作ってプラグインに組み込む https://github.com/FortAwesome/Font-Awesome/tree/ d 3 a 7 8 1 8 c 2 5 3 fcba ff f 9 ebd 1 d 4 abb 2 8 6 6 c 1 9 2 e 1 d 7 /metadata
Awesome Icon Label Writer
Figmaプラグインを公開してみた
None
https://www. fi gma.com/community/plugin/ 1 1 0 3 9 9 7
5 2 5 6 3 0 1 9 1 4 6 9 クリック!
プラグインを公開するには? Figmaデスクトップアプリが助けてくれる • Figmaデスクトップアプリの Community画⾯でPublishボタンを押す • 開発したプラグインを選択して、 あとは必要事項を⼊⼒して提出 •
審査に通れば公開!
プラグインを公開してみて ぶっちゃけ良いことだらけ • 社内メンバーにとても喜んでもらえた (簡単な機能でも業務課題をしっかり解決) • ⾃分⾃⾝としてもFigmaを⾒ながらの UI実装効率がUPしていることを実感
• FigmaからのWeekly Reportが嬉しい • リリースから1年で約5,000ユーザーまで増加 (社外でも同様のニーズがあった)
Figmaプラグインつくってみませんか? 為せば成る、為さねば成らぬ、何事も、成らぬは⼈の為さぬなりけり