Can I import a statically generated Next.js site into Figma without running a dev server?

Yes. Run npm run build and then npm run start (or npx serve out for a static export). Open the built site in your browser, navigate to the page, and copy the outerHTML from DevTools as usual. This is especially useful for capturing the exact production-optimized output rather than the development version.

Next.js to Figma — Convert Next.js Pages to Figma Designs

Q: How do I convert a Next.js page to Figma?

Run your Next.js app locally with npm run dev. Navigate to the page you want to capture in your browser. Open DevTools (F12), find the root element in the Elements panel, right-click it, and choose Copy > Copy outerHTML. Paste that HTML into the html2design Figma plugin and click Generate. The plugin converts the fully rendered, hydrated output — including server-rendered data — into native Figma layers.

Q: Does Next.js SSR or SSG affect how I capture pages for Figma?

No — and that is the key advantage of this workflow. Whether your Next.js page uses getServerSideProps, getStaticProps, or React Server Components, the browser displays the fully rendered output. Always copy from the DevTools Elements panel (not View Page Source), which shows the hydrated, client-side DOM with all dynamic data applied. The html2design plugin reads that final output, not the source files.

Q: Can I import Next.js App Router pages into Figma?

Yes. App Router pages — including those built with React Server Components — render to standard HTML in the browser. Run npm run dev, navigate to the route, copy the rendered DOM from DevTools, and paste it into html2design. The distinction between Server Components and Client Components is invisible to the browser: you always capture the final rendered HTML.

Next.js to Figma —
In Two Minutes

Converting Next.js pages to Figma means running your app locally, copying the hydrated HTML from DevTools, and pasting it into the html2design plugin. App Router, Pages Router, SSR, SSG, and React Server Components all land in Figma as native, editable layers — no public URL, no Chrome extension.

What is "Next.js to Figma"?

"Next.js to Figma" refers to the workflow of converting a rendered Next.js page — whether server-side rendered, statically generated, or built with the App Router — into a native Figma design that designers can edit, annotate, and use for handoff. The html2design Figma plugin enables this by accepting raw HTML copied from your browser's DevTools and generating editable Figma frames from the computed output.

Next.js is unique because it pre-renders pages on the server — via SSR, SSG, or React Server Components — before delivering them to the browser. This means by the time you open DevTools, the page already contains the real data, the resolved styles, and the fully hydrated markup. Copying that output is more reliable than trying to screenshot a partially-loaded state: you get the exact DOM the user sees, turned into a localhost-only Figma design in under two minutes.

The Next.js to Figma workflow

Four steps, under two minutes. Works with Next.js 13, 14, 15 — App Router, Pages Router, and static export.

Step 01

Run your Next.js app locally

Start the development server with npm run dev and navigate to the page or route you want to capture. No staging deploy, no public URL required — everything runs on localhost:3000.

If the page depends on authenticated data or specific route parameters, log in and navigate to the correct state first. For pages that load data dynamically (SWR, React Query, server actions), wait for the data to fully render before copying. The plugin captures whatever the browser displays — fetch the right state first.

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 <div id="__next">. For a single component, select just that component's root node.

Right-click the element and choose Copy > Copy outerHTML. Do not use View Page Source — that shows the raw server-rendered HTML before React hydrates the page. The Elements panel always reflects the live, fully-hydrated 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 — your Tailwind utility classes, CSS Modules, or global stylesheets are all baked into the rendered output before the plugin ever sees the markup.

The result is a native Figma frame: real text layers with correct fonts, fills that reflect your CSS custom properties, and a layer tree that mirrors the component hierarchy. No screenshot, no rasterized image.

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 the Next.js app or touching the codebase. Because the Figma frame starts from the actual rendered page, any changes represent a true delta from the current implementation.

For team handoffs, you can use this approach to capture multiple page states — logged-in vs logged-out, empty state vs populated, mobile breakpoint vs desktop — and organize them into a single Figma document for designer review.

Next.js-specific tips for better Figma output

Next.js has rendering characteristics that make it especially well-suited to this workflow — and a few gotchas worth knowing.

Always copy from the Elements panel, not View Page Source

Next.js sends server-rendered HTML before React hydrates the page. View Page Source shows this initial HTML, which may be missing client-side state, dynamic data loaded after hydration, or styles applied by useEffect. The DevTools Elements panel always shows the live, fully-hydrated DOM — always use that for your copy.

CSS Modules and Tailwind are resolved automatically

Next.js compiles CSS Modules into hashed class names (e.g. styles_heading__xK2mP) and injects them at build time. Tailwind classes are also compiled and purged. By the time the browser renders the page, all of these are resolved to their computed CSS values. The html2design plugin reads those computed values — you never need to worry about module names or utility classes.

Capture SSG pages from the built output for production fidelity

If your pages use getStaticProps or the App Router's static generation, the dev server may not reflect the exact production output. For the most accurate capture, run npm run build && npm run start to preview the production build locally. Navigate to the page and copy from DevTools as usual.

React Server Components render to plain HTML — just like client components

Server Components run on the server and send pre-rendered HTML to the browser. From the browser's perspective, they are indistinguishable from client-rendered output. You copy, paste, and generate in Figma the same way. There is no special handling needed for RSC — the output you see in the Elements panel is exactly what html2design will convert.

What you get in Figma

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

Editable text layers with correct fonts

Every text node — including server-rendered content from a CMS or database — becomes a real Figma text layer with the correct font family, size, weight, line height, and color.

Computed spacing from Tailwind or CSS Modules

Padding, margin, gap, and flex/grid layout values are read from the browser's computed styles — not from source Tailwind classes or CSS Module declarations. What renders is what lands in Figma.

CSS custom properties as fills

Next.js apps often define design tokens in :root or via Tailwind's config. The browser resolves var(--foreground) to its actual hex value before html2design reads it — Figma fills reflect your exact design tokens.

Named layer hierarchy from class names

HTML class names and element types become Figma layer names. Your .hero-section or nav becomes a named frame in Figma's layer panel — navigable and ready to hand off.

Frequently asked questions

How do I convert a Next.js page to Figma?

Run npm run dev, navigate to the page, open DevTools, right-click the root element in the Elements panel, and choose Copy > Copy outerHTML. Paste the HTML into the html2design Figma plugin and click Generate. The plugin converts the fully rendered, hydrated output into native Figma layers.

Does Next.js SSR or SSG affect how I capture pages for Figma?

No — that is the key advantage. The browser always shows you the fully rendered output regardless of whether the page used SSR, SSG, or RSC. Copy from the DevTools Elements panel (not View Page Source) to ensure you get the hydrated, client-side DOM with all dynamic data applied.

Can I import Next.js App Router pages into Figma?

Yes. App Router pages and React Server Components render to standard HTML in the browser. Run the dev server, navigate to the route, and copy the DOM from DevTools. The plugin works the same way regardless of whether you are using the Pages Router or App Router.

Can I capture a statically exported Next.js site without running a dev server?

Yes. Run npm run build and then npm run start (or npx serve out for a static export). Open the built site in your browser and copy the outerHTML from DevTools as usual. This captures the production-optimized output rather than the development version.