From Genspark AI Slides to Figma

Genspark AI has a new feature that allows you to generate slides from a text prompt. This is a great way to quickly create a presentation, but what if you want to take those slides and edit them in Figma? In this guide, we’ll show you how to use the html.to.design plugin to import Genspark AI-generated slides into Figma.

Bootstrap your slides with Genspark AI

1. Create slides in Genspark AI

Start by prompting Genspark AI for a new slide presentation. Select “Slides AI” on the left sidebar and enter your prompt.

2. Iterate on your slides

Use the Genspark AI interface to iterate on your slides. You can add new slides, edit existing ones, and change the layout as needed.

3. Capture the preview with the html.to.design Chrome extension

Click the “View & Export” button on the top right corner of the Genspark AI interface to see the preview of your slides in a new tab.

Then launch the html.to.design Chrome extension and capture your Genspark AI slides.

4. Open html.to.design plugin in Figma

Open Figma, launch the html.to.design plugin.

5. Import your capture in Figma Design

Drag and drop the .h2d file you captured with the Chrome extension or simply go to the “Extension” tab if you used the “Send to Figma plugin” option in the Chrome extension.

6. 🎉 Edit your webpage designs in Figma!

Your Genspark AI slides have been converted into editable Figma layers!