Skip to main content

Deploy to production

We will create a new NextJS project and connect it to Figma using our plugin.

1. Export your layouts from Figma​

While Polipo is running (npx polipo), in a seperate terminal run:

npx polipo export -o src/app/layout.json

This command will take a snapshot of your Figma file to be used in your project.

2. Pass the layout data to FigmaProvider​

Import the generated JSON file as a variable:

import layoutData from "./layout.json";

and pass it to <FigmaProvider> as the layoutData prop, such as in:

<FigmaProvider layoutData={layoutData} />

The whole layout file now is:

layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { nextSsrCssPlugin } from "polipo/next";
import { FigmaProvider, devPlugin, googleFontsPlugin } from "polipo/react";
import "./globals.css";
import layoutData from "./layout.json";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <FigmaProvider
          layoutData={layoutData}
          plugins={[
            ...(process.env.NODE_ENV === "development" ? [devPlugin] : []),
            nextSsrCssPlugin,
            googleFontsPlugin,
          ]}
        >
          {children}
        </FigmaProvider>
      </body>
    </html>
  );
}

Your project is now ready to be deployed.