Populating Figma with Product Information from GraphQL

Figma is awesome for collaborative design. A neat feature of Figma is that it has a plugin system and an API. In this example, we are connecting a product catalogue from the PIM in Crystallize to Figma and then the catalogue is exported to a PDF. I use the GraphQL Data Fill plugin written by Gerard Lamusse. 

The product content in this example is stored in Crystallize and is available via the GraphQL PIM API. I have added three coffee products in a simple product catalogue. I will use these products for the export to Figma and finally exported to a PDF catalogue.

To import the product catalogue from the Crystallize PIM I am using the GraphQL Data Fill plugin in Figma. We are basically using the product information from our PIM to populate a design in Figma. This way the designers have full control over the presentation while the product data is managed centrally in the PIM. No cut and paste or punching product data multiple times.

This is a simple use case for this is to generate a PDF product catalogue from a headless PIM. You can use this approach for designers to work with real content when designing. No more lorem ipsum content while designing.

The steps involved to achieve the PDF from products in the PIM catalogue are:

• Create product catalogue in the Crystallize PIM
• Install the GraphQL Data Fill plugin in Figma
• Create a coffee catalogue template frame in Figma
• Connect the GraphQL Data Fill plugin to the Crystallize GraphQL API
• Select the template frame and click generate in the GraphQL Data Fill plugin
• Delete the template frame (so it will not be included in the PDF export)
• Export frames to PDF
• Voilà

I have shared the Figma coffee catalogue design file which includes both the initial template and a page where you have the populated product catalogue.

The GraphQL query used in this example fetches all products under the Coffee folder in the PIM catalogue. We fetch the name, the first image and the price from these products to make the example simple. You can, of course, fetch any product information and use it in your Figma design file. 

{
  catalogue(path: "/coffee", language: "en") {
    name
    children {
      ... on Item {
        name
        image: component(id: "image") {
          content {
            ... on ImageContent {
              images {
                url
              }
            }
          }
        }
      }
      ... on Product {
        variants {
          price
        }
      }
    }
  }
}