Figma to Prismic slice

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 doOne-click export: Select any frame or component and generate an export you can use directly in your Prismic project.

Auto-detected structure: The plugin identifies key elements in your design and prepares a clean model with suggested fields.

Ready for Slice Machine: Paste your export into Slice Machine and generate a fully structured slice with mapped fields.

Skip repetitive setup: No more naming fields, recreating structure, or configuring slices manually.

Built for teams who iterate often: Ideal for agencies and teams who build and iterate often.

How it works⚠️ You need to be running at least Slice Machine v2.20.0 to be able to generate slices.

Select a frame in Figma.

Run the Figma to Prismic plugin.

Copy the export.

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 forDevelopers who convert Figma designs into components regularly.

Agencies working across multiple client sites with high iteration cycles.

What’s included todaySlice model generationStarter component file (React or Vue)Automatic field mappingClean structure that reflects your designWhy teams use itFigma 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.