Figma to Prismic slice

About this plugin

Turn any Figma frame into a structured page section you can generate in Prismic’s development tool, Slice Machine. No manual field setup or rebuilding components by hand.

Once you paste your export into Slice Machine, Prismic turns it into a ready-to-edit slice, the reusable content component you use to build pages.

What you can do

1. One-click export: Select any frame or component and generate an export you can use directly in your Prismic project.
2. Auto-detected structure: The plugin identifies key elements in your design and prepares a clean model with suggested fields.
3. Ready for Slice Machine: Paste your export into Slice Machine and generate a fully structured slice with mapped fields.
4. Skip repetitive setup: No more naming fields, recreating structure, or configuring slices manually.
5. Built for teams who iterate often: Ideal for agencies and teams who build and iterate often.

How it works

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

You’ll get a structured slice model and a starter React or Vue component with fields already mapped.

Who it’s for

1. Developers who convert Figma designs into components regularly.
2. Agencies working across multiple client sites with high iteration cycles.

What’s included today

1. Slice model generation
2. Starter component file (React or Vue)
3. Automatic field mapping
4. Clean structure that reflects your design

Why teams use it

Figma to Prismic removes the repetitive setup work that slows teams down. By generating slice structure directly from design, teams can move straight to the creative coding work and ship components faster.