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
290
Bulletproof Design System with TypeScript
takanorip
6
3.5k
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
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
240
AWS認定を取る中で感じたこと
siromi
1
180
Operating Operator
shhnjk
1
510
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.1k
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
190
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
220
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.1k
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
6
1.4k
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.3k
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
270
AI導入の理想と現実~コストと浸透〜
oprstchn
0
190
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
We Have a Design System, Now What?
morganepeng
53
7.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.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!