Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

takanorip
November 02, 2019

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

takanorip

November 02, 2019
Tweet

More Decks by takanorip

Other Decks in Design

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