Rethinking the Figma API

Slide 1

#FigmaLondon

Slide 2

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

TravelRepublic @braposo #FigmaLondon

Slide 3

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

Slide 4

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

Slide 5

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

Slide 6

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

Slide 7

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

Slide 8

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

Slide 9

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

Fetch file data
Get the styles page
Get the typography frame
Extract font styles from each group #FigmaLondon

Slide 10

Rethinking the Figma API @braposo #FigmaLondon

Slide 11

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

Slide 12

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

Slide 13

@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