Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Making Figma plugins with TypeScript
Search
takanorip
June 24, 2019
Technology
2
860
Making Figma plugins with TypeScript
takanorip
June 24, 2019
Tweet
Share
More Decks by takanorip
See All by takanorip
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
96
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
760
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.8k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.7k
早わかり W3C Community Group
takanorip
0
450
Ubieとアクセシビリティのこれからを考える
takanorip
0
420
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
Other Decks in Technology
See All in Technology
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.2k
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
プロセス改善による品質向上事例
tomasagi
1
1.6k
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.1k
現場で役立つAPIデザイン
nagix
29
10k
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
Bounded Context: Problem or Solution?
ewolff
1
210
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
170
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
Featured
See All Featured
Building an army of robots
kneath
302
45k
Being A Developer After 40
akosma
89
590k
GitHub's CSS Performance
jonrohan
1030
460k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Documentation Writing (for coders)
carmenintech
67
4.6k
Done Done
chrislema
182
16k
The Invisible Side of Design
smashingmag
299
50k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Docker and Python
trallard
44
3.3k
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!