Rethinking the Figma API

#FigmaLondon

Rethinking the Figma API @braposo Hi! I’m Bernardo

TravelRepublic @braposo #FigmaLondon

Rethinking the Figma API @braposo Figma API figma.com/developers #FigmaLondon

Rethinking the Figma API Multiple REST endpoints @braposo GET /v1/files/:key GET /v1/images/:key GET /v1/teams/:team_id/projects GET /v1/projects/:project_id/files GET /v1/files/:key/comments POST /v1/files/:key/comments GET /v1/teams/:team_id/components GET /v1/teams/:team_id/styles #FigmaLondon

Rethinking the Figma API Rigid file structure @braposo { } “id”: “0:1”, “name”: “Assets”, “type”: “CANVAS”, “children”: [ { “id”: “20:25”, “name”: “Box”, “type”: “COMPONENT”, “children”: [ { “id”: “12:5”, … #FigmaLondon

Rethinking the Figma API @braposo API is built for machines #FigmaLondon

Rethinking the Figma API @braposo Let’s see an example #FigmaLondon

Rethinking the Figma API @braposo Get all text styles in a specific frame #FigmaLondon

Rethinking the Figma API Get all text styles in a specific frame @braposo

  1. Fetch file data
  2. Get the styles page
  3. Get the typography frame
  4. Extract font styles from each group #FigmaLondon

Rethinking the Figma API @braposo #FigmaLondon

Rethinking the Figma API Get all text styles in a specific frame @braposo [ { } … “name”: “caption”, “styles”: { “large”: { “family”: “Arimo”, “size”: “16px”, “weight”: 400, “lineheight”: “140%”, “spacing”: “3.2px” }, … } #FigmaLondon

@braposo Rethinking the Figma API What if we could use something simpler? #FigmaLondon

@braposo Rethinking the Figma API Get all text styles in a specific frame file(id: “fileID”) { frames(name: “typography”) { groups { name texts { name style { fontSize fontFamily … } } } } #FigmaLondon

Rethinking the Figma API @braposo It’s just GraphQL™ #FigmaLondon

@braposo Rethinking the Figma API figma-graphql figma-graphql.party #FigmaLondon

Rethinking the Figma API @braposo Human-first API #FigmaLondon

Rethinking the Figma API @braposo Let’s see it working! #FigmaLondon

@braposo Rethinking the Figma API Why should you use it? #FigmaLondon

@braposo Rethinking the Figma API Shortcuts Unified queries Extended information #FigmaLondon

@braposo Rethinking the Figma API Special thanks: Sara @NikkitaFTW

Thank you!

Andrey @okonetchnikov

Jon @jongold @braposo #FigmaLondon