Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Making Figma plugins with TypeScript

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for takanorip takanorip
June 24, 2019
Technology
960
2

Making Figma plugins with TypeScript

Avatar for takanorip

takanorip

June 24, 2019

More Decks by takanorip

See All by takanorip
AI-Slopなデザインを生まないためのデザインプロセス戦略
Avatar for takanorip takanorip
6
4.2k
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
4
1.2k
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
2.8k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
1.2k
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
800
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
5.2k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
300
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
6
1.1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.9k

Other Decks in Technology

See All in Technology
CDKで書くECSのベストプラクティス、 改めて考え直す2026 #cdkconf2026
Avatar for maki makies
3
910
「休む」重要さ
Avatar for Makky12 smt7174
5
1.5k
データエンジニアリングとドメイン駆動設計
Avatar for 増田 亨 masuda220
PRO
14
2.3k
Devsumi 2026 Summer 人もAIも使える共通基盤を事業の加速装置にする～デザインシステム運用に学ぶ組織レバレッジ～ 渡辺 凌央
Avatar for LegalOn Technologies, Inc legalontechnologies
PRO
1
280
AI_Dev_Day_製造業領域でのAI活用から見た活用の罠と成功に導く実践知.pdf
Avatar for KintoTech_Dev kintotechdev
0
120
Kaggleで成長するために意識したこと
Avatar for Chikuwabu prgckwb
2
440
シンガポールで登壇してきます
Avatar for Yuuki Yamashita yama3133
0
340
インシデント事例と
パッケージの全量解析に学ぶ
ソフトウェアサプライチェーンの守り方 / supply-chain-attack-defense
Avatar for GMO Flatt Security flatt_security
0
840
非定型なドキュメントを効率よくリファクタする 〜えぇ！？仕様書27本の移行が1日で終わったって！？〜
Avatar for subroh_0508 subroh0508
2
600
AI時代のPlaywright活用(システムテストを自動化する ー 実行エンジンにPla ywrightを選んだ理由)
Avatar for 西田泰明 ynisqa1988
2
900
JAWS_ICEBERG_BASECAMP
Avatar for IQBocchi iqbocchi
2
110
AIと1000本ノックしてたどり着いた、最速のプロダクト開発 ～toC向けAIエージェントUXを、動く選択肢とAIキャパシティで設計する～ 
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
110

Featured

See All Featured
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
310
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
2.1k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
190
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
240
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
770
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.1k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.4k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.7k

Transcript

  1. Figma Pluginを
 作ろう！ takanorip 2019/06/14 Ginza.js#2

  2. 自己紹介 • takanorip / @takanoripe / Takanori Oki • 半蔵門付近の会社にいる


    フロントエンドエンジニア • React / Web Components / Nuxt.js / 
 ウェブフォント / Figma / etc…
  3. None

  4. Figma?

  5. 「Figma Design」 で検索！

  6. Figma • デザインツール & コミュニケーションツール • オンライン共同編集とか
 プロトタイピングとかができる • Web

    APIを提供いているのでGUIツールを
 作りやすい
  7. None

  8. Figma Plugins

  9. 今までよくあったやつ

  10. Figma自体は良いけど Plugin作れないから 不便だよね〜

  11. 今までできたこと • Chromeの拡張機能で実装
 → アプリ版だと使えないので不便… • Web APIを使ってGUIツールを開発
 → もっとコアな機能を自動化したいな…


    （図形の生成とかテキスト変更とか） • 手作業で頑張る→つらい

  12. が！しかし！ 6月11日に！ Figma Plugins Betaの アナウンスが！！！

  13. None

  14. https://www.figma.com/ developers/plugins

  15. Figma Plugins • Figmaの機能（チームライブラリなども
 含む）にAPI経由で自由にアクセスできる
 便利なやつ • Figmaのsandbox内で動作する • TypeScriptで書ける

  16. 引用：Figma公式ドキュメント Web Worker Browser

  17. 作り方

  18. None
  19. None
  20. None

  21. コード

  22. code.ts

  23. 時間がないから 詳しいAPIは 公式Docを参照してくれ！

  24. manifest.json

  25. ui.html

  26. ui.html • iframeに表示される普通のHTML • Vue.jsやReact、Web Componentsなどを
 使用してもOK • window.parent.postMessageで本体と
 やり取りする

  27. 使い方

  28. None

  29. manifest.jsonを選択

  30. None

  31. Let's Try!