A presentation at React Advanced London in in London, UK by Bernardo Raposo
“Designing” with GraphQL
#ReactAdvanced
“Designing” with GraphQL @braposo Hi! I’m Bernardo
TravelRepublic @braposo #ReactAdvanced
@braposo “Designing” with GraphQL brps.me/rrp #ReactAdvanced
@braposo “Designing” with GraphQL brps.me/rtl #ReactAdvanced
@braposo “Designing” with GraphQL brps.me/gqlcss #ReactAdvanced
“Designing” with GraphQL @braposo #ReactAdvanced
“Designing” with GraphQL @braposo Figma API figma.com/developers #ReactAdvanced
“Designing” with GraphQL 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 #ReactAdvanced
“Designing” with GraphQL Rigid tree structure @braposo { } “id”: “0:1”, “name”: “Assets”, “type”: “CANVAS”, “children”: [ { “id”: “20:25”, “name”: “Box”, “type”: “COMPONENT”, “children”: [ { “id”: “12:5”, … #ReactAdvanced
“Designing” with GraphQL @braposo Let’s see an example #ReactAdvanced
“Designing” with GraphQL @braposo Get all text styles in a specific frame #ReactAdvanced
“Designing” with GraphQL Get all text styles in a specific frame @braposo
“Designing” with GraphQL @braposo #ReactAdvanced
“Designing” with GraphQL Get all text styles in a specific frame @braposo [ { } … “name”: “caption”, “styles”: { “large”: { “family”: “Arimo”, “size”: “16px”, “weight”: 400, “lineheight”: “140%”, “spacing”: “3.2px” }, … } #ReactAdvanced
“Designing” with GraphQL @braposo What if we could use something simpler? #ReactAdvanced
“Designing” with GraphQL Get all text styles in a specific frame @braposo file(id: “fileID”) { pages(name: “styles”) { frames(name: “typography”) { groups { name texts { name styles { fontSize fontFamily fontWeight } … } #ReactAdvanced
“Designing” with GraphQL @braposo It’s just GraphQL™ #ReactAdvanced
“Designing” with GraphQL @braposo figma-graphql figma-graphql.party #ReactAdvanced
“Designing” with GraphQL @braposo Let’s see it working! #ReactAdvanced
“Designing” with GraphQL @braposo Watch the full talk at brps.me/gqlconf19 #ReactAdvanced
“Designing” with GraphQL @braposo Special thanks: Sara @NikkitaFTW
Thank you!
Andrey @okonetchnikov
Jon @jongold @braposo #ReactAdvanced
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 accessible 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.
A future-proof responsive image component that supports latest <picture> specification.
An animated loop of text nodes for your headings.
graphql-css is a blazing fast CSS-in-GQL™ library that converts GraphQL queries into styles for your components.
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.