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

by takanorip

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

自己紹介 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Figmaって何？ 6

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Web 10 Figmaって何？

Slide 11

Slide 11 text

11 Figmaって何？ Linkable Discoverable Safe

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Figmaの外部連携機能 13

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

REST APIs 15

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Plugins 19

Slide 20

Slide 20 text

Pluginsの概要 20 • Figmaアプリ内で使える拡張機能 • TypeScriptとHTML/CSSで開発できる • 普通のWebアプリ開発とほとんど変わらないので、APIを公開してる  様々なサービスと連携できる • Nodeの追加削除やコメントなど、ほぼすべての機能にアクセスできる • 一般公開できる（審査が必要） • もちろん公開しなくても使える

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

サンプルコード 24

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Live Embed 26

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

実際のユースケース 29

Slide 30

Slide 30 text

WIP 30

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

コミュニケーションが発生する場所で  無駄なタスクや摩擦が起こりやすい 37 活用するために考えることそこをPluginやAPIを使ったツールで  改善していく

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

まとめ 39

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

おわり！ 41