Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
930
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
2
1.1k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
810
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
590
Bulletproof Design System with TypeScript
takanorip
7
4.5k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
220
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
980
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.6k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.1k
早わかり W3C Community Group
takanorip
0
540
Other Decks in Technology
See All in Technology
エンジニアとPMのドメイン知識の溝をなくす、 AIネイティブな開発プロセス
applism118
4
1.3k
Challenging Hardware Contests with Zephyr and Lessons Learned
iotengineer22
0
190
チーリンについて
hirotomotaguchi
6
1.9k
[デモです] NotebookLM で作ったスライドの例
kongmingstrap
0
140
Fashion×AI「似合う」を届けるためのWEARのAI戦略
zozotech
PRO
2
310
因果AIへの招待
sshimizu2006
0
970
世界最速級 memcached 互換サーバー作った
yasukata
0
340
Debugging Edge AI on Zephyr and Lessons Learned
iotengineer22
0
180
【AWS re:Invent 2025速報】AIビルダー向けアップデートをまとめて解説!
minorun365
4
520
大企業でもできる!ボトムアップで拡大させるプラットフォームの作り方
findy_eventslides
1
760
文字列の並び順 / Unicode Collation
tmtms
3
570
AI 駆動開発勉強会 フロントエンド支部 #1 w/あずもば
1ftseabass
PRO
0
350
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
432
66k
Practical Orchestrator
shlominoach
190
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Designing for humans not robots
tammielis
254
26k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
730
Statistics for Hackers
jakevdp
799
230k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.3k
Producing Creativity
orderedlist
PRO
348
40k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
1k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
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!