Generate Next.js Components from Figma to Use Them as Slices in Prismic

The first step is to tag our designs. Tagging allows us to turn our designs into working components, for example, buttons, dropdowns, inputs, and more. 

You can also work with popular UI libraries such as Material and Bootstrap by tagging your elements.

For this app, you’ll notice items like:

1. Buttons
2. Images
3. Text

Now you can make your designs responsive by configuring the styles in the Styles & Layouts tab.

Select your components that need to be responsive and on the Locofy plugin, under the Styles & Layouts tab, you will find different media queries & states. Select the breakpoint you want to make your design responsive to and then change the styles and layout accordingly.

You can also use auto layout for your designs for responsiveness and use the Locofy plugin to take care of layouts on different screen sizes.

You can trigger actions to build fully featured apps and websites. You can head over to the ‘Actions’ tab and assign actions for click events.

You can scroll into view and open popups and URLs amongst other actions.

Now that our designs are tagged correctly and responsive, we can preview them.

To preview your design, select the frame or layer that you want to view, and click the “Preview” button.

Once you are satisfied with your preview, you can sync your designs to Locofy Builder to add more advanced settings, share your live prototype, and export code.

Click the “View Code” button at the bottom right corner of the plugin & select the frames. In our case, we’ll be syncing both frames.

Once the sync is complete, click on “View code in the Builder”.

You need to turn code generated by Locofy into components inside the Locofy Builder. This allows us to split our code into components that we can later import into our Prismic project as slices.

For each section, we expect certain props such as images, titles, button text, and alike props. You can quickly add these props on the Locofy builder.

Once the prototype matches the product vision, you can view the live responsive prototype that looks and feels like your end product. Then you can export the code.

Since only components are needed, you can choose the “Components” export option. Make sure to select all the components you need, as well as the correct framework and project settings. Once done, you can download your code in a Zip File by hitting the “Download Zip File” button in the bottom left corner.

Start the Slice Machine to build custom types and slices. Run the following command to start:

Go to http://localhost:9999 in your browser and you should see the Slice Machine up & running. If you are running it for the first time, it will prompt you to create a Custom Type.

If you already have an existing document, you can skip this step. You need to create a document to add and show these slices. Let's go ahead and create a custom type and we can name it ‘page’.

Save it to the local file system and then head over to the “Changes” tab present on the left panel and push the changes to Prismic as well.

You have just created the first custom type and synced it with Prismic!

Now you need to create a slice. Go to the “Slices” tab and create a few slices.

Our design file has various sections such as a "Callout" section and a "Blogs" section. You want to convert all these sections into slices that can be populated using the Prismic dashboard.

Inside each slice, you can specify the fields it should accept under the ‘Static Zone’. If you have repeatable data, you can specify the fields for that inside the ‘Repeatable Zone’.

Once done with the slices, save them to the file system and then go to the ‘page’ custom type and click on ‘Update Slice Zone’ and select all the slices.

This will allow you to access and use these slices inside the ‘page’.

Head back to the “Changes” tab and push all the changes to the Prismic servers.

Our slices are already accepting the data inside the ‘slice’ prop with the help of the Slice Zone component.

You can view the structure of the prop by logging into our console in the particular slice file.

Based on this, you can create your styles and digest the data appropriately.

Since you have generated the components using the Locofy Builder and specified the props ahead of time, you can simply import these components into our slices and pass the props to them.

In this slice, we are replicating the Callout section inside our design file. We are simply passing the data to the component we generated earlier and since these components are already styled with Tailwind, we can return them without any other modifications.