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
920
Making Figma plugins with TypeScript
takanorip
June 24, 2019
Tweet
Share
More Decks by takanorip
See All by takanorip
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
440
Bulletproof Design System with TypeScript
takanorip
6
4k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
160
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
920
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
7.4k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
2k
早わかり W3C Community Group
takanorip
0
500
Ubieとアクセシビリティのこれからを考える
takanorip
0
470
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
4k
Other Decks in Technology
See All in Technology
あなたの知らない OneDrive
murachiakira
0
240
生成AI利用プログラミング:誰でもプログラムが書けると 世の中どうなる?/opencampus202508
okana2ki
0
190
TypeScript入門
recruitengineers
PRO
19
6.4k
アジャイルテストで高品質のスプリントレビューを
takesection
0
120
LLMエージェント時代に適応した開発フロー
hiragram
1
410
Effective Match Types - Scala Days 2025
bishabosha
1
110
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
9
2.6k
AIエージェントの開発に必須な「コンテキスト・エンジニアリング」とは何か──プロンプト・エンジニアリングとの違いを手がかりに考える
masayamoriofficial
0
400
株式会社ARAV 採用案内
maqui
0
350
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
24
6.1k
我々は雰囲気で仕事をしている / How can we do vibe coding as well
naospon
2
220
.NET開発者のためのAzureの概要
tomokusaba
0
230
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Site-Speed That Sticks
csswizardry
10
790
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Side Projects
sachag
455
43k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Music & Morning Musume
bryan
46
6.7k
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!