Most designers treat their Figma plugin stack as either/or. You pick a screenshot importer, or you pick a UI reconstructor. What almost no one realizes is that the two most talked-about tools in this space — image.to.design and Design Shapes — do completely different things. Used together, they cover the entire design pipeline with zero overlap.

This is the combination that changes how fast you work.

What image.to.design actually does

image.to.design by divRIOTS is a raw asset importer. You give it a URL, a screenshot, or a PDF, and it brings the visual content into Figma as-is — bitmap images, extracted colors, fonts where it can identify them. It is excellent at what it does: getting visual material off the web and into your canvas fast.

What it does not do is reconstruct the UI. The imported result is a flat image or a loose collection of elements. There are no auto-layout groups, no component structure, no SVG icons — just the pixels, organized roughly.

That is not a criticism. That is by design. image.to.design is an asset pipeline tool, not a UI analysis tool.

What Design Shapes actually does

Design Shapes (by Crafttor) works from the other end. You give it a screenshot of a UI — a mobile app, a web page, a dashboard — and it uses AI to reconstruct the interface as editable Figma layers. It identifies interface elements, matches icons to Lucide SVG vectors, groups rows and columns with real auto-layout, and extracts the color palette as Figma Variables bound to every fill.

The output is not a flat image. It is a working layer tree: named frames, text nodes, matched SVG icons, and design tokens — ready to edit.

What Design Shapes does not do is import arbitrary web content, PDFs, or raw brand assets. It is purpose-built for UI reconstruction, not asset harvesting.

The gap between them is exactly zero

This is what makes the combination unusual: the tools do not compete. They do not even touch the same part of the workflow.

image.to.design fills your canvas with raw material. Design Shapes turns UI screenshots into editable structure. One ends where the other begins.

The four-step workflow

Step 1 — Grab assets with image.to.design. Paste the competitor's URL or drop in a PDF brand deck. Import logos, illustrations, and reference images straight into Figma as raw material.

Step 2 — Screenshot the UI you want to reconstruct. Capture the mobile app, landing page, or dashboard you need to work from — your own or a reference.

Step 3 — Run Design Shapes on the screenshot. In one click, the flat screenshot becomes a structured layer tree with auto-layout groups, Lucide SVG icons, and color tokens extracted as Figma Variables.

Step 4 — Combine on canvas. Drag your imported assets alongside the reconstructed UI. You have both: the raw brand material and the editable structure, in the same file.

Who this workflow is built for

Competitive analysis — Import a competitor's site with image.to.design, then reconstruct their app UI with Design Shapes. You get their brand assets and their interface architecture in a single Figma file, fully editable.

Client presentations — Grab a client's existing PDF or web presence with image.to.design, reconstruct their current app UI with Design Shapes, and have a redesign-ready file inside an hour.

Design handoff — Use image.to.design for marketing assets and illustrations, Design Shapes for the UI components that engineers will implement. Everything in one file, everything structured.

The credit math

image.to.design has its own pricing. Design Shapes starts free — 5 credits when you sign up, plus a daily free credit that expires at midnight. Paid plans start at $9 for 60 credits.

For most projects, the full four-step workflow above costs one Design Shapes credit. Neither tool charges you for the other's work.

Start with the free tier

Design Shapes gives you enough free credits to run the full workflow on your first real project before you spend anything. Install it from the Figma plugin page, run it on a screenshot you already have, and see the layer tree it produces.

Then stack it with image.to.design and you have the full pipeline.