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
490
さようならRxSwift こんにちは*****
temoki
1
300
Androidで不安定なPlatform Viewsとの闘い
temoki
0
760
iOSパッケージマネージャー奮闘記 完結編
temoki
2
490
事業譲渡を受けたアプリとの統合で失敗、 そしてユーザーからの評価回復に至るまで
temoki
1
570
Apple Vision Proデベロッパラボに参加してきた
temoki
0
420
年末年始の成果、そして現状の紹介
temoki
0
170
Apple HIGのススメ
temoki
0
260
ChatGPTにSVGでお絵描きさせる
temoki
0
570
Other Decks in Design
See All in Design
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
1
250
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
220
ほしいテンプレート制作から始めるツール学習のススメ📝
60d
0
120
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
220
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
530
苦労が多かった多言語対応をFigmaで楽にした話
pioneer_devrel
PRO
0
190
CIRCULAR ECONOMY + SERVICES
jmanooch
0
110
線で考える画面構成
natsuume
1
850
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
1
910
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
330
Goodpatch Tour💙 / We are hiring!
goodpatch
31
830k
portfolio_YumiYasuda
yum0418
0
240
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
A Modern Web Designer's Workflow
chriscoyier
693
190k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
105
19k
Being A Developer After 40
akosma
91
590k
Designing for humans not robots
tammielis
253
25k
Docker and Python
trallard
44
3.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
33k
It's Worth the Effort
3n
184
28k
Agile that works and the tools we love
rasmusluckow
329
21k
Visualization
eitanlees
146
16k
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プラグインつくってみませんか? 為せば成る、為さねば成らぬ、何事も、成らぬは⼈の為さぬなりけり