Slide 1
Slide 1 text
Figma Pluginを
作ろう！
takanorip
2019/06/14 Ginza.js#2
Slide 2
Slide 2 text
自己紹介
• takanorip / @takanoripe / Takanori Oki
• 半蔵門付近の会社にいる
フロントエンドエンジニア
• React / Web Components / Nuxt.js /
ウェブフォント / Figma / etc…
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Figma?
Slide 5
Slide 5 text
「Figma Design」
で検索！
Slide 6
Slide 6 text
Figma
• デザインツール & コミュニケーションツール
• オンライン共同編集とか
プロトタイピングとかができる
• Web APIを提供いているのでGUIツールを
作りやすい
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Figma Plugins
Slide 9
Slide 9 text
今までよくあったやつ
Slide 10
Slide 10 text
Figma自体は良いけど
Plugin作れないから
不便だよね〜
Slide 11
Slide 11 text
今までできたこと
• Chromeの拡張機能で実装
→ アプリ版だと使えないので不便…
• Web APIを使ってGUIツールを開発
→ もっとコアな機能を自動化したいな…
（図形の生成とかテキスト変更とか）
• 手作業で頑張る→つらい
Slide 12
Slide 12 text
が！しかし！
6月11日に！
Figma Plugins Betaの
アナウンスが！！！
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
https://www.figma.com/
developers/plugins
Slide 15
Slide 15 text
Figma Plugins
• Figmaの機能（チームライブラリなども
含む）にAPI経由で自由にアクセスできる
便利なやつ
• Figmaのsandbox内で動作する
• TypeScriptで書ける
Slide 16
Slide 16 text
引用：Figma公式ドキュメント
Web Worker Browser
Slide 17
Slide 17 text
作り方
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
コード
Slide 22
Slide 22 text
code.ts
Slide 23
Slide 23 text
時間がないから
詳しいAPIは
公式Docを参照してくれ！
Slide 24
Slide 24 text
manifest.json
Slide 25
Slide 25 text
ui.html
Slide 26
Slide 26 text
ui.html
• iframeに表示される普通のHTML
• Vue.jsやReact、Web Componentsなどを
使用してもOK
• window.parent.postMessageで本体と
やり取りする
Slide 27
Slide 27 text
使い方
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
manifest.jsonを選択
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Let's Try!