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
100
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
780
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.9k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.8k
早わかり W3C Community Group
takanorip
0
460
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
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
180
Pwned Labsのすゝめ
ken5scal
2
450
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
320
生成AI “再”入門 2025年春@WIRED TUESDAY EDITOR'S LOUNGE
kajikent
0
120
日経のデータベース事業とElasticsearch
hinatades
PRO
0
240
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
210
EDRの検知の仕組みと検知回避について
chayakonanaika
12
4.9k
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
180
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
180
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
160
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
210
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
180
Featured
See All Featured
Building an army of robots
kneath
303
45k
Become a Pro
speakerdeck
PRO
26
5.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
BBQ
matthewcrist
87
9.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Adopting Sorbet at Scale
ufuk
74
9.2k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
A Tale of Four Properties
chriscoyier
158
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Facilitating Awesome Meetings
lara
52
6.2k
Side Projects
sachag
452
42k
Navigating Team Friction
lara
183
15k
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!