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. 株式会社FOLIO 5 • 投資サービスを運営している会社 • フロントエンドはReact / Redux / Flow

    / CSS Modules • バックエンドはScalaでマイクロサービス • LINE Financial株式会社と共同で「LINEスマート投資」を運営
  2. 8 Figmaって何? • Webベースのデザインツール(ほぼスケッチ) • オンラインで共同編集 • プロトタイピング • バージョン管理

    • コンポーネント管理(Organizationプランが必要) • やり方工夫すれば紙のデザインもできる
  3. 16 REST APIs 概要 • 無料で使えるFigmaのWeb API • 基本Read Only

    • Nodeやコメント、ユーザ情報などを取得できる • 画像の書き出しはできる • Nodeの追加や削除などはできない • OAuth 2ログインがサポートされてる
  4. 17 REST APIsのメリット • 開発がしやすい • ごく普通のAPIなので取り扱いが楽 • 便利なTypeScript wrapperがある

    • https://github.com/jongold/figma-js • 安全 • 読み取りしかできないのでデザインデータを破壊するリスクがない • OAuth 2ログインできる
  5. Pluginsの概要 20 • Figmaアプリ内で使える拡張機能 • TypeScriptとHTML/CSSで開発できる • 普通のWebアプリ開発とほとんど変わらないので、APIを公開してる
 様々なサービスと連携できる •

    Nodeの追加削除やコメントなど、ほぼすべての機能にアクセスできる • 一般公開できる(審査が必要) • もちろん公開しなくても使える
  6. Pluginsの仕組み 21 postMessage Sandbox JavaScript Code • Browser APIにアクセスできない •

    Figmaの機能にアクセスできる iframe UI • Browser APIにアクセスできる • Figmaの機能にアクセスできない
  7. Live Embedの概要 27 • Figmaをiframeで埋め込む • メリット • iframeなので変更が同期される •

    デメリット • iframeなので読み込みに時間がかかる、1ページにつき1つが限界 • iframeが展開できる環境じゃないと使えない