Making design more human with GraphQL

Making design more human with GraphQL

#GraphQLConf

Making design more human with GraphQL Hi! I’m Bernardo

TravelRepublic @braposo @braposo

Making design more human with GraphQL Design @braposo GraphQL

Making design more human with GraphQL @braposo Evolution of design tools

Making design more human with GraphQL From dumb to smart @braposo

Making design more human with GraphQL @braposo Figma API figma.com/developers

Making design more human with GraphQL Multiple endpoints 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 @braposo

Making design more human with GraphQL Rigid tree structure { } “id”: “0:1”, “name”: “Assets”, “type”: “CANVAS”, “children”: [ { “id”: “20:25”, “name”: “Box”, “type”: “COMPONENT”, “children”: [ { “id”: “12:5”, … @braposo

Making design more human with GraphQL Let’s see an example @braposo

Making design more human with GraphQL Get all text styles in a specific frame @braposo

Making design more human with GraphQL 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

Making design more human with GraphQL @braposo

@braposo Making design more human with GraphQL Get all text styles in a specific frame [ { } … “name”: “caption”, “styles”: { “large”: { “family”: “Arimo”, “size”: “16px”, “weight”: 400, “lineheight”: “140%”, “spacing”: “3.2px” }, … }

Making design more human with GraphQL What if we could use something simpler? @braposo

Making design more human with GraphQL Get all text styles in a specific frame file(id: “fileID”) { pages(name: “styles”) { frames(name: “typography”) { groups { name texts { name styles { fontSize fontFamily fontWeight } … } @braposo

Making design more human with GraphQL It’s just GraphQL™ @braposo

Making design more human with GraphQL figma-graphql figma-graphql.party @braposo

@braposo Making design more human with GraphQL v2 available today Rebuilt in TypeScript Human-first API figma-graphql.party

Making design more human with GraphQL @braposo

Making design more human with GraphQL Designer Developer @braposo Manager

Making design more human with GraphQL Designer @braposo Get the background colours of all the global styles to update their Design System documentation

Making design more human with GraphQL Designer { } file(id: “fileID”) { styles(type:FILL) { name styles { color { r g b } } } } @braposo

Making design more human with GraphQL Developer Export all icons in a design document to generate up-to-date React components @braposo

Making design more human with GraphQL Developer { } file(id: “fileID”) { pages(name: “Icons”) { components { name size { width height } export(format: svg) } } } @braposo

Making design more human with GraphQL Manager @braposo Get the screenshots of the prototype screens for a few different features to present at a product meeting

Making design more human with GraphQL Manager { } projects(teamId: “teamID”) { featureA: files(name: “Feature A”) { pages(name: “Prototype”) { frames { name export(format: jpg) } } } … } @braposo

Making design more human with GraphQL GraphQL makes design more human @braposo

Making design more human with GraphQL @braposo GraphQL makes technology more human

Making design more human with GraphQL @braposo Complex systems become accessible to everyone

Making design more human with GraphQL Human-first API @braposo

Making design more human with GraphQL @braposo

Making design more human with GraphQL How can we make our systems more human? @braposo

@braposo Making design more human with GraphQL Special thanks: Sara @NikkitaFTW

Thank you!

Andrey @okonetchnikov

Jon @jongold @braposo