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
790
早わかり W3C Community Group
takanorip
0
280
Ubieとアクセシビリティのこれからを考える
takanorip
0
250
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.1k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
2.9k
デザインシステム運用とOKRの良い関係
takanorip
0
1.7k
ユビーのペイシェントジャーニーを支えるデザインシステム構築
takanorip
0
180
メンタルヘルスチューニング
takanorip
0
260
Other Decks in Technology
See All in Technology
日本が誇るイタリアのダンスミュージック!? ユーロビートって何??
minorun365
PRO
2
230
Security Hubのセキュリティスコアはどうやって計算されるか
toru_kubota
0
110
Domain-driven Design: A Complete Example
ewolff
2
270
CloudflareとHonoを使って飲食店のレビューができるLINEアプリを作った
shinaps
1
630
「できる!」を増やすGitHub Copilot活用法 / How to use GitHub Copilot to expand your possibilities
sansan_randd
1
240
Step by Stepで学ぶ、ADT(代数的データ型)、モナドからEffect-TSまで
leveragestech
1
3.2k
RubyKaigi 2024 - Make Your Own Regex Engine!
makenowjust
1
180
LINEヤフーのウェブアクセシビリティ
lycorptech_jp
PRO
3
210
AI JIMY - 登壇(インストール編)
hanacchi
0
150
Taking Flight with Tailwind CSS
opdavies
0
4.3k
[2024년 5월 세미나] 생성형 AI와 함께하는 데이터 분석가 커리어
datarian
0
1.3k
From here to resilience - a travel guide
ufried
1
160
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
The Cult of Friendly URLs
andyhume
74
5.7k
GraphQLとの向き合い方2022年版
quramy
33
13k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.5k
BBQ
matthewcrist
80
8.8k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
The Cost Of JavaScript in 2023
addyosmani
21
4k
[RailsConf 2023] Rails as a piece of cake
palkan
29
4.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Robots, Beer and Maslow
schacon
PRO
155
8k
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!