Tweet
Tweet

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!