Implementing in React a design from Figma is as simple as writing:

<F layout="MyFigmaPage/MyFigmaFrame" />

That's right! Just one line of code will renderer anything you have in Figma under the name MyFigmaFrame (in page MyFigmaPage).

This includes layouts, texts, images, icons, borders, backgrounds, colors, gradients, fonts, and more. Pretty impressive, right?

How to make it responsive?

Making a layout responsive starts in Figma. There are two ways:

1. use auto-layout,
2. create variants of your frame/component for different screen sizes.

Auto-layout

When you use auto-layout in Figma, Polipo renders markup and CSS that adapts to size automatically.

To let your component or screen automatically resize, just add the w-fill modifier:

<F layout="MyFigmaPage/MyFigmaFrame w-fill" />

Now your layout will automatically adapt its width to the screen size (or the containg element), exactly in the same way as if you were resizing it in Figma.

That's the power of Polipo: it's predictable. It does what the developer asks it to do, nothing more, nothing less. And it's 100% deterministic: it takes away the guesswork from the developers, so that it can be used reliably, at scale.

Responsive variants using breakpoints

But what if I want the layout to be different on desktops, tablets and smartphones? Polipo got you covered:

<F layout="MyPage/MyFrameForMobile md:MyPage/MyFrameForDesktop w-fill" />

In the above example, Polipo will render the frame MyFrameForMobile on small screens, and MyFrameForDesktop on larger screens (at least 768 pixels wide). The breakpoint is specified by the selector md:.

Under the hood, Polipo renders a unified markup that works for both frames, and introduces media queries in CSS to display either variant depending on screen size. The markup unification is deterministic and can be controlled, so the end result is as good as writing custom responsive code.

How to make it interactive and accessible?

The is probably the most important feature of Polipo. The developer has full control over the rendered markup, allowing Polipo to be used reliably even in the most complex and demanding use cases. This includes:

• changing the tag names (e.g. <article>, <button>, <li>, etc.),
• adding event listeners (e.g. onClick),
• introducing dynamic content (e.g. data from useState, loaded from an API, and so on),
• extracting reusable components, each with its own props and state,
• mixing Polipo and non-Polipo React code in any way:
  • Polipo-based components inside non-Polipo pages/screens/components,
  • non-Polipo components inside Polipo-based pages/screens/components,
  • arbitrary level of nesting between the two.

This is done using four mechanisms:

1. custom tags and props forwarding,
2. name-based overrides,
3. children overrides,
4. custom values and states.

Custom tags and props forwarding

Suppose you are rending a Button from Figma as follow:

<F layout="MyFigmaPage/MyButton" />

Since Figma has no concept of interactive elements, by default Polipo just renders a <div> that looks like your button. To make it a <button>, just add a prop as="button":

<F layout="MyFigmaPage/MyButton" as="button" />

Done! To handle clicks, add onClick as usual:

<F
  layout="MyFigmaPage/MyButton"
  as="button"
  onClick={() => {
    alert("Button clicked!");
  }}
/>

Now you have a button that looks exactly like your button in Figma (perhaps with fancy gradients, borders, shadows, and what not) and does whatever you want when you click it. Pretty neat huh?

A quick aside: hover states

A button wouldn't be a button if it does not react when you hover it. That's easy:

<F layout="MyFigmaPage/MyButton hover:MyFigmaPage/MyButtonHovered" as="button" />

Name-based and children overrides

Now suppose you are rendering an entire screen from Figma.

<F layout="MyFigmaPage/MyFigmaFrame w-fill" />

You can add interactivity to some elements in the screen, such as a call-to-action button. Here is how it looks like:

<F layout="MyFigmaPage/MyFigmaFrame w-fill">{{
  CallToAction: <F as="button" onClick={/*...*/} />
}}</F>

What about rendering a list, for example a list of messages? Here is as example:

<F layout="MyFigmaPage/MyFigmaFrame w-fill">{{
  Messages: (
    <F>
      {messages.map((message) => (
        <F layout="MyFigmaPage/Message">{message}</F>
      ))}
    </F>
  )
}}</F>

Other customization options

Polipo is very flexible in the way it lets the developer customize the rendered markup. Check out our documentation to learn more!