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

2020年6月7日に開催された「なごやデザイナーLT会 Vol.3.5」で発表した資料のうちの1つです。

以下のリンクより、台本とセットでご覧いただけます。
https://note.com/xrxoxcxox/n/n9dcb7c7273bc

Transcript

1. Figma APIを使って
   
   活動履歴をグラフ化した話
   なごデLT会 vol.3
   

   View Slide

2. 在宅勤務が始まって以来、
   
   お金は使うわ太るわしてます。タスケテ
   Incrementsのデザイナーです。
   
   主にQiita Jobsの開発をしています。
   綿貫 佳祐
   @xrxoxcxox
   

   View Slide

3. を知ってますか？
   “芝”
   GitHubの、通称
   

   View Slide

4. ↓こういうやつです
   

   View Slide

5. View Slide

6. View Slide

7. もしや、自力で芝を生やせるのでは？
   

   View Slide

8. View Slide

9. {
   
   "versions": [
   
   {
   
   "id": "330835042",
   
   "created_at": "2020-05-19T19:08:12Z",
   
   "label": null,
   
   "description": null,
   
   "user": {
   
   "handle": "Keisuke",
   
   "img_url": "https://s3-alpha.figma.com/profile/xxx",
   
   "id": "664682953441304459"
   
   },
   
   "thumbnail_url": null
   
   },
   
   {
   
   "id": "330786684",
   
   "created_at": "2020-05-19T18:18:08Z",
   
   "label": null,
   
   "description": null,
   
   "user": {
   
   "handle": "Keisuke",
   
   "img_url": "https://s3-alpha.figma.com/profile/xxx",
   
   "id": "664682953441304459"
   
   },
   
   "thumbnail_url": null
   
   },
   
   ...
   
   "pagination": {
   
   "next_page": "https://api.figma.com/v1/files/yyy",
   
   "prev_page": "https://api.figma.com/v1/files/vvv"
   
   }
   
   }
   

   View Slide

10. "created_at": "2020-05-19T19:08:12Z"
    "created_at": "2020-05-19T18:18:08Z"
    {
    
    "versions": [
    
    {
    
    "id": "330835042",
    
    ,
    
    "label": null,
    
    "description": null,
    
    "user": {
    
    "handle": "Keisuke",
    
    "img_url": "https://s3-alpha.figma.com/profile/xxx",
    
    "id": "664682953441304459"
    
    },
    
    "thumbnail_url": null
    
    },
    
    {
    
    "id": "330786684",
    
    ,
    
    "label": null,
    
    "description": null,
    
    "user": {
    
    "handle": "Keisuke",
    
    "img_url": "https://s3-alpha.figma.com/profile/xxx",
    
    "id": "664682953441304459"
    
    },
    
    "thumbnail_url": null
    
    },
    
    ...
    
    "pagination": {
    
    "next_page": "https://api.figma.com/v1/files/yyy",
    
    "prev_page": "https://api.figma.com/v1/files/vvv"
    
    }
    
    }
    

    View Slide

11. Figma API
    2. APIを叩く
    3. レスポンス
    綿貫のサイト
    1.アクセス 4. グラフ化
    誰かの端末
    

    View Slide

12. Team
    Project
    File
    File
    File
    Project
    File
    File
    File
    Project
    File
    File
    File
    

    View Slide

13. "id": Number
    {
    
    "name": String
    
    "projects": [
    
    {
    
    ,
    
    "name": String
    
    },
    
    ...
    
    ]
    
    }
    GET
    
    /v1/teams/:team_id/projects
    

    View Slide

14. "key": String
    {
    
    "name": String
    
    "files": [
    
    {
    
    ,
    
    "name": String,
    
    "thumbnail_url": String,
    
    "last_modified": String
    
    },
    
    ...
    
    ]
    
    }
    :project_id
    GET
    
    /v1/projects/ /files
    

    View Slide

15. 6 Cotributions
    2020-04-08
    Version[]
    {
    
    "versions": ,
    
    }
    :key
    GET
    
    /v1/files/ /versions
    

    View Slide

16. Version History
    File Key
    Project ID
    Team ID
    

    View Slide

17. GitHubへのリンク
    

    View Slide

18. ありがとうございました！
    ご清聴いただき
    

    View Slide