Making Figma plugins with TypeScript

Making Figma plugins with TypeScript

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

June 24, 2019
Tweet

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!