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
2
940

Making Figma plugins with TypeScript

Avatar for takanorip

takanorip

June 24, 2019
Tweet

More Decks by takanorip

See All by takanorip
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
3
670
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
2.5k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
980
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
690
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.9k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
270
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.8k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2.2k

Other Decks in Technology

See All in Technology
俺の/私の最強アーキテクチャ決定戦開催 ― チームで新しいアーキテクチャに適合していくために / 20260322 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
440
Physical AI on AWS リファレンスアーキテクチャ / Physical AI on AWS Reference Architecture
Avatar for shota aws_shota
1
130
Phase06_ClaudeCode実践
Avatar for overflow ,Inc overflowinc
0
1.9k
スピンアウト講座01_GitHub管理
Avatar for overflow ,Inc overflowinc
0
1.3k
事例から紐解くSHIFT流QA支援 ～大規模プロジェクトの品質管理支援、QA組織立ち上げ～ / 20260320 Nozomu Koketsu
Avatar for SHIFT EVOLVE shift_evolve
PRO
0
140
QA組織のAI戦略とAIテスト設計システムAITASの実践
Avatar for SansanTech sansantech
PRO
1
120
AI時代のオンプレ-クラウドキャリアチェンジ考
Avatar for Yutaro Shirayama yuu0w0yuu
0
230
Embeddings : Symfony AI en pratique
Avatar for Grégoire Pineau lyrixx
0
190
詳解 強化学習 / In-depth Guide to Reinforcement Learning
Avatar for PRIN Lab prinlab
0
370
プログラミング不要！ テスト自動化における生成AI使いこなし術
Avatar for MagicPod magicpod
1
110
新規事業×QAの挑戦：不確実性を乗りこなす！フェーズごとに求められるQAの役割変革
Avatar for hacomono Inc. hacomono
PRO
0
180
ThetaOS - A Mythical Machine comes Alive
Avatar for Martijn aslander
0
160

Featured

See All Featured
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
230
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
88
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
270
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
400
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
52k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
130
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.8k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.2k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.5k

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!