Usage with React

Set up

The steps in this section are not needed if your start with our example.

Configure dev and prod components

Create the components ReactFigma and ReactFigmaProvider in one of two ways:

in development, by calling createReactFigmaDev and passing your layout configuration,
in production, by calling createReactFigma and passing the content of polipo.json generated during export (e.g. npx polipo export).

src/polipo-react.tsx

import layoutConfig from "@/app/polipo";
import { createReactFigma, createReactFigmaDev } from "polipo/react";
import "./polipo.css";
import data from "./polipo.json";
 
export const { ReactFigma, ReactFigmaProvider } =
  process.env.NODE_ENV === "development"
    ? createReactFigmaDev({
        root: layoutConfig,
      })
    : createReactFigma({
        data,
      });

Add the root provider

Wrap your app in ReactFigmaProvider, for example in app/layout.tsx (for Next.js).

layout.tsx

import { ReactFigmaProvider } from "@/app/polipo-react";
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <ReactFigmaProvider>
          {children}
        </ReactFigmaProvider>
      </body>
    </html>
  );
}

Basic Usage

Rendering a layout is as easy as writing

<ReactFigma layout="<YOUR_LAYOUT>" />

where <YOUR_LAYOUT> is one of the layouts defined within defineFigmaRoot.

For example:

<ReactFigma layout="home" />

Customizing elements

You can customize any element in the rendered layout. To customize elements, pass as children a JavaScript object which maps names to JSX code.

For example:

<ReactFigma layout="home">
  {{
    Headline: <h1 />
  }}
</ReactFigma>

The above code changes the element corresponding to the Figma layer named Headline to use an <h1> tag. Everything else (both content and style) is unaffected.

With this technique you can:

change the tag name to any HTML tag,
add custom attributes,
add event listeners,
replace the children of the element.

All of the above can include dynamic content as well.

Changing the tag name and adding props

To use a specific tag name, just write the corresponding JSX. You can also add additional props, both attributes and event listeners. For example:

<ReactFigma layout="home">
  {{
    MyButton: <button type="button" onClick={() => {/* ... */}} />
  }}
</ReactFigma>

At the moment only native elements are supported for this syntax. If you need to use a component or custom JSX code, wrap it in a fragment. For example:

<ReactFigma layout="home">
  {{
    MyContainer: (
      <>
        <MyComponent />
      </>
    )
  }}
</ReactFigma>

If you pass children, they will replace the children from Figma.

<ReactFigma layout="home">
  {{
    MyButton: <button type="button" onClick={() => {/* ... */}}>button label</button>
  }}
</ReactFigma>

When replacing the children, the Figma styling will be lost. You can use a nested <ReactFigma> to render a different layout inside.

Removing the children

To remove the children, pass null. For example:

<ReactFigma layout="home">
  {{
    MyInput: <input name="firstName">{null}</input>
  }}
</ReactFigma>

Implicit tag names

If you want to change the children without specifying a the tag name, use can use a fragment <>. For example:

<ReactFigma layout="home">
  {{
    MyCounter: <>{count}</>
  }}
</ReactFigma>

Customizing the root element

Use :root as key to customize the root element of a layout. For example:

<ReactFigma layout="home">
  {{
    ':root': <main />
  }}
</ReactFigma>

Customizing wrapper elements

Polipo sometimes needs to introduce additional wrapper elements in-between Figma layers.

Support for customizing wrapper elements is coming soon. Please contact us if you need this feature.

Usage with React

On this page