DEV Community: Sandeep Virk

Screenshot to Figma AI: How AI Rebuilds Screens as Layers

Sandeep Virk — Fri, 30 Oct 2026 17:48:18 +0000

Originally published on Crafttor.

Plenty of tools now promise screenshot to Figma AI conversion. The phrase covers very different approaches, and the difference shows up the moment you try to edit the result. This post explains what AI adds compared with classic detection, where it helps most, and where you should still expect to step in.

We will compare the two modes in Image to Figma Design. Fast uses classic computer vision. Turbo AI rebuilds the screen as nested auto layout frames.

Two ways to read a screenshot

Classic computer vision

Classic detection looks for edges, color regions and text. It finds a rectangle with a fill, a block of text, an icon. It then places each item at the position where it appeared.

This is fast and predictable. The result looks right. But the layers are mostly positioned in absolute coordinates. If you change a heading so it wraps to two lines, the text below does not move down.

AI structure reconstruction

An AI approach tries to understand the screen the way a designer would. It asks questions like: which elements form a card? Which cards form a list? Is this row of buttons a horizontal group with even spacing?

The answer becomes a tree of nested frames. In Image to Figma Design's Turbo AI mode, those frames use auto layout. Sections grow, shrink and ungroup cleanly because they are built from structure, not just coordinates.

What AI changes in your daily work

The value of AI structure is not that the result looks better at first glance. Both modes can look close to the original. The value appears when you start editing.

Content changes. Make a card title longer and the card grows. Add a fourth feature to a three-column row and the row adapts.

Resizing. Stretch the page frame wider and sections with fill settings stretch with it. This is the base for a responsive layout.

Reorganizing. Drag a card out of a list and the remaining cards close the gap.

Handoff. Developers can read auto layout as something close to flexbox. Padding and gaps are explicit values, not guesses.

When classic detection is the smarter choice

AI is not always the right tool. Fast mode wins in several real cases:

You only need text pulled out of an image.
You want a measured reference to trace over.
The screen is a one-off you will discard after a review.
You are converting a large batch and only a few screens need structure.

Fast costs 1 credit per conversion and returns the quickest result. Turbo AI costs 2 credits. Choosing well per screen is how you keep both quality and cost in check.

How to run an AI screenshot to Figma conversion

Install the plugin. Get Image to Figma Design from the Figma Community.
Start it from the Plugins menu in any file, on any Figma plan.
Sign in with a free Crafttor account.
Add a screenshot in PNG, JPEG or WEBP. Drag, browse or paste.
Select Turbo AI.
Convert. The plugin places a frame tree with auto layout on the canvas.
Test the structure. Change a heading, resize the frame, and check how sections respond.

How to check AI output quality

Do not judge the result only by how it looks at its original size. Run these quick tests:

The wrap test. Make one heading twice as long. Does the content below move down?
The width test. Resize the top frame wider. Do sections stretch or stay fixed as you would expect?
The removal test. Delete one item from a list. Does the list close the gap?
The naming test. Do the top-level frames match the real sections of the screen?

If most tests pass, you have a working layout. If one section fails, you can fix just that frame rather than rebuild everything. For more detail on what good structure looks like, read our auto layout from image guide.

Where AI still needs your help

AI structure is a strong starting point, not a finished file. Expect to step in on these:

Very busy illustrations are hard to break into meaningful shapes. They often work best as a single image layer.
Heavy gradients and blurred glass effects are difficult to rebuild exactly.
Low-resolution or blurry screenshots reduce accuracy for both text and structure.
Design system mapping. The AI does not know your components. Swap converted buttons and inputs for your library versions.
Naming. Rename frames so teammates can find things.

Other AI options in the market

Figma now offers its own screenshot-to-design agent, in open beta on paid Figma plans. Tools such as Codia and image.to.design also offer AI conversion. Each has different trade-offs on plan requirements, output and workflow. Our roundup of image to design plugins compares them fairly.

A quick word on permission

Use AI conversion on screens you own or have permission to use. For inspiration, rebuild for study and do not ship copies.

Try AI conversion on one screen

Pick a screen you know you will edit later and run it in Turbo AI. Then run the four tests above. Install Image to Figma Design and use your free daily credits to see the structure for yourself.

FAQ

What is the difference between AI and regular screenshot conversion?

Regular conversion places detected shapes and text at fixed positions. AI conversion groups them into nested frames that understand sections, lists and rows.

Does Turbo AI use auto layout?

Yes. Turbo AI rebuilds the screen as nested auto layout frames, so sections resize and ungroup cleanly.

How many credits does AI conversion cost?

Turbo AI uses 2 credits per conversion. Fast mode uses 1 credit.

Will AI conversion match my design system?

It creates generic frames, shapes and text. You can then replace buttons, inputs and cards with components from your own library.

Is the AI result always better than Fast?

Not always. For quick references, text extraction or throwaway screens, Fast is cheaper and quicker. Use Turbo AI when you will keep editing.

Figma Auto Layout From Image: Get Responsive Frames Fast

Sandeep Virk — Fri, 30 Oct 2026 17:40:54 +0000

Originally published on Crafttor.

Turning a screenshot into layers is useful. Turning it into auto layout is a different level. With Figma auto layout from an image, sections grow when text gets longer. Lists close gaps when you delete an item, and frames stretch when you resize them. That is the difference between a picture made of layers and a working design.

This guide explains how Image to Figma Design's Turbo AI mode builds auto layout and how to judge the result. It also shows how to fix the sections that need a nudge.

Why auto layout matters for converted screens

A plain conversion places every element at a fixed position. It looks right until you change something. Then text overlaps, buttons do not grow, and cards stay the same height while their content overflows.

Auto layout solves this by describing relationships instead of coordinates:

Direction. Children stack vertically or horizontally.
Gap. A fixed space between children.
Padding. Space between the frame edge and its content.
Sizing. Each child can hug its content, fill the space, or stay fixed.

When a converted screen uses auto layout, editing behaves like editing a real design.

How Turbo AI builds auto layout from an image

Image to Figma Design has two modes. Fast uses classic computer vision, shape detection and text recognition, and places positioned layers for 1 credit. Turbo AI, for 2 credits, rebuilds the screen as nested auto layout frames.

In practice, Turbo AI looks at the screenshot and decides:

Which elements belong together, such as an icon and its label.
Which groups repeat, such as cards in a grid or rows in a list.
Which direction each group flows.
How the groups nest inside larger sections.

The result is a tree of frames. A page frame contains sections. Sections contain rows or grids. Rows contain items. Each level uses auto layout.

Generate auto layout from an image, step by step

Install Image to Figma Design from the Figma Community.
Run it in any Figma file, on any plan.
Sign in with a free Crafttor account.
Add a screenshot by drag-and-drop, browse or paste.
Select Turbo AI.
Convert and select the top-level frame.
Inspect the auto layout settings on each level, from the page down.

How to judge auto layout quality

Do not judge by appearance alone. Test behavior.

Test 1: Text growth

Double a heading's length. Content below should move down, not overlap.

Test 2: List editing

Duplicate a list item or card. The list should grow. Delete one and the gap should close.

Test 3: Width change

Drag the page frame wider. Sections set to fill should stretch. Fixed elements like icons should keep their size.

Test 4: Spacing consistency

Click through sibling items. Similar items should share the same gap and padding values.

If a section fails a test, fix that section only. You do not need to rebuild the whole screen.

Fixing common auto layout issues

A section does not stretch. Select its children and set width to "Fill container". Make sure the parent has auto layout and enough width.

Text overflows its box. Set the text layer to "Hug" height and "Fill" width, so it wraps and grows.

Uneven gaps between items. Select the parent frame and set one gap value. Remove any spacer shapes inside.

A group is in the wrong direction. Switch the parent's direction between vertical and horizontal.

Elements that should overlap. Badges on avatars or labels over images need absolute positioning. Turn on "Ignore auto layout" for that child.

Too many wrapper frames. If a frame holds only one child and adds nothing, select it and ungroup or remove the frame.

Making the layout truly responsive

Auto layout gives you flexible frames, but responsiveness also depends on your decisions:

Set min and max widths on content containers to stop text lines getting too long.
Use wrap on horizontal rows of cards so they move to a new line on narrow frames.
Build breakpoint variants for desktop, tablet and mobile when layouts change significantly.
Replace generic frames with components so changes apply everywhere.

If your goal is code, our screenshot to HTML guide continues from here.

When auto layout is not worth it

Sometimes you only want a quick reference. If you will trace over a screen, extract text or measure spacing, Fast mode is cheaper and quicker. Use Turbo AI for screens you will keep editing.

Limits to expect

Very busy illustrations, heavy gradients and low-resolution or blurry screenshots make structure harder to read. Complex screens may need light cleanup. Higher-resolution screenshots, about 1x to 2x of the real UI, give the most reliable structure.

Permission

Build auto layout from screens you own or have permission to use. For study of other products, rebuild to learn and do not ship copies.

Get structured frames from your next screenshot

Run one real screen through Turbo AI and do the four tests. Install Image to Figma Design and use your free daily credits. For the basics of conversion, see how to convert an image to Figma.

FAQ

Can Figma create auto layout from an image by itself?

Placing an image in Figma gives you a flat image fill. You need a converter, such as Image to Figma Design's Turbo AI mode, to rebuild it as auto layout frames.

Which mode creates auto layout?

Turbo AI rebuilds the screen as nested auto layout frames and uses 2 credits. Fast mode places positioned layers for 1 credit.

Will the auto layout be perfect?

It is a strong starting structure. Run the text, list and width tests, then fix any section that does not behave as expected.

Can I use the result for responsive design?

Yes. Nested auto layout is the base for responsive frames. Add min and max widths, wrap settings and breakpoint variants as needed.

html.to.design vs Screenshot to Figma: When to Use Each

Sandeep Virk — Fri, 30 Oct 2026 17:34:57 +0000

Originally published on Crafttor.

There are two very different ways to get an existing interface into Figma. One reads the page's code. The other reads its pixels. The html.to.design vs screenshot to Figma question is not about which is better overall. It is about which input you actually have, and what you need at the end.

This guide explains how each approach works, where each one shines, and how to combine them. We use html.to.design and Image to Figma Design by Crafttor as the examples, and describe html.to.design only from its own documentation.

Two approaches, two kinds of input

URL import: reading the code

html.to.design imports a page from its URL. It reads the real HTML and CSS, then rebuilds that as Figma layers. Because it works from code, it knows exact fonts, colors and text. According to its docs, you paste a URL, pick a viewport such as desktop, tablet or mobile, and import. The docs say URL import works for public pages, and a Chrome extension captures pages behind a login.

Screenshot conversion: reading the pixels

A screenshot converter starts from an image. It detects text, shapes, icons and images, then rebuilds them as Figma objects. Image to Figma Design offers two modes. Fast uses classic computer vision for 1 credit. Turbo AI rebuilds the screen as nested auto layout frames for 2 credits.

Because it reads pixels, a screenshot converter does not care where the image came from. Web, native app, desktop software, an old PDF export, a slide.

When URL import is the better fit

The page is live and public. Code is available, so use it.
You need exact web fonts and colors. Code gives precise values.
You want several viewport sizes from one page. Choosing desktop, tablet or mobile is built in.
The page has lots of text. Text comes straight from the HTML.

When a screenshot converter is the better fit

There is no URL. Native iOS and Android apps, desktop software and kiosk screens have no HTML to read.
The page no longer exists. Old versions, retired products and past campaigns may only survive as images.
You only received images. Clients often send screenshots, not links.
The screen is a design file export. Mockups from other tools come as PNG or JPEG.
The screen needs a specific state. An error message, an empty state or a half-filled form is easy to capture as an image.
You want HTML out of an image. Image to Figma Design can also export a downloadable HTML file.

A quick decision table

Your situation	Best first choice
Public live website	URL import
Logged-in web app you can view	Either; html.to.design offers a Chrome extension, or capture screenshots
Native mobile or desktop app	Screenshot converter
Page that no longer exists	Screenshot converter
Images from a client or teammate	Screenshot converter
Mockup exported from another tool	Screenshot converter

Trade-offs to keep in mind

URL import trade-offs

Pages built with heavy scripts, canvas elements or unusual CSS can import with quirks.
Results mirror the site's DOM structure, which can be deeply nested and not how a designer would organize it.
It only works when the page is reachable.

Screenshot conversion trade-offs

Text must be recognized from pixels, so small or blurry type can need correction.
Fonts are matched rather than read from code.
Very busy illustrations, heavy gradients and low-resolution screenshots reduce accuracy.
Complex screens may need light cleanup.

Sharper screenshots, about 1x to 2x of the real UI, narrow the gap a lot.

Using both in one project

Many real projects need both tools. Here is a combined workflow for a product redesign:

Import public marketing pages by URL with html.to.design.
Capture screenshots of the logged-in app screens and native mobile app.
Install Image to Figma Design and sign in with a free Crafttor account.
Convert the screenshots in Turbo AI so they arrive as auto layout frames.
Put everything on one page so you can see the full product in one place.
Replace repeated elements with shared components from your design system.

Structure: DOM tree vs designed frames

One subtle difference deserves attention. A URL import follows the page's DOM. That can mean many wrapper layers that made sense for developers but feel noisy in Figma.

Turbo AI conversion builds a frame tree based on visual sections. The result tends to look like a designer's layer structure: header, hero, card list, footer. Neither is wrong. Pick based on whether you value code fidelity or a cleaner design hierarchy. Our auto layout from image guide shows the screenshot side in detail.

Permission applies to both

Import or convert only pages and apps you own or have permission to use. For competitive study, rebuild for learning and do not ship copies.

Try the screenshot side

If you have screens with no URL, start there. Install Image to Figma Design and convert one with your free daily credits. For a website-focused walkthrough, see convert website screenshot to Figma.

FAQ

Is html.to.design or a screenshot converter more accurate?

For live public pages, reading code is usually more precise for text and colors. For apps without a URL or images only, a screenshot converter is the only option.

Can html.to.design import a native mobile app?

URL import needs a web page. Native apps have no URL, so a screenshot converter is the practical route.

Can I get HTML from a screenshot?

Yes. Image to Figma Design can export a downloadable HTML file from an image.

Should I use both tools?

Often, yes. Use URL import for public web pages and a screenshot converter for apps, old screens and images.

Screenshot to HTML: Turn Any UI Image Into Web Code

Sandeep Virk — Fri, 30 Oct 2026 17:29:17 +0000

Originally published on Crafttor.

Sometimes you do not need a design file at all. You need a page in a browser, fast. A screenshot to HTML conversion skips the hand coding of a first draft and gives you markup you can open, share and edit.

This guide explains how the HTML export in Image to Figma Design works and what the file is good for. It also covers where you should still bring in a developer.

Why go from image to HTML?

There are several practical reasons to turn an image into HTML instead of, or as well as, Figma layers:

Quick prototypes. Put a static version of a screen online for a stakeholder to click through.
Developer starting points. Hand over markup with real text instead of a picture to measure.
Email and documentation. Paste a structured layout into a doc or test page.
Archiving. Keep a text-searchable version of an old screen you only have as an image.

How the HTML export works

Image to Figma Design reads your screenshot and detects the same things it would place on the Figma canvas: text, shapes, images and icons. Instead of creating layers, it can package the result as a downloadable HTML file.

The plugin offers two modes, and they affect the HTML too:

Fast uses classic computer vision with shape detection and text recognition. It costs 1 credit.
Turbo AI rebuilds the screen as nested auto layout frames. It costs 2 credits. Nested structure tends to map more naturally to nested HTML containers.

Convert a screenshot to HTML, step by step

Install the plugin. Add Image to Figma Design from the Figma Community.
Open any Figma file. The plugin works on every plan, including the free Starter plan.
Sign in with a free Crafttor account.
Add your image. Drag in a PNG, JPEG or WEBP, browse for it, or paste it.
Pick Fast or Turbo AI. Choose Turbo AI if you want nested containers.
Choose the HTML output instead of placing layers on the canvas.
Download the file and open it in your browser.
Review and edit the markup in your code editor.

What to check when you open the file

Open the HTML in a browser and run through these points:

Text. Is it real, selectable text? Are words correct?
Layout. Do sections sit where they should at your screen width?
Images. Are photos and complex graphics present as images?
Sizing. Resize the window. Does the layout hold up or break?

Then open it in a code editor. Look at how containers are nested. This tells you how much work it will take to adapt for production.

What screenshot to HTML is good for, and what it is not

Good uses

A clickable mockup to test a flow with stakeholders.
A visual baseline that a developer refines into real components.
Recovering copy and layout from an old screen with no source.
Teaching yourself how a layout could be structured in markup.

Not a replacement for production code

An image contains no information about behavior. The HTML cannot know:

What happens when a user clicks a button.
How a form validates or submits.
Which data comes from an API.
How the layout should change on a phone.
Accessibility details such as labels, roles and focus order.

Treat the export as a fast first draft. A developer will still connect logic, add semantics and fit it into your codebase and framework.

Tips for cleaner HTML

Start from a sharp image. Higher-resolution screenshots, around 1x to 2x of the real UI, give better text and edges.

Convert one section at a time. A hero or card grid on its own produces tidier markup than a whole page at once.

Remove overlays first. Cookie banners and chat widgets become extra elements you then delete.

Crop out busy illustrations. They will come through as images anyway. Cropping keeps the structure focused.

Use Turbo AI for layouts you will keep. Nested structure is closer to how a developer would build it.

HTML file or Figma layers?

You do not have to choose forever. Many teams do both: Figma layers for designers, HTML for a quick demo. If you are working from a full web page, see our guide to converting a website screenshot to Figma.

Permission still applies to code

Generate HTML only from screens you own or have permission to use. For study, rebuild to learn and do not publish copies of other products.

Get your first HTML export

Pick a simple screen, such as a sign-in page or a pricing card, and export it as HTML. Install Image to Figma Design and try it with your free daily credits. For the design-layer route, start with our screenshot to Figma guide.

FAQ

Can I convert an image to HTML without coding?

Yes. Image to Figma Design can export a downloadable HTML file from a screenshot. You can open it in any browser without writing code.

Is the HTML production-ready?

Treat it as a first draft. It captures layout and text, but a developer still needs to add interactivity, accessibility and integration with your codebase.

Which mode gives better HTML?

Turbo AI builds nested auto layout structure, which usually maps better to nested containers. Fast is quicker and cheaper for simple references.

What image formats work?

PNG, JPEG and WEBP are supported. PNG usually gives the sharpest text because it is lossless.