Does Gatsby's static build affect how I capture pages for Figma?

Gatsby pre-renders every page to static HTML at build time, then React hydrates the result in the browser. Both gatsby develop and gatsby build produce the same rendered output. The key is to always copy from the DevTools Elements panel — not View Page Source — to capture the hydrated DOM with all client-side enhancements applied. For the most accurate production output, capture from gatsby build && gatsby serve.

Does GraphQL data populate before I copy the HTML?

Yes. Gatsby queries GraphQL at build time and bakes the data into the generated HTML. By the time you open the page in a browser, all GraphQL-populated content — blog post titles, CMS images, product data — is already in the rendered output. You do not need to worry about async fetching or loading states for the static parts of a Gatsby page.

Can I convert Gatsby Theme pages and Gatsby starters to Figma?

Yes. Gatsby Themes and starters are just Gatsby sites with pre-configured components and styles. They generate the same standard HTML and CSS output as any other Gatsby project. Run the dev server or build the project, open the page in your browser, copy the outerHTML from DevTools, and paste into html2design. The plugin works the same regardless of which Gatsby Theme or starter was used.

Gatsby to Figma — Convert Gatsby Sites to Figma Designs

Q: How do I convert a Gatsby site to Figma?

Run your Gatsby site locally with gatsby develop or preview the production build with gatsby build && gatsby serve. Navigate to the page you want in your browser, open DevTools (F12), right-click the root element in the Elements panel, and choose Copy > Copy outerHTML. Paste that HTML into the html2design Figma plugin and click Generate. The plugin converts the fully rendered static output — including GraphQL-populated content and compiled CSS Modules — into native Figma layers.

Gatsby to Figma —
In Two Minutes

Converting a Gatsby site to Figma means running the site locally, copying the rendered static HTML from DevTools, and pasting it into the html2design plugin. Gatsby's static build output, GraphQL-populated content, and CSS Modules all land in Figma as native, editable layers — not screenshots.

What is "Gatsby to Figma"?

"Gatsby to Figma" refers to the process of converting a Gatsby static site page — including its GraphQL-populated content, compiled CSS Modules, and styled-components output — into a native Figma design that designers can edit, annotate, and use as a handoff spec. The html2design Figma plugin enables this workflow by accepting raw HTML copied from your browser's DevTools and generating editable Figma frames from the computed output.

Gatsby is built around static site generation (SSG): at build time, it queries GraphQL data sources, renders React components to HTML, and writes static files to disk. This means every page is pre-rendered with real data before you ever open it in a browser. By the time you copy the outerHTML from DevTools, the page already contains the final content, resolved CSS, and fully hydrated DOM — ready to paste directly into the html2design plugin and generate a pixel-accurate Figma design in under two minutes.

The Gatsby to Figma workflow

Four steps, under two minutes. Works with gatsby develop, gatsby build, Gatsby Themes, and any Gatsby starter.

Step 01

Run your Gatsby site locally

Start the development server with gatsby develop and navigate to the page or route you want to capture. The dev server runs at localhost:8000 by default. No public URL required.

For the most accurate production output — with all optimizations, image processing, and CSS minification applied — run gatsby build followed by gatsby serve. The built site serves at localhost:9000 and reflects the exact output that will be deployed.

Step 02

Copy the rendered HTML from DevTools

Open DevTools (F12) and switch to the Elements panel. For a full-page capture, right-click the <main> element or the top-level Gatsby page wrapper. For a single component, select just that component's root node.

Right-click the element and choose Copy > Copy outerHTML. Always use the Elements panel — not View Page Source — to ensure you get the hydrated, client-side DOM with all React enhancements applied. Gatsby ships a static HTML shell and then hydrates it with React; the Elements panel shows the post-hydration DOM.

Step 03

Paste into html2design and generate

Open Figma, run the HTML to Figma plugin, paste the copied HTML, and click Generate. The plugin reads the computed styles the browser already resolved — Gatsby's CSS Modules hashed class names, styled-components injected styles, or plain global CSS — all baked into the rendered output before the plugin sees the markup.

The result is a native Figma frame: real text layers with correct fonts, fills that reflect your design system's color tokens, and a layer tree that mirrors the page's component hierarchy.

Step 04

Share the Figma frame with your designer

Share the Figma frame link. Your designer can open the frame, add annotations, adjust spacing, and iterate on the design — all without running Gatsby locally or touching the codebase. Because the frame starts from the actual rendered static output, any design changes represent a true delta from the current implementation.

Gatsby's static nature makes it particularly easy to capture multiple page variations — blog post pages, category pages, landing pages — each as a separate Figma frame, organized into a single design document for review or handoff.

Gatsby-specific tips for better Figma output

Gatsby's static build has a few unique characteristics worth understanding before you start capturing pages.

GraphQL data is baked in at build time — no async fetch needed

Gatsby queries all GraphQL data at build time and embeds it directly into the generated HTML. When you open a Gatsby page in the browser, all content — blog titles, CMS images, product descriptions, author bios — is already in the DOM. You do not need to wait for API calls or worry about loading states for the static parts of the page. What you see immediately in the browser is what the plugin will import.

Prefer gatsby build + gatsby serve for production-accurate capture

gatsby develop runs a development version with unoptimized CSS and development-only overlays. For the most accurate representation of what users will see in production, run gatsby build && gatsby serve before capturing. This shows the fully optimized, production-ready output including any CSS purging and image optimization that only runs in the production build.

CSS Modules hashed class names are resolved by the browser

Gatsby compiles CSS Modules into hashed class names like hero-module--title--a7Kx2. The browser resolves these to their final computed CSS values — so when you copy the rendered HTML and paste it into html2design, all the styles are already applied as concrete pixel values. You never need to manually track down which CSS Module file a class belongs to.

Gatsby Image optimized components capture correctly

Gatsby Image (GatsbyImage and StaticImage) renders placeholder images during load and swaps to the optimized image once loaded. Wait for images to fully load before copying the outerHTML — you can verify they are loaded by checking the Elements panel for src attributes pointing to the optimized image files rather than placeholder data URIs.

What you get in Figma

Every import creates native Figma objects — not screenshots, not plugin wrappers.

Real text with CMS-populated content

Blog post titles, headings, and body copy populated from GraphQL data sources — Contentful, Sanity, WordPress, or Markdown — all become real Figma text layers with correct fonts and styles.

Computed spacing from CSS Modules or styled-components

Padding, margin, gap, and layout values are read from the browser's computed styles — not from source CSS Module files or styled-component definitions. What the browser renders is exactly what lands in Figma.

Design tokens as fills

CSS custom properties and Gatsby theme tokens are resolved by the browser to their actual values. var(--color-primary) becomes the exact hex color in Figma fills — reflecting your design system directly.

Layer hierarchy from component structure

HTML class names and element types become Figma layer names. Your .post-header, .hero, and navigation elements are named frames in Figma's layer panel, ready to hand off.

Frequently asked questions

How do I convert a Gatsby site to Figma?

Run gatsby develop (or gatsby build && gatsby serve for production fidelity), navigate to the page, open DevTools, right-click the root element in the Elements panel, and choose Copy > Copy outerHTML. Paste into the html2design Figma plugin and click Generate.

Does Gatsby's static build affect how I capture pages?

Gatsby pre-renders pages to static HTML, then hydrates with React in the browser. Always copy from the DevTools Elements panel — not View Page Source — to get the hydrated DOM. For production-accurate output, prefer gatsby build && gatsby serve over gatsby develop.

Is GraphQL data already populated when I copy the HTML?

Yes. Gatsby queries GraphQL at build time and embeds the data directly into the static HTML. When you open the page in a browser, all content is already in the DOM — no async fetching needed. You copy exactly what you see, with the real data already present.

Can I convert Gatsby Themes and starters to Figma?

Yes. Gatsby Themes and starters produce the same standard HTML and CSS output as any other Gatsby project. Run the dev server or build, open the page in your browser, copy the outerHTML from DevTools, and paste into html2design. The plugin works the same regardless of which theme or starter was used.