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
340
Bulletproof Design System with TypeScript
takanorip
6
3.6k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
140
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
900
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
7.3k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
2k
早わかり W3C Community Group
takanorip
0
500
Ubieとアクセシビリティのこれからを考える
takanorip
0
460
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.9k
Other Decks in Technology
See All in Technology
[ JAWS-UG千葉支部 x 彩の国埼玉支部 ]ムダ遣い卒業!FinOpsで始めるAWSコスト最適化の第一歩
sh_fk2
2
150
AWS CDK 開発を成功に導くトラブルシューティングガイド
wandora58
3
140
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
130
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
1
600
ロールが細分化された組織でSREは何をするか?
tgidgd
1
160
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
590
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
150
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
2
300
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
360
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
0
250
Claude Code に プロジェクト管理やらせたみた
unson
7
4.8k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
54
22k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Making Projects Easy
brettharned
116
6.3k
Designing for Performance
lara
610
69k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Docker and Python
trallard
44
3.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
BBQ
matthewcrist
89
9.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!