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

Making Figma plugins with TypeScript

78f5efc1e98c71e473cc7827de1c5db4?s=47 takanorip
June 24, 2019
Technology
2
590

Making Figma plugins with TypeScript

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

June 24, 2019
Tweet

More Decks by takanorip

See All by takanorip
ソフトウェアエンジニアの教養を養う本
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
1
14k
共創するためのデザイン批評
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
7
3.2k
Figmaプラグイン 開発のすゝめ
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
0
180
Headless Components Design
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
0
43
10分で理解する HTML Modules
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
1
420
Polymer Project 2020
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
1
130
技術とデザインの間
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
0
1.4k
Color in Interface Experience
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
1
92
ウェブフォント今昔物語
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
5
3.6k

Other Decks in Technology

See All in Technology
JAWS-UG re:Habilitaion 報告 / JAWS-UG OITA rehabilitation
5acaf9241f1c2e50f3bff920050ae597?s=48 hiranofumio
0
130
MySQL HeatWaveの新しいトピック！ / MySQL HeatWave Update 202206
7fb060398b26ed622d34921bd64e4f5d?s=48 yoshiakiyamasaki
0
100
ラブグラフ紹介資料 〜プロダクト解体新書〜 / Lovegraph Product Deck
84ece018b6918e3339fe74075ab3dd18?s=48 lovegraph
0
300
The Fractal Geometry of Software Design
B90ab53ba7cf16ed1a4bb679cc6751d7?s=48 vladikk
1
1.3k
OPENLOGI Company Profile
5c588fdfe782f92fa6b081903edd82bb?s=48 hr01
0
600
Camp Digital 2022: tailored advice
8fadc4cc83e533c19a6d13db9d46cb3e?s=48 kyliehavelock
0
150
Apa itu DevOps & Kenapa perlu belajar DevOps?
349a7f52975989094c75c055f9f6ba25?s=48 dicodingevent
0
110
Persistence in Serverless Applications - ServerlessDays NYC
Fd55de4174accaf3b4f030e43a8a70c6?s=48 marcduiker
0
250
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
A97eee01397705443a72a48ce29d3e19?s=48 cybozuinsideout
PRO
2
1.9k
開発組織の生産性を可視化する State of DevOpsとFour Keysとは / deep dive into State of DevOps
21761f8bc6d1dac4e02fb04b799cb45c?s=48 yfcgpsebp
0
300
Building smarter apps with machine learning, from magic to reality
7e6a435700dda6cdb22105d601f20892?s=48 picardparis
4
3.2k
UIKitのアップデート 
#WWDC22
9d1961575e45a8286cdde5f86dbba312?s=48 akatsuki174
4
340

Featured

See All Featured
The Invisible Side of Design
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
290
48k
Reflections from 52 weeks, 52 projects
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
337
17k
Code Review Best Practice
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
43
9.3k
jQuery: Nuts, Bolts and Bling
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
56
6.4k
Building Adaptive Systems
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
25
1.1k
WebSockets: Embracing the real-time Web
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
57
5.3k
Fashionably flexible responsive web design (full day workshop)
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
396
62k
VelocityConf: Rendering Performance Case Studies
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
316
22k
Building Applications with DynamoDB
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
83
4.7k
GitHub's CSS Performance
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
420k
How GitHub (no longer) Works
78b475797a14c84799063c7cd073962f?s=48 holman
296
140k
The Success of Rails: Ensuring Growth for the Next 100 Years
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
10
3.4k

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!