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
November 02, 2019
Design
7
2.4k
プロダクト開発とFigmaのより良い関係を求めて
takanorip
November 02, 2019
Tweet
Share
More Decks by takanorip
See All by takanorip
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
500
Bulletproof Design System with TypeScript
takanorip
7
4.2k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
170
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
940
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.5k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.1k
早わかり W3C Community Group
takanorip
0
510
Ubieとアクセシビリティのこれからを考える
takanorip
0
480
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
4k
Other Decks in Design
See All in Design
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
550
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
2k
harutaka Vision Deck
zenkigenforrecruit
0
250
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.4k
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
110
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
860
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
170
株式会社バクタム 会社説明資料
bactum
0
360
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
2.8k
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
1.9k
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
200
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.5k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Producing Creativity
orderedlist
PRO
347
40k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Building an army of robots
kneath
306
46k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Transcript
1 プロダクト開発とFigmaのより良い関係を求めて 2019/11/02 Takanori Oki Copyright © 2019 FOLIO, Ltd.
All Rights Reserved.
目次 2 • Figmaって何? • Figmaの外部連携3つの機能 • 実際どうやって使う? • まとめ
自己紹介 3
自己紹介 4 • 株式会社FOLIO フロントエンジニア • 普段はReact、Nuxt.jsでアプリケーションを作ってる • 趣味でデザインをしてる(Web、紙) •
Figmaとウェブフォントが好き • 好きなフォントは源柔ゴシック、新ゴ、Futura
株式会社FOLIO 5 • 投資サービスを運営している会社 • フロントエンドはReact / Redux / Flow
/ CSS Modules • バックエンドはScalaでマイクロサービス • LINE Financial株式会社と共同で「LINEスマート投資」を運営
Figmaって何? 6
「Figma デザイン」で検索! 7 Figmaって何?
8 Figmaって何? • Webベースのデザインツール(ほぼスケッチ) • オンラインで共同編集 • プロトタイピング • バージョン管理
• コンポーネント管理(Organizationプランが必要) • やり方工夫すれば紙のデザインもできる
やり方工夫すれば紙のデザインもできる (僕の名刺はFigmaでデザインしました) 9 Figmaって何?
Web 10 Figmaって何?
11 Figmaって何? Linkable Discoverable Safe
12 FOLIOがFigmaを導入した理由 • 関係者の数が多く社内外の人にデザインを共有する場面が多い • 一度リンクを共有すれば常に最新のデザインが確認できる • Team Libraryを使ってデザインを統一したい •
Sketchでもできるけど管理がめんどくさい • Abstractでのコンフリクト解決がつらい • マージしたくない
Figmaの外部連携機能 13
REST APIs Plugins Live Embed 14 Figmaの外部連携機能
REST APIs 15
16 REST APIs 概要 • 無料で使えるFigmaのWeb API • 基本Read Only
• Nodeやコメント、ユーザ情報などを取得できる • 画像の書き出しはできる • Nodeの追加や削除などはできない • OAuth 2ログインがサポートされてる
17 REST APIsのメリット • 開発がしやすい • ごく普通のAPIなので取り扱いが楽 • 便利なTypeScript wrapperがある
• https://github.com/jongold/figma-js • 安全 • 読み取りしかできないのでデザインデータを破壊するリスクがない • OAuth 2ログインできる
スペルチェッカー Reactコンポーネント生成 スタイルガイド生成 18 REST APIsのユースケース例
Plugins 19
Pluginsの概要 20 • Figmaアプリ内で使える拡張機能 • TypeScriptとHTML/CSSで開発できる • 普通のWebアプリ開発とほとんど変わらないので、APIを公開してる 様々なサービスと連携できる •
Nodeの追加削除やコメントなど、ほぼすべての機能にアクセスできる • 一般公開できる(審査が必要) • もちろん公開しなくても使える
Pluginsの仕組み 21 postMessage Sandbox JavaScript Code • Browser APIにアクセスできない •
Figmaの機能にアクセスできる iframe UI • Browser APIにアクセスできる • Figmaの機能にアクセスできない
Figmaのアプリから使えるので わかりやすい 公開して使ってもらうことができる 22 Pluginsのメリット
可能性は無限大 23 Pluginsのユースケース カラーパレット チケット自動生成 ダミーテキスト コメント機能の拡張 アクセシビリティ 独自のSlack連携
サンプルコード 24
公式サンプル https://github.com/figma/plugin-samples 25 Plugins
Live Embed 26
Live Embedの概要 27 • Figmaをiframeで埋め込む • メリット • iframeなので変更が同期される •
デメリット • iframeなので読み込みに時間がかかる、1ページにつき1つが限界 • iframeが展開できる環境じゃないと使えない
JIRAチケットなどに添付する JIRAやTrelloにはLive Embed用拡張機能がある 28 Live Embedのユースケース
実際のユースケース 29
WIP 30
31 プロダクト開発で困りがちなこと • デザインのJIRAチケットに貼ってあるスクショが古い • ページごとに手作業でチケット作るのめんどくさい • 外部の人にURL共有するのめんどくさい • etc...
不毛なタスクを 技術で撲滅したい! 32 プロダクト開発で困りがちなこと
1つの業務に必要な プロセス・知識を ツールの中に押し込めてしまう 33 ツール開発で考えたい視点
誰でもこのボタン押したらいける!って感じにする 34 ツール開発で考えたい視点
組織の中でFigmaと周辺機能を 活用するために考えること 35
使う人を意識する 36 活用するために考えること
コミュニケーションが発生する場所で 無駄なタスクや摩擦が起こりやすい 37 活用するために考えること そこをPluginやAPIを使ったツールで 改善していく
38 FOLIOの場合 実装 コンプラチェック Slackで共有 デザインデータ
まとめ 39
40 まとめ PluginやWeb APIを活用して 煩雑な作業を効率化しよう! 組織内でうまく使われるように 他職種を巻き込もう!
おわり! 41