Figma APIを使って活動履歴をグラフ化した話

このnoteは2020年6月7日に開催された「なごやデザイナーLT会 Vol.3.5」で発表した資料と台本をまとめたものです。

資料だけを見たい方はこちらからどうぞ。

自己紹介

見知った顔の多いこの会ですが、自己紹介から。Increments株式会社で働いている綿貫佳祐です。

主にはQiita Jobsというエンジニア採用サービスを担当している他、QiitaやQiita Team……まあ、Incrementsのサービスは全部携わっています笑

GitHubの芝って見たことある？

早速本題に入って行くんですが、みなさんGitHubの「芝」って見たことありますか？

これです。正しくはContributions calendarって言うんですが、書いたコードの量や頻度が視覚化されたコンテンツです。

これが絶対の指標ってこともないんですが、日々どれくらい開発しているかをざっくり把握はできるんですね。

それで、デザイナー版の芝もあったら良いなーってずっと思ってたんですよ。多分2年くらいは思ってました笑

Figma APIって知ってる？

そしてやっとタイトルのFigma APIの話なんですが、こちらも知ってるとか使ったことある人いますか？

自分の周りだとあんまり使い込んでる人はいないかなーと思うんですが、結構色々やれるんですよ。

例えばコマンドラインからFigmaデータにコメントを入れる、とかも一応可能。

で、APIのページを色々読んでたら、「コレ、Figmaの活動履歴で芝生やせるんじゃね？」って思ったので作ってみました。こんな感じです。

概要

全体像をかいつまんで説明すると、Figmaのデータって有料プランなら過去のバージョン履歴が全て保存されているんですね。

APIを叩いて取得出来る情報のうち、保存された時間があります。

なので僕のサイトに訪れるとFigma APIを叩いてデータ取得して加工してグラフ化する……とそういう仕組みです。

詳細

もう少し詳細に話していきます。Figmaのデータの構造はTeam → Project → Fileと階層になっていて、さらに各Fileの中にVersion Historyが埋め込まれています。

Figma APIでもこの流れに沿ってデータを取得するイメージで、Team情報のエンドポイントからAPIにアクセスするとProjectの一覧が手に入ります。この中にはProject名やidなどが格納されています。

そしてidを使って各ProjectのエンドポイントからAPIにアクセス。すると今度はFile一覧が手に入る。

後はもうお分かりかもしれませんが手に入れたFile情報からVersion Historyを取得するわけです。

自分のTeam IDさえあればProject→File→Version Historyと段階を踏むことで全ての活動履歴を取得が出来るので、あとはそれを良い感じに加工してスタイリングすれば完成って寸法です。

おわりに

かなり駆け足になってしまいましたが作ったものについては以上です。

自分は実装をReactでやっていますが、ぶっちゃけfetchとループ処理くらいしかしていないので言語とかフレーム問わず作れるんじゃないかなと思います。

目標はUIライブラリとしてnpmで公開することです、乞うご期待！笑

ということで発表を終わります、ありがとうございました。