🧠 How to Turn Any AI Image into an Editable Design File

🧩 The Tech Stack

🚀 Step-by-Step Workflow

Step 1: Generate a Design Image Using ChatGPT-4

• Ask ChatGPT-4 to create a design image by providing a detailed prompt.

• For example:

  “Design a modern SaaS landing page featuring a hero section with a call-to-action button, a testimonial carousel, and a pricing table.”

  

  ChatGPT will generate an image based on your prompt, styled and laid out using its internal model. When you’re satisfied with the result, click the image and download it (ChatGPT provides a PNG file).

Step 2: Make Quick Edits Directly in ChatGPT

Before jumping into design tools, you can make fast tweaks right in the chat. Here’s how:

1. Click on the image inside your chat thread

2. Select the area you want to update

3. Type your instruction, like:

   • “Make the background dark.”

   • “Replace the headline text.”

   • “Move this card section below the CTA.”

ChatGPT will regenerate the image with your changes. This is perfect for rough edits or rapid idea testing before committing to a full design workflow. Once you’re satisfied, download the updated image to your desktop.

Step 3: Prepare Figma and Install the Codia AI Design Plugin

• Open Figma: Launch Figma on your desktop or access it via the web.

• Create a New File: Start a new design file or open an existing one where you want to import the design.

• Install Codia AI Design Plugin: Navigate to the Figma Community, search for “Codia AI Design,” and click “Install” to add the plugin to your Figma account.

Step 4: Import the Image into Figma Using Codia AI Design

• Launch the Plugin: In your Figma file, go to the top menu, select “Plugins,” and choose “Codia AI Design” from the list.

• Upload the Image: Within the plugin interface, click on the upload area and select the PNG image you downloaded from ChatGPT. Alternatively, you can drag and drop the image into the upload area.

• Initiate Conversion: After uploading, click the “To Figma” button. The plugin will process the image and convert it into editable design elements.

Step 4: Edit and Customize the Design in Figma

Editable Layers: The plugin will generate a new frame containing the design with editable layers. You can now:

• Move and resize components

• Edit text content and styles

• Adjust colors, fonts, and spacing

• Integrate your design system elements

Step 5: Edit and Customize Your Design

You’ll now see a frame with editable content. From here, you can:

• Move and resize layout components

• Edit the text directly

• Change colors, fonts, and spacing

• Apply your design system or style guide

• Build on top of the structure without redrawing from scratch

Designers love it, but it’s just as valuable for marketers, founders, and anyone turning ideas into visuals quickly.

🧠 Why This Works

This workflow takes you from idea → image → editable design in under 10 minutes. It bridges ChatGPT’s speed with Figma’s flexibility—and removes the manual grunt work in between.

Is it perfect? Not yet. But for wireframes, MVP mockups, stakeholder decks, and early-stage ideas? It’s more than enough.

👀 ICYMI

Must-Read AI Workflows

[Pro]Instant Case Studies from Customer Interviews
Turn recorded customer calls into polished, publish-ready case studies automatically—no writing, formatting, or context-switching required.
Explore the workflow →

Google’s Prompting Guide, Made Stupidly Simple
We broke down Google’s dense whitepaper into plain-English tips + ready-to-use prompts to level up your AI game.
Read the guide →

AI Roundup

YouTube introduces AI-powered Music Assistant for creators
YouTube’s new Music Assistant allows creators to generate custom, royalty-free background music using text prompts, streamlining the process of adding soundtracks to videos.
Explore the feature →

Google’s Veo 2 brings text-to-video generation to Gemini Advanced
Google’s Veo 2 enables Gemini Advanced subscribers to create 8-second, 720p videos from text prompts, offering a new tool for content creators to produce dynamic visuals without traditional video production resources.
See it in action →

🙋 Community Q&A

Yes and No. You cannot create a full slide deck from a single prompt. But you can using the Chatgpt 4o model to generate content, layout, and design suggestions for your presentation and the use the 4o image tool to create images for each of the slide. Remember: you have to generate it Slide by slide.

And for your editing you can use the workflow from this post.