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
410
さようならRxSwift こんにちは*****
temoki
1
260
Androidで不安定なPlatform Viewsとの闘い
temoki
0
680
iOSパッケージマネージャー奮闘記 完結編
temoki
2
450
事業譲渡を受けたアプリとの統合で失敗、 そしてユーザーからの評価回復に至るまで
temoki
1
540
Apple Vision Proデベロッパラボに参加してきた
temoki
0
390
年末年始の成果、そして現状の紹介
temoki
0
140
Apple HIGのススメ
temoki
0
240
ChatGPTにSVGでお絵描きさせる
temoki
0
540
Other Decks in Design
See All in Design
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
140
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
220
クライアントワークにおける UXリサーチの実践
kozotaira
0
380
Les petites aventures de CSS, saison 2025
goetter
3
4k
デザイナーとPMの両ロール_3つのポイント
toy1618
1
210
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
940
Rayout Pattern 01
one0
0
1.5k
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.7k
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
kiyoshifuwa
0
130
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
3.7k
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
2
300
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
290
Featured
See All Featured
The Cult of Friendly URLs
andyhume
78
6.2k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
How STYLIGHT went responsive
nonsquared
99
5.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
540
GraphQLとの向き合い方2022年版
quramy
44
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
For a Future-Friendly Web
brad_frost
176
9.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
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プラグインつくってみませんか? 為せば成る、為さねば成らぬ、何事も、成らぬは⼈の為さぬなりけり