Skip to main content

Navigation

  • Client impact
  • Writing

AI Solutions

  • AI Systems
  • AI Development

Software teams

  • Design Systems
  • Product Design & Engineering
  • API Platforms
  • View all services for software teams
Get in touch
  • AI Systems

    Model-agnostic AI systems and agents that do real work

    AI Development

    Custom apps and tools built with AI-enabled engineering

  • Design Systems

    Depth of experience that few can match

    Product Design & Engineering

    Experts in cross-functional collaboration

    API Platforms

    Node.js, React, & GraphQL at scale


    View all services for software teams
  • Client impact
  • Writing
  • Contact

Writing · May 24th, 2023 · 2 min read

Ben Derham avatarBen Derham avatar
Ben Derham

Visualising a schema-led approach using FigJam

Thinkmill uses a schema-led approach to design, which involves building visual representations of data structures to help teams understand the underlying relationships and dependencies. Recently, we used the Schema Nodes FigJam Widget to visualise the schema and relationships.

Services discussed

  • UX & UI Design

Technology discussed

  • Figma,
  • GraphQL

Tagged in

  • Method

At Thinkmill, we believe in taking a schema-led approach to design. This approach involves building visual representations of data structures to help teams understand the underlying relationships and dependencies.

Recently, we applied this approach while working on a piece of accounting software. Our goal was to simplify and streamline the process of disbursing funds from a trust account to third-party creditors.

To achieve this, we needed the entire team to understand the underlying data structure and relationships. We decided to use fellow Thinkmiller @jordangeizer’s Schema Nodes FigJam Widget to visualise the GraphQL schema and establish a common vocabulary between team members.

Using the widget, we listed each entity and built out each data object with its respective type. We then highlighted any dependencies or relationships between them.

GraphQL Schema presented using Schema Nodes FigJam WidgetGraphQL Schema presented using Schema Nodes FigJam Widget

GraphQL Schema presented using Schema Nodes FigJam Widget

We also used the widget to identify any queries or mutations required, as well as their resulting data object.

GraphQL Operations presented using Schema Nodes FigJam WidgetGraphQL Operations presented using Schema Nodes FigJam Widget

GraphQL Operations presented using Schema Nodes FigJam Widget

A visual representation of the GraphQL schema, in a shareable format such as FigJam, is much more accessible to all team members than coding it up or scribbling it on a whiteboard.

Version of the Pepe Sylvia meme with text "Trying to explain schemas before schema nodes"Version of the Pepe Sylvia meme with text "Trying to explain schemas before schema nodes"

This approach helped us establish a common vocabulary and shared understanding of the data structure among the team. By visualising the schema and relationships, we were able to simplify and streamline the process of disbursing funds from a trust account to third-party creditors.

If you’re interested in trying out a schema-led approach in your team, check out @jordangeizer’s Schema Nodes FigJam Widget here.

Services discussed

  • UX & UI Design

Technology discussed

  • Figma,
  • GraphQL

Tagged in

  • Method
Ben Derham avatarBen Derham avatar
Ben Derham

Software Engineer. Helping teams solve tricky problems. Will stop to pat your dog.

Related content

  • Your agent believes that docs folder

    article

    September 2026·8 min read
  • Designing beyond the median user

    article

    June 2026·10 min read
  • A behavioural framework for the monsters in your team

    article

    May 2026·5 min read
  • Designing with APIs: A practical guide for beginners

    article

    May 2025·
    (opens in new tab)
  • Storybook and Mock APIs: A Powerful Prototyping Combo

    article

    May 2024·12 min read
  • Unleashing Designers with Tailwind CSS

    talk

    April 2024

Have an idea to explore?

Get in touch

Footer

Thinkmill is a member of the Tech Council of Australia(opens in new tab).

AI Solutions

  • AI Systems
  • AI Development

Software teams

  • Design Systems
  • Product Design & Engineering
  • API Platforms
  • View all software teams

Client impact

  • ELMO
  • Tiimely
  • Atlassian
  • Reckon
  • AnywhereWorks
  • View all client impact

Open Source

  • Keystone (opens in new tab)
  • Keystatic (opens in new tab)
  • React Select (opens in new tab)
  • Classnames (opens in new tab)
  • Manypkg (opens in new tab)
  • Changesets (opens in new tab)