With Polipo and React, implementing a design from Figma is as simple as writing:

<F layout="MyFigmaPage/MyFigmaFrame" />

The above code will render all the markup and CSS needed to display the frame in a Web page.

Good news: the above code works during Server-Side Rendering (SSR) just as well!

This means that you can easily create a website with the performance, ease of integration, and flexibility of Next.js, using Figma to build your layouts.

Go crazy with your designs!

Your designers would like to create pages with all sort of interesting design elements, images, illustrations, gradients, shadows, but you are scared that it will take forever for your developers to implement. Sounds familiar?

With Polipo, it's still just a single line, no matter how complex your design it.

And you still get to keep all the advantages and flexibility of a Next.js application. You can finally design your website so that it looks the way you want, without compromises!

An example

That's how we built our own website, which you are reading right now: Next.js, Sanity.io (Headless CMS), Figma, and Polipo!

Everything is in the right place:

• our content in Sanity, so anybody in the company can contribute with no friction,
• our SEO-optimized code is in Next.js,
• our visuals are in Figma, where it's easiest to mantain them.

We didn't write a single line of CSS (or Tailwind) for this website: Polipo makes sure that all the visuals, styles and layouts are integrated seamlessly with the content, and kept up-to-date.