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.4k
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
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
350
Liquid Glass を Metal Shader で描きたいだけの人生だった…
temoki
0
17
Skip Skip Run Run Run ♫
temoki
0
640
さようならRxSwift こんにちは*****
temoki
1
390
Androidで不安定なPlatform Viewsとの闘い
temoki
0
900
iOSパッケージマネージャー奮闘記 完結編
temoki
2
590
事業譲渡を受けたアプリとの統合で失敗、 そしてユーザーからの評価回復に至るまで
temoki
1
640
Apple Vision Proデベロッパラボに参加してきた
temoki
0
490
年末年始の成果、そして現状の紹介
temoki
0
220
Other Decks in Design
See All in Design
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
150
7 Core Values of Round-L
wired888
0
1.8k
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
3.3k
Bulletproof Design System with TypeScript
takanorip
7
4.1k
Them Middle School Kids Pitch
stevie_vee
0
140
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
170
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.5k
#Dubois Challenge 2025: Economics
ajstarks
1
170
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
2
1.2k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.4k
エンジニアでも捗る デザイナー的思考入門
tinykitten
1
1.2k
Memory Man v3 (WIP)
storybychad
PRO
0
2.6k
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
We Have a Design System, Now What?
morganepeng
53
7.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Facilitating Awesome Meetings
lara
55
6.5k
Balancing Empowerment & Direction
lara
3
620
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Done Done
chrislema
185
16k
Agile that works and the tools we love
rasmusluckow
330
21k
Unsuck your backbone
ammeep
671
58k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Thoughts on Productivity
jonyablonski
70
4.8k
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プラグインつくってみませんか? 為せば成る、為さねば成らぬ、何事も、成らぬは⼈の為さぬなりけり