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.3k
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
510
さようならRxSwift こんにちは*****
temoki
1
310
Androidで不安定なPlatform Viewsとの闘い
temoki
0
770
iOSパッケージマネージャー奮闘記 完結編
temoki
2
510
事業譲渡を受けたアプリとの統合で失敗、 そしてユーザーからの評価回復に至るまで
temoki
1
580
Apple Vision Proデベロッパラボに参加してきた
temoki
0
440
年末年始の成果、そして現状の紹介
temoki
0
180
Apple HIGのススメ
temoki
0
270
ChatGPTにSVGでお絵描きさせる
temoki
0
590
Other Decks in Design
See All in Design
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
130
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
200
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
510
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
430
Marp + TailWind CSS でスライドをきれいにする
maea2
0
170
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
330
aya_murakami_portfolio
ayakaimi1101
0
1.8k
マンガで分かるサービスデザインガイドライン
senryakuka
1
860
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
380
UXデザインはなぜ定着しないのか?
designstudiopartners
0
560
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
230
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.4k
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Designing Experiences People Love
moore
142
24k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Writing Fast Ruby
sferik
628
61k
A Tale of Four Properties
chriscoyier
159
23k
Code Review Best Practice
trishagee
68
18k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
YesSQL, Process and Tooling at Scale
rocio
172
14k
4 Signs Your Business is Dying
shpigford
183
22k
Building an army of robots
kneath
306
45k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
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プラグインつくってみませんか? 為せば成る、為さねば成らぬ、何事も、成らぬは⼈の為さぬなりけり