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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
takanorip
June 24, 2019
Technology
2
940
Making Figma plugins with TypeScript
takanorip
June 24, 2019
Tweet
Share
More Decks by takanorip
See All by takanorip
Design System Documentation Tooling 2025
takanorip
3
2.3k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
890
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
650
Bulletproof Design System with TypeScript
takanorip
7
4.7k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
250
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.7k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.2k
早わかり W3C Community Group
takanorip
0
550
Other Decks in Technology
See All in Technology
Introduction to Bill One Development Engineer
sansan33
PRO
0
360
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
17k
プロポーザルに込める段取り八分
shoheimitani
1
240
AWS Network Firewall Proxyを触ってみた
nagisa53
1
230
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
bwkw
3
930
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
10k
データの整合性を保ちたいだけなんだ
shoheimitani
8
3.1k
Red Hat OpenStack Services on OpenShift
tamemiya
0
110
クレジットカード決済基盤を支えるSRE - 厳格な監査とSRE運用の両立 (SRE Kaigi 2026)
capytan
6
2.7k
StrandsとNeptuneを使ってナレッジグラフを構築する
yakumo
1
120
ZOZOにおけるAI活用の現在 ~開発組織全体での取り組みと試行錯誤~
zozotech
PRO
5
5.4k
Cosmos World Foundation Model Platform for Physical AI
takmin
0
880
Featured
See All Featured
Exploring anti-patterns in Rails
aemeredith
2
250
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.8k
We Are The Robots
honzajavorek
0
160
What does AI have to do with Human Rights?
axbom
PRO
0
2k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
1.8k
Six Lessons from altMBA
skipperchong
29
4.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.1k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
54
Claude Code のすすめ
schroneko
67
210k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.2k
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
0
200
Writing Fast Ruby
sferik
630
62k
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!