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
340
Figmaプラグイン 開発のすゝめ
takanorip
January 25, 2021
Tweet
Share
More Decks by takanorip
See All by takanorip
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.2k
早わかり W3C Community Group
takanorip
0
300
Ubieとアクセシビリティのこれからを考える
takanorip
0
270
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.2k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
2.9k
デザインシステム運用とOKRの良い関係
takanorip
0
1.7k
ユビーのペイシェントジャーニーを支えるデザインシステム構築
takanorip
0
190
メンタルヘルスチューニング
takanorip
0
270
Other Decks in Technology
See All in Technology
ゆるSRE勉強会 #6 LT
okaru
0
210
Cloudflare Workersで構築する非同期ジョブシステム
aiji42
6
900
自動生成されたhttpエンドポイントごとにカスタムミドルウェアを挿入したい話
uhzz
1
1.7k
AWSネイティブなセキュリティを考える
wkm2
1
120
SSII2024 [OS3] 基盤モデルとそのビジネス活用
ssii
PRO
0
230
Extending kotlin-inject for fun & profit
vrallev
2
200
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
39k
Platform Orchestrators: The Missing Middle of Internal Developer Platforms?
syntasso
1
170
いまからでも遅くない!ROKS (RedHat OpenShift on IBM Cloud) の運用
helenxiao
0
230
SSII2024 [OS1] 自動運転における 重要技術とトレンド紹介
ssii
PRO
0
170
そうだったのか!札幌速報のしくみ
suicadesu
1
210
三次元再構成(東京大学大学院 情報理工学系研究科『知能情報論』)
pfn
PRO
8
1.7k
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
27
2.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
13
1.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
28k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
9k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
10
3.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
15
1.6k
How To Stay Up To Date on Web Technology
chriscoyier
783
250k
Creatively Recalculating Your Daily Design Routine
revolveconf
213
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Music & Morning Musume
bryan
42
5.7k
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!