A presentation at GraphQL Conf in in Berlin, Germany by Bernardo Raposo
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
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
At first sight, design and GraphQL might seem completely unrelated, but can we use it to make design accessible to everyone?
In this talk we’ll see how GraphQL has the power to revolutionise the way designers, engineers and managers communicate.
You’ll have to query it to believe it!
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.