Convert a Figma Design to an Editable Layout

AI-powered Image to Layout

With the GemAI – Image to Layout feature in GemPages, you can easily turn a Figma design (exported as an image) or an existing site URL into an editable layout. It’s a quick way to save time and skip rebuilding your design from scratch. Refer to this article to learn more about this feature.

Before you start, ensure that you have exported the Figma design to an image:

• Image format: .JPG, .PNG
• Image size: under 20 MB.

How to turn a Figma template into an editable layout in GemPages?

Step 1: Open GemPages Dashboard > Create new page

Step 2: Select Start from scratch to open the editor

Step 3: Hit AI in the left sidebar, or click “Start with Generating from URL or image” to use the Image to Layout feature.

Step 4: Upload the image exported from the Figma design, then wait for the system to generate. 

Step 5: You can tick “Select all” to collect all generated sections, or just select the ones you prefer, then hit “Generate.”

Step 6: Your Figma design is now turned into a layout that you can edit in GemPages Editor. Use the key elements in the left sidebar to customize it your way. 

Step 7: Save, preview, and publish your page.