How to use Polipo

By convention Polipo uses the following files:

polipo.ts

polipo.json

polipo.css

polipo-react.tsx

Layout configuration

Define which designs to import from Figma in the src/polipo.ts file.

src/polipo.ts

import { defineFigmaRoot, defineFigmaLayout } from "polipo/layout";
 
export default defineFigmaRoot({
  layouts: {
    home: defineFigmaLayout({
      path: `HomePage/Mobile`,
      wFill: true,
      "@media (min-width: 1024px)": {
        path: `HomePage/Desktop`,
      },
    }),
    // ... more layouts ...
  },
});

See all the configuration options.

Generated assets

Running polipo export will generate src/polipo.json and src/polipo.css. It is recommended to add these files to Git.

React configuration

The file src/polipo-react.tsx loads the Polipo React library, switching between the development and production versions automatically.

src/polipo-react.tsx

import layoutConfig from "./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,
      });

How to use Polipo

Layout configuration

Generated assets

React configuration

On this page