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

Making Figma plugins with TypeScript

Avatar for takanorip takanorip
June 24, 2019
Technology
950
2

Making Figma plugins with TypeScript

Avatar for takanorip

takanorip

June 24, 2019

More Decks by takanorip

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

Other Decks in Technology

See All in Technology
小さいVue.jsを30分で作る
Avatar for Hal hal_spidernight
0
150
Building Production-Ready Agents Microsoft Agent Framework
Avatar for Mert Metin _mertmetin
0
160
ボトムアップの改善の火を灯し続けろ！〜支援現場で学んだ、消えないための3つの打ち手〜 / 20260509 Kazuki Mori
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
620
多角的な視点から見たAGI
Avatar for Terisuke terisuke
0
130
Modernizing Your HCL Connections Experience: Visual Report to chain, Profile Enhancements, and AI Integration
Avatar for Wannes Rams wannesrams
0
300
もっとコンテンツをよく構造化して理解したいので、LLM 時代こそ Taxonomy の設計品質に目を向けたい〜！
Avatar for MasatoMasaMasa morinota
0
240
世界の中心でApp Runnerを叫ぶ FINAL
Avatar for つくぼし tsukuboshi
0
260
AI時代の品質はテストプロセスの作り直し #scrumniigata
Avatar for kyonmm kyonmm
PRO
4
1.4k
Agent Skillsで実現する記憶領域の運用とその後
Avatar for yamadashy / やまだし yamadashy
2
1.6k
OWASP APTSを眺めてみた
Avatar for su3158 su3158
0
130
PdM・Eng・QAで進めるAI駆動開発の現在地/aidd-with-pdm-eng-qa
Avatar for butatamasoba / Shota Kusaba / 草場翔太 shota_kusaba
0
170
アプリブロック機能のつくりかたと、AIとHTMLの不合理な相性の良さについて
Avatar for kumamotone kumamotone
1
230

Featured

See All Featured
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
390
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
280
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
450
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.2k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
240
Leo the Paperboy
Avatar for Maya Tellez mayatellez
7
1.7k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.6k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.1k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
360
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.2k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.2k

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!