Guide: Converting Images to Editable Figma Files in 6 Steps

---

Converting directly from a screenshot to editable layers in Figma can save hours of redesigning from scratch. This process uses the power of AI to "read" images and conversion tools to import data into Figma.

Process Overview

This process is based on the principle: Image → HTML/Tailwind CSS → Intermediate file (.h2d) → Figma Layers.

Detailed Steps

Step 1: Use AI to analyse the image and export HTML code

Use AI tools (such as Claude 3.5 Sonnet, GPT-4o or Gemini) to convert the image into code.

• Requirement: Send the image and ask the AI: "Analyse this image and rewrite it using HTML code combined with Tailwind CSS".
• Note: Tailwind CSS code will help create a clean and accurate layout structure when imported into Figma.
• Action: Save the code you receive as a .html file on your computer.

Step 2: Prepare the browser extension

You need to install an extension to "capture" data from the browser.

• Download and install: html.to.design from the Chrome Web Store.

Step 3: Configure file access permissions (Important)

Since we will open the HTML file directly from your computer (not from a web link), you need to grant permission to the extension:

1. Open your browser and go to: chrome://extensions/
2. Find the html.to.design extension and select Details.
3. Find the line Allow access to file URLs and turn it on.

Step 4: Convert HTML to .h2d file

1. Use Chrome to open the .html file you created in Step 1.
2. Activate the html.to.design extension and configure the settings:
   • Size: Select 1920px (Desktop) and Light mode.
   • Options: Tick Save .h2d file locally.
   • Execute: Click Capture current page.

• Once complete, you will receive a file in .h2d format downloaded to your computer.

Step 5: Install the Plugin in Figma

1. Open a Figma file (create a new blank page).
2. Right-click on an empty area, select Plugins -> Manage plugins.
3. Search for the keyword "html.to.design" and click to run the plugin.

Step 6: Import and finalise

1. When the Plugin interface appears, you will see the Import .h2d file section.
2. Drag and drop the .h2d file downloaded in Step 4 into the plugin window.
3. Wait a moment for the system to process.

Result

Now, the entire original image has been transformed into Vector, Text, and Frame elements that are 100% editable in Figma.

Tip: If the layer structure is not well grouped, review the HTML code from Step 1. The cleaner the code, the easier the Figma file will be to manage!