Skip to main content

Getting started

Let's start with Polipo in 5 minutes.

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

1. Create new project​

Create a new NextJS + Typescript project (see also the NextJS docs):

npm create next-app

Then, cd into the created directory.

2. Install Polipo​

npm i polipo

3. Start the project​

Start Polipo:

npx polipo

In a separate terminal, start NextJS:

npm run dev

4. Add FigmaProvider​

Wrap the entire app in a <FigmaProvider>. Add the plugin devPlugin in dev mode (to enable live sync). You can also add the plugins nextSsrCssPlugin (to enable SSR on Next) and googleFontsPlugin (to automatically download fonts from Google Fonts).

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";

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
          plugins={[
            ...(process.env.NODE_ENV === "development" ? [devPlugin] : []),
            nextSsrCssPlugin,
            googleFontsPlugin,
          ]}
        >
          {children}
        </FigmaProvider>
      </body>
    </html>
  );
}

5. Prepare Figma​

Create a new Figma file. Make sure the current page is called Page 1.

Add a frame and rename it to Desktop. Add some text or elements to the frame.

Now run the Figma plugin: Right-click -> Plugins -> Manage plugins... -> Search "Polipo" -> Click on Polipo.

You should see the message Connected.

6. Display your first Figma frame​

Display the Figma frame on the main page:

page.tsx
import { F } from "polipo/react";

export default function Home() {
  return <F layout="Page1/Desktop w-fill"></F>;
}

Now you can update the frame in Figma and you'll see your changes immediately.