has anyone ever tried pulling in Sanity data from Figma?

2 replies
Last updated: Dec 31, 2020
has anyone ever tried pulling in Sanity data from Figma?
AI Update

Yes, people have explored this! While there isn't an official Sanity-to-Figma plugin available in the Figma community marketplace, you can definitely pull Sanity data into Figma using a few different approaches:

1. Build a Custom Figma Plugin

You can create a custom Figma plugin that fetches content from Sanity's API. This would involve:

  • Using Figma's Plugin API to build your plugin
  • Making HTTP requests to Sanity's Content API using GROQ queries
  • Populating Figma text layers, frames, or components with your CMS content

Since Sanity provides a straightforward HTTP API, you can query your content using GROQ and map it to Figma elements. You'd need to include your Sanity project ID and dataset in the API calls, and if your content is private, include an authentication token.

2. Use Generic JSON/Data Population Plugins

Existing Figma plugins like Data Populator or similar JSON-based content tools can work with Sanity. The workflow would be:

  • Export your Sanity content as JSON through a GROQ query (you can do this directly in your browser: https://YOUR-PROJECT-ID.api.sanity.io/v2021-10-21/data/query/YOUR-DATASET?query=YOUR_GROQ_QUERY)
  • Use a Figma plugin that accepts JSON data to populate your designs

3. Why This Integration Makes Sense

This is actually a pretty common use case for design teams who want to:

  • Design with real content instead of Lorem Ipsum
  • Ensure designs accommodate actual content lengths and edge cases
  • Preview localized content across different languages
  • Keep design mockups in sync with production content

Basic Implementation Example

If you're building a custom Figma plugin, the basic structure would query Sanity like this:

const query = '*[_type == "post"][0..10]{title, description}';
const apiVersion = '2021-10-21'; // Specify an API version
const url = `https://YOUR-PROJECT-ID.api.sanity.io/v${apiVersion}/data/query/production?query=${encodeURIComponent(query)}`;

fetch(url)
  .then(res => res.json())
  .then(data => {
    // Use Figma Plugin API to populate your design
    // data.result will contain your Sanity content
  });

While there isn't a turnkey solution yet, this is definitely doable and could make a great community plugin if you build one! The Sanity HTTP API and GROQ documentation would be your best resources for this project. Make sure to specify an API version (like 2021-10-21 or 2025-02-19) to ensure consistent behavior.

Yes. I made a proof of concept plugin back in the days. Totally doable :)
Yes. I made a proof of concept plugin back in the days. Totally doable :)

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?