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
Figmaプラグイン 開発のすゝめ
Search
takanorip
January 25, 2021
Technology
0
450
Figmaプラグイン 開発のすゝめ
takanorip
January 25, 2021
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
7
4k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
160
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
930
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.4k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2k
早わかり W3C Community Group
takanorip
0
500
Ubieとアクセシビリティのこれからを考える
takanorip
0
470
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
4k
Other Decks in Technology
See All in Technology
Understanding Go GC #coefl_go_jp
bengo4com
0
1.1k
実践アプリケーション設計 ③ドメイン駆動設計
recruitengineers
PRO
7
700
広島発!スタートアップ開発の裏側
tsankyo
0
250
トヨタ生産方式(TPS)入門
recruitengineers
PRO
4
440
Go で言うところのアレは TypeScript で言うとコレ / Kyoto.なんか #7
susisu
7
1.9k
モバイルアプリ研修
recruitengineers
PRO
4
470
DeNA での思い出 / Memories at DeNA
orgachem
PRO
3
1.7k
LLM時代の検索とコンテキストエンジニアリング
shibuiwilliam
2
1.2k
Android Studio の 新しいAI機能を試してみよう / Try out the new AI features in Android Studio
yanzm
0
280
DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす
hacusk
1
110
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
25
6.7k
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
18
5.5k
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Rails Girls Zürich Keynote
gr2m
95
14k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Bash Introduction
62gerente
614
210k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Unsuck your backbone
ammeep
671
58k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Transcript
Figmaプラグイン 開発のすゝめ Figmaプラグインで始めるWebアプリケーション開発 Takanori Oki - 20210125
自己紹介 • Takanori Oki - 大木尊紀 - @takanorip • UI
designer at ClassDo / Frontend developer • Organizer of Web Platform Study Group • takanorip.com
Figma • Webアプリケーションベースのデザインツール • チーム開発(コラボレーション)のための機能が充実 • 共同編集 • URLによる共有 •
コンポーネント管理機能 • etc…
Figma Plugins • Figmaで利用できる拡張機能 • Figmaのデザインデータにアクセス、編集ができる • Webフロントエンドと同じ技術スタックで開発できる • 審査に合格すればFigma
Community上に公開することも可能 • 補足:FigmaはWeb APIも公開しているがそちらは情報の取得のみで、 編集などは一切できない
Figma Pluginsが アプリケーション開発入門に適している理由 • UIとロジックを分離させる設計になっている • ローカルで動作を試せる(デプロイ必要ない) • TypeScriptで開発できるよう整備されている TODOリストより実践的だけど個人アプリ開発より手軽
UIとロジックを分離させる設計になっている ग़యɿFigma Developers
UIとロジックを分離させる設計になっている • サンドボックスはFigmaのAPIにアクセスできる • ブラウザ APIにはアクセスできない • iframeではFigma APIにアクセスできない •
ブラウザの機能はだいたい使える • 外部Web APIへのアクセスも可能(POSTは出来ない) • サンドボックスとiframeはpostMessageでやりとりする
責務の分離と セキュリティの確保のために こういった設計になってる
Webフロントエンド開発をいろいろ試せる • 公式でTypeScriptを用いた開発が推奨されてる • https://www.figma.com/plugin-docs/typescript/ • サンプルも充実 • https://github.com/figma/plugin-samples •
パフォーマンスチューニングの題材としても良いかも • https://www.figma.com/plugin-docs/frozen-plugins/
簡単な始め方 • CLI tool • https://github.com/yuanqing/create-figma-plugin • https://rsms.me/figplug/ • UI
Components for Figma Plugins (Unofficial) • https://github.com/thomas-lowry/figma-plugin-ds
JUST DO IT!