Create slices directly from your Figma designs

We’re releasing Figma to Prismic slice to makes it easier to turn designs into coded components. It takes a Figma frame and turns it into a structured slice you can start developing right away.

How it works

You select a frame in Figma, export it with the plugin, and Prismic creates the slice model for you. It also generates a starter React or Vue component with the fields already mapped. This removes the manual setup and gives you a clean starting point for development.

What’s included in this first release

This version covers the fundamentals: structure detection, suggested fields, and the initial component. Styling and variations are not part of this release.

What’s coming next

We’re are considering the work on variation management so similar components become variations instead of separate slices. We’re also exploring basic styling support to bring the generated component closer to the design.

Why it matters

Generating slices directly from Figma reduces the time between design and development and helps teams build pages faster.

How to get started

1. Install the plugin in Figma
2. Select a frame.
3. Run the Figma to Prismic slice plugin.
4. Copy the export.
5. Paste it in Slice Machine to generate your slice.

As you start using it, we’d love your feedback so we can continue improving the experience.