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
590
Making Figma plugins with TypeScript
takanorip
June 24, 2019
Tweet
Share
More Decks by takanorip
See All by takanorip
ソフトウェアエンジニアの教養を養う本
takanorip
1
14k
共創するためのデザイン批評
takanorip
7
3.2k
Figmaプラグイン 開発のすゝめ
takanorip
0
180
Headless Components Design
takanorip
0
43
10分で理解する HTML Modules
takanorip
1
420
Polymer Project 2020
takanorip
1
130
技術とデザインの間
takanorip
0
1.4k
Color in Interface Experience
takanorip
1
92
ウェブフォント今昔物語
takanorip
5
3.6k
Other Decks in Technology
See All in Technology
JAWS-UG re:Habilitaion 報告 / JAWS-UG OITA rehabilitation
hiranofumio
0
130
MySQL HeatWaveの新しいトピック! / MySQL HeatWave Update 202206
yoshiakiyamasaki
0
100
ラブグラフ紹介資料 〜プロダクト解体新書〜 / Lovegraph Product Deck
lovegraph
0
300
The Fractal Geometry of Software Design
vladikk
1
1.3k
OPENLOGI Company Profile
hr01
0
600
Camp Digital 2022: tailored advice
kyliehavelock
0
150
Apa itu DevOps & Kenapa perlu belajar DevOps?
dicodingevent
0
110
Persistence in Serverless Applications - ServerlessDays NYC
marcduiker
0
250
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
cybozuinsideout
PRO
2
1.9k
開発組織の生産性を可視化する State of DevOpsとFour Keysとは / deep dive into State of DevOps
yfcgpsebp
0
300
Building smarter apps with machine learning, from magic to reality
picardparis
4
3.2k
UIKitのアップデート #WWDC22
akatsuki174
4
340
Featured
See All Featured
The Invisible Side of Design
smashingmag
290
48k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
Code Review Best Practice
trishagee
43
9.3k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Building Adaptive Systems
keathley
25
1.1k
WebSockets: Embracing the real-time Web
robhawkes
57
5.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Building Applications with DynamoDB
mza
83
4.7k
GitHub's CSS Performance
jonrohan
1020
420k
How GitHub (no longer) Works
holman
296
140k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
10
3.4k
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!