A presentation at Figma London Meetup in in London, UK by Bernardo Raposo
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
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
A shorter version of the Making design more human with GraphQL presentation from GraphQL Conf 2019.
We’re going to focus on the figma-graphql library and see how it can be used to make the access to design files more approachable to anyone.
The following resources were mentioned during the presentation or are useful additional information.
The source files of the presentation, made entirely in Figma.
Figma’s developers portal with documentation of the the Figma API
The reimagined Figma API (super)powered by GraphQL
The longer talk about figma-graphql, presented at GraphQL Conf 2019.
Here’s what was said about this presentation on social media.
for free. You
can too.