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
330
Figmaプラグイン 開発のすゝめ
takanorip
January 25, 2021
Tweet
Share
More Decks by takanorip
See All by takanorip
社内管理画面のデザインもプロダクトデザイン
takanorip
3
680
早わかり W3C Community Group
takanorip
0
250
Ubieとアクセシビリティのこれからを考える
takanorip
0
200
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
2.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
2.8k
デザインシステム運用とOKRの良い関係
takanorip
0
1.6k
ユビーのペイシェントジャーニーを支えるデザインシステム構築
takanorip
0
160
メンタルヘルスチューニング
takanorip
0
240
Other Decks in Technology
See All in Technology
期待しすぎずに取り組む両面 TypeScript
shozawa
2
290
8週連続ウェビナー_イチから学ぶFivetran
cmsuzu
0
160
大規模データとの戦い方
knih
1
460
プッシュ型子育てサービスを、先行プロジェクト実施自治体において開始します
govtechtokyo
0
240
2023 Japan AWS Jr.Championsに選出されての振り返りとこれから
hiropy877
1
130
今さら聞けない!? AWSの生成AIサービス Amazon Bedrock入門!
minorun365
PRO
11
2.3k
LLM + RAG を使った SORACOM Support Bot の裏側の歴史
soracom
PRO
1
640
データ化エンジニアとしての1年を振り返る
sansantech
PRO
3
250
AWS アーキテクチャクイズ
yuu26
2
700
Autopsy of a Cascading Outage from a MySQL Crashing Bug
jfg956
0
200
ビジネスロジックを「型」で表現するOOPのための関数型DDD / Functional And Type-Safe DDD for OOP
yuitosato
29
12k
エンジニア候補者向け資料2024.03.28.pdf
macloud
0
2.9k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
A Tale of Four Properties
chriscoyier
150
22k
What's in a price? How to price your products and services
michaelherold
236
11k
Why Our Code Smells
bkeepers
PRO
330
56k
Into the Great Unknown - MozCon
thekraken
10
830
Rails Girls Zürich Keynote
gr2m
91
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
Embracing the Ebb and Flow
colly
78
4.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
Atom: Resistance is Futile
akmur
258
25k
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!