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
400
Bulletproof Design System with TypeScript
takanorip
6
3.8k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
150
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
920
効果的な管理画面を デザインをするために 避けるべき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
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
arthur1
0
340
JAWS AI/ML #30 AI コーディング IDE "Kiro" を触ってみよう
inariku
3
260
ソフトウェア開発プロジェクトでの品質管理への提案(温故知新)
yohwada
0
100
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
710
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
2
760
【CEDEC2025】ブランド力アップのためのコンテンツマーケティング~ゲーム会社における情報資産の活かし方~
cygames
PRO
0
230
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
4
1.5k
dipにおけるSRE変革の軌跡
dip_tech
PRO
1
220
2025新卒研修・HTML/CSS #弁護士ドットコム
bengo4com
3
13k
【新卒研修資料】数理最適化 / Mathematical Optimization
brainpadpr
23
11k
LTに影響を受けてテンプレリポジトリを作った話
hol1kgmg
0
250
Findy Freelance 利用シーン別AI活用例
ness
0
290
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Gamification - CAS2011
davidbonilla
81
5.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Six Lessons from altMBA
skipperchong
28
3.9k
Agile that works and the tools we love
rasmusluckow
329
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Visualization
eitanlees
146
16k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.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!