Making Figma plugins with TypeScript

Transcript

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