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…
3. None

4. Figma?

5. 「Figma Design」 で検索！

6. Figma • デザインツール & コミュニケーションツール • オンライン共同編集とか
 プロトタイピングとかができる • Web

   APIを提供いているのでGUIツールを
 作りやすい
7. None

8. Figma Plugins

9. 今までよくあったやつ

10. Figma自体は良いけど Plugin作れないから 不便だよね〜

11. 今までできたこと • Chromeの拡張機能で実装
 → アプリ版だと使えないので不便… • Web APIを使ってGUIツールを開発
 → もっとコアな機能を自動化したいな…


    （図形の生成とかテキスト変更とか） • 手作業で頑張る→つらい

12. が！しかし！ 6月11日に！ Figma Plugins Betaの アナウンスが！！！

13. None

14. https://www.figma.com/ developers/plugins

15. Figma Plugins • Figmaの機能（チームライブラリなども
 含む）にAPI経由で自由にアクセスできる
 便利なやつ • Figmaのsandbox内で動作する • TypeScriptで書ける

16. 引用：Figma公式ドキュメント Web Worker Browser

17. 作り方

18. None
19. None
20. None

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. 使い方

28. None

29. manifest.jsonを選択

30. None

31. Let's Try!