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
370
Figmaプラグイン 開発のすゝめ
takanorip
January 25, 2021
Tweet
Share
More Decks by takanorip
See All by takanorip
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
3
510
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
12
5.5k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.5k
早わかり W3C Community Group
takanorip
0
370
Ubieとアクセシビリティのこれからを考える
takanorip
0
350
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.5k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3k
デザインシステム運用とOKRの良い関係
takanorip
0
1.8k
Other Decks in Technology
See All in Technology
Discovering AI Models
picardparis
4
3.9k
とあるOSSを継続可能にするための取り組みについて / OSS Refactoring Process
bun913
1
220
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
6
1.5k
技術的負債解消の取り組みと専門チームのお話
bengo4com
0
340
開発生産性を始める前に開発チームができること / optim-improve-development-productivity.pdf
optim
0
150
Segment Anything Model 2
tenten0727
3
720
「家族アルバム みてね」における運用管理・ オブザーバビリティの全貌 / Overview of Operation Management and Observability in FamilyAlbum
isaoshimizu
4
170
PdMはどのように全てのスピードを上げられるか ~ 非連続進化のための具体的な取り組み ~
sansantech
PRO
4
1.4k
QAに対する超個人的な解釈 / Personal Take on QA
toma_sm
1
150
不動産売買取引におけるAIの可能性とプロダクトでのAI活用
zabio3
0
270
eBPFのこれまでとこれから
yutarohayakawa
10
3.3k
不動産tech Product Night#2_AIことはじめ_GA橋本
takehikohashimoto
0
190
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1365
200k
Adopting Sorbet at Scale
ufuk
73
8.9k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
What the flash - Photography Introduction
edds
67
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
326
21k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Design by the Numbers
sachag
277
19k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
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!