Designing with GraphQL


Brian Lovin @brian_lovin

Brian is a co-founder at Spectrum, a platform for building communities online. He has a background in product design and previously worked at Facebook and Buffer. Brian currently lives and works in SF with his dog, Taco.

The Gap

Two side of the gap, one side being actually developing the project and the other side is designing and architecture.  Our tools make a difference* The Gap exist for a reason and that is to“close the gap”

  • Designers love nudging pixel and selecting colors and it is a problem that design tools(sketch and photoshop) don’t infer the end product.
  • Design tools make an illusion that are too imprecise for development tools
  • Development tools are declarative and precise

The top is a design tool where you nudge pixels. The bottom is a GraphQL error that has a precise error.

Design Tools


Good News

The Gap is closing because these tools

  • figma
  • framer
  • storybook
  • compositor lab

GraphQL is expressive and more about how date interacts. GraphQL does not care about the underlying data model.

mind the gap

Mind the gap. GraphQL is not existent for its own sake, and it is not just a development tool— it can be a design tool. Exposing designers to the developments areas will empower designers to make a better product with developers.

Get Cody, the AI coding assistant

Cody makes it easy to write, fix, and maintain code.