Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Making Figma plugins with TypeScript
takanorip
June 24, 2019
Technology
2
450
Making Figma plugins with TypeScript
takanorip
June 24, 2019
Tweet
Share
More Decks by takanorip
See All by takanorip
takanorip
6
2.7k
takanorip
0
92
takanorip
0
20
takanorip
1
170
takanorip
1
77
takanorip
0
640
takanorip
1
66
takanorip
5
3.3k
takanorip
6
1k
Other Decks in Technology
See All in Technology
futo23
1
1.1k
jaguar_imo
0
110
ykanazawa
0
310
ihcomega56
2
140
gracia
0
850
noriyukitakei
0
1.1k
hgsgtk
1
840
jozono
6
1.1k
michigari
0
130
kateinoigakukun
0
120
tutsunom
1
320
quickxp5
0
100
Featured
See All Featured
aarron
258
36k
tammielis
237
23k
jakevdp
776
200k
mongodb
23
3.9k
davidbonilla
70
3.6k
brianwarren
82
4.8k
zenorocha
296
40k
keithpitt
402
20k
lauravandoore
440
28k
afnizarnur
176
14k
geoffreycrofte
25
1k
deanohume
294
28k
Transcript
Figma Pluginを 作ろう! takanorip 2019/06/14 Ginza.js#2
自己紹介 • takanorip / @takanoripe / Takanori Oki • 半蔵門付近の会社にいる
フロントエンドエンジニア • React / Web Components / Nuxt.js / ウェブフォント / Figma / etc…
None
Figma?
「Figma Design」 で検索!
Figma • デザインツール & コミュニケーションツール • オンライン共同編集とか プロトタイピングとかができる • Web
APIを提供いているのでGUIツールを 作りやすい
None
Figma Plugins
今までよくあったやつ
Figma自体は良いけど Plugin作れないから 不便だよね〜
今までできたこと • Chromeの拡張機能で実装 → アプリ版だと使えないので不便… • Web APIを使ってGUIツールを開発 → もっとコアな機能を自動化したいな…
(図形の生成とかテキスト変更とか) • 手作業で頑張る→つらい
が!しかし! 6月11日に! Figma Plugins Betaの アナウンスが!!!
None
https://www.figma.com/ developers/plugins
Figma Plugins • Figmaの機能(チームライブラリなども 含む)にAPI経由で自由にアクセスできる 便利なやつ • Figmaのsandbox内で動作する • TypeScriptで書ける
引用:Figma公式ドキュメント Web Worker Browser
作り方
None
None
None
コード
code.ts
時間がないから 詳しいAPIは 公式Docを参照してくれ!
manifest.json
ui.html
ui.html • iframeに表示される普通のHTML • Vue.jsやReact、Web Componentsなどを 使用してもOK • window.parent.postMessageで本体と やり取りする
使い方
None
manifest.jsonを選択
None
Let's Try!