プロダクト開発とFigmaのより良い関係を求めて

Transcript

1. 1
   プロダクト開発とFigmaのより良い関係を求めて
   2019/11/02 Takanori Oki
   Copyright © 2019 FOLIO, Ltd. All Rights Reserved.
   

   View Slide

2. 目次
   2
   • Figmaって何？
   • Figmaの外部連携3つの機能
   • 実際どうやって使う？
   • まとめ
   

   View Slide

3. 自己紹介
   3
   

   View Slide

4. 自己紹介
   4
   • 株式会社FOLIO フロントエンジニア
   • 普段はReact、Nuxt.jsでアプリケーションを作ってる
   • 趣味でデザインをしてる（Web、紙）
   • Figmaとウェブフォントが好き
   • 好きなフォントは源柔ゴシック、新ゴ、Futura
   

   View Slide

5. 株式会社FOLIO
   5
   • 投資サービスを運営している会社
   • フロントエンドはReact / Redux / Flow / CSS Modules
   • バックエンドはScalaでマイクロサービス
   • LINE Financial株式会社と共同で「LINEスマート投資」を運営
   

   View Slide

6. Figmaって何？
   6
   

   View Slide

7. 「Figma デザイン」で検索！
   7
   Figmaって何？
   

   View Slide

8. 8
   Figmaって何？
   • Webベースのデザインツール（ほぼスケッチ）
   • オンラインで共同編集
   • プロトタイピング
   • バージョン管理
   • コンポーネント管理（Organizationプランが必要）
   • やり方工夫すれば紙のデザインもできる
   

   View Slide

9. やり方工夫すれば紙のデザインもできる
   （僕の名刺はFigmaでデザインしました）
   9
   Figmaって何？
   

   View Slide

10. Web
    10
    Figmaって何？
    

    View Slide

11. 11
    Figmaって何？
    Linkable
    Discoverable
    Safe
    

    View Slide

12. 12
    FOLIOがFigmaを導入した理由
    • 関係者の数が多く社内外の人にデザインを共有する場面が多い
    • 一度リンクを共有すれば常に最新のデザインが確認できる
    • Team Libraryを使ってデザインを統一したい
    • Sketchでもできるけど管理がめんどくさい
    • Abstractでのコンフリクト解決がつらい
    • マージしたくない
    

    View Slide

13. Figmaの外部連携機能
    13
    

    View Slide

14. REST APIs Plugins Live Embed
    14
    Figmaの外部連携機能
    

    View Slide

15. REST APIs
    15
    

    View Slide

16. 16
    REST APIs 概要
    • 無料で使えるFigmaのWeb API
    • 基本Read Only
    • Nodeやコメント、ユーザ情報などを取得できる
    • 画像の書き出しはできる
    • Nodeの追加や削除などはできない
    • OAuth 2ログインがサポートされてる
    

    View Slide

17. 17
    REST APIsのメリット
    • 開発がしやすい
    • ごく普通のAPIなので取り扱いが楽
    • 便利なTypeScript wrapperがある
    • https://github.com/jongold/figma-js
    • 安全
    • 読み取りしかできないのでデザインデータを破壊するリスクがない
    • OAuth 2ログインできる
    

    View Slide

18. スペルチェッカー Reactコンポーネント生成 スタイルガイド生成
    18
    REST APIsのユースケース例
    

    View Slide

19. Plugins
    19
    

    View Slide

20. Pluginsの概要
    20
    • Figmaアプリ内で使える拡張機能
    • TypeScriptとHTML/CSSで開発できる
    • 普通のWebアプリ開発とほとんど変わらないので、APIを公開してる

    様々なサービスと連携できる
    • Nodeの追加削除やコメントなど、ほぼすべての機能にアクセスできる
    • 一般公開できる（審査が必要）
    • もちろん公開しなくても使える
    

    View Slide

21. Pluginsの仕組み
    21
    postMessage
    Sandbox
    JavaScript Code
    • Browser APIにアクセスできない
    • Figmaの機能にアクセスできる
    iframe
    UI
    • Browser APIにアクセスできる
    • Figmaの機能にアクセスできない
    

    View Slide

22. Figmaのアプリから使えるので
    わかりやすい
    公開して使ってもらうことができる
    22
    Pluginsのメリット
    

    View Slide

23. 可能性は無限大
    23
    Pluginsのユースケース
    カラーパレット
    チケット自動生成
    ダミーテキスト
    コメント機能の拡張
    アクセシビリティ
    独自のSlack連携
    

    View Slide

24. サンプルコード
    24
    

    View Slide

25. 公式サンプル
    https://github.com/figma/plugin-samples
    25
    Plugins
    

    View Slide

26. Live Embed
    26
    

    View Slide

27. Live Embedの概要
    27
    • Figmaをiframeで埋め込む
    • メリット
    • iframeなので変更が同期される
    • デメリット
    • iframeなので読み込みに時間がかかる、1ページにつき1つが限界
    • iframeが展開できる環境じゃないと使えない
    

    View Slide

28. JIRAチケットなどに添付する
    JIRAやTrelloにはLive Embed用拡張機能がある
    28
    Live Embedのユースケース
    

    View Slide

29. 実際のユースケース
    29
    

    View Slide

30. WIP
    30
    

    View Slide

31. 31
    プロダクト開発で困りがちなこと
    • デザインのJIRAチケットに貼ってあるスクショが古い
    • ページごとに手作業でチケット作るのめんどくさい
    • 外部の人にURL共有するのめんどくさい
    • etc...
    

    View Slide

32. 不毛なタスクを
    技術で撲滅したい！
    32
    プロダクト開発で困りがちなこと
    

    View Slide

33. 1つの業務に必要な
    プロセス・知識を
    ツールの中に押し込めてしまう
    33
    ツール開発で考えたい視点
    

    View Slide

34. 誰でもこのボタン押したらいける！って感じにする
    34
    ツール開発で考えたい視点
    

    View Slide

35. 組織の中でFigmaと周辺機能を
    活用するために考えること
    35
    

    View Slide

36. 使う人を意識する
    36
    活用するために考えること
    

    View Slide

37. コミュニケーションが発生する場所で

    無駄なタスクや摩擦が起こりやすい
    37
    活用するために考えること
    そこをPluginやAPIを使ったツールで

    改善していく
    

    View Slide

38. 38
    FOLIOの場合
    実装
    コンプラチェック
    Slackで共有
    デザインデータ
    

    View Slide

39. まとめ
    39
    

    View Slide

40. 40
    まとめ
    PluginやWeb APIを活用して
    煩雑な作業を効率化しよう！
    組織内でうまく使われるように
    他職種を巻き込もう！
    

    View Slide

41. おわり！
    41
    

    View Slide