“Designing” with GraphQL

“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

1. Fetch file data
2. Get the styles page
3. Get the typography frame
4. Extract font styles from each group #ReactAdvanced

“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