1プロダクト開発とFigmaのより良い関係を求めて2019/11/02 Takanori OkiCopyright © 2019 FOLIO, Ltd. All Rights Reserved.
View Slide
目次2• Figmaって何?• Figmaの外部連携3つの機能• 実際どうやって使う?• まとめ
自己紹介3
自己紹介4• 株式会社FOLIO フロントエンジニア• 普段はReact、Nuxt.jsでアプリケーションを作ってる• 趣味でデザインをしてる(Web、紙)• Figmaとウェブフォントが好き• 好きなフォントは源柔ゴシック、新ゴ、Futura
株式会社FOLIO5• 投資サービスを運営している会社• フロントエンドはReact / Redux / Flow / CSS Modules• バックエンドはScalaでマイクロサービス• LINE Financial株式会社と共同で「LINEスマート投資」を運営
Figmaって何?6
「Figma デザイン」で検索!7Figmaって何?
8Figmaって何?• Webベースのデザインツール(ほぼスケッチ)• オンラインで共同編集• プロトタイピング• バージョン管理• コンポーネント管理(Organizationプランが必要)• やり方工夫すれば紙のデザインもできる
やり方工夫すれば紙のデザインもできる(僕の名刺はFigmaでデザインしました)9Figmaって何?
Web10Figmaって何?
11Figmaって何?LinkableDiscoverableSafe
12FOLIOがFigmaを導入した理由• 関係者の数が多く社内外の人にデザインを共有する場面が多い• 一度リンクを共有すれば常に最新のデザインが確認できる• Team Libraryを使ってデザインを統一したい• Sketchでもできるけど管理がめんどくさい• Abstractでのコンフリクト解決がつらい• マージしたくない
Figmaの外部連携機能13
REST APIs Plugins Live Embed14Figmaの外部連携機能
REST APIs15
16REST APIs 概要• 無料で使えるFigmaのWeb API• 基本Read Only• Nodeやコメント、ユーザ情報などを取得できる• 画像の書き出しはできる• Nodeの追加や削除などはできない• OAuth 2ログインがサポートされてる
17REST APIsのメリット• 開発がしやすい• ごく普通のAPIなので取り扱いが楽• 便利なTypeScript wrapperがある• https://github.com/jongold/figma-js• 安全• 読み取りしかできないのでデザインデータを破壊するリスクがない• OAuth 2ログインできる
スペルチェッカー Reactコンポーネント生成 スタイルガイド生成18REST APIsのユースケース例
Plugins19
Pluginsの概要20• Figmaアプリ内で使える拡張機能• TypeScriptとHTML/CSSで開発できる• 普通のWebアプリ開発とほとんど変わらないので、APIを公開してる 様々なサービスと連携できる• Nodeの追加削除やコメントなど、ほぼすべての機能にアクセスできる• 一般公開できる(審査が必要)• もちろん公開しなくても使える
Pluginsの仕組み21postMessageSandboxJavaScript Code• Browser APIにアクセスできない• Figmaの機能にアクセスできるiframeUI• Browser APIにアクセスできる• Figmaの機能にアクセスできない
Figmaのアプリから使えるのでわかりやすい公開して使ってもらうことができる22Pluginsのメリット
可能性は無限大23Pluginsのユースケースカラーパレットチケット自動生成ダミーテキストコメント機能の拡張アクセシビリティ独自のSlack連携
サンプルコード24
公式サンプルhttps://github.com/figma/plugin-samples25Plugins
Live Embed26
Live Embedの概要27• Figmaをiframeで埋め込む• メリット• iframeなので変更が同期される• デメリット• iframeなので読み込みに時間がかかる、1ページにつき1つが限界• iframeが展開できる環境じゃないと使えない
JIRAチケットなどに添付するJIRAやTrelloにはLive Embed用拡張機能がある28Live Embedのユースケース
実際のユースケース29
WIP30
31プロダクト開発で困りがちなこと• デザインのJIRAチケットに貼ってあるスクショが古い• ページごとに手作業でチケット作るのめんどくさい• 外部の人にURL共有するのめんどくさい• etc...
不毛なタスクを技術で撲滅したい!32プロダクト開発で困りがちなこと
1つの業務に必要なプロセス・知識をツールの中に押し込めてしまう33ツール開発で考えたい視点
誰でもこのボタン押したらいける!って感じにする34ツール開発で考えたい視点
組織の中でFigmaと周辺機能を活用するために考えること35
使う人を意識する36活用するために考えること
コミュニケーションが発生する場所で 無駄なタスクや摩擦が起こりやすい37活用するために考えることそこをPluginやAPIを使ったツールで 改善していく
38FOLIOの場合実装コンプラチェックSlackで共有デザインデータ
まとめ39
40まとめPluginやWeb APIを活用して煩雑な作業を効率化しよう!組織内でうまく使われるように他職種を巻き込もう!
おわり!41