image.to.design Docs

image.to.design docs

What it is

image.to.design converts images and UI screenshots into editable output — Figma layers, HTML, or both, depending on which option you use.

Option Output
Figma plugin Figma layers
Web tool HTML, or Figma layers via clipboard
API Figma layers, HTML, or JSON — 5 formats total

Figma plugin requires Figma open; the web tool and API don't. Full output details, including all 5 API formats, in Output.

What it does

Drop in an image or screenshot. image.to.design reads its visual structure — layout, typography, color, images, and icons — and returns a structured, editable result: an HTML page, or a Figma design. The level of reconstruction depends on the mode selected, from a flat image up to a fully reconstructed layout (see Output, below).

Where it runs

The plugin runs inside Figma — you'll need Figma open to use it (Figma Community). It's also available in Figma Slides, where the images land as in-page assets you can insert into a slide.

The web app runs in your browser, at [divriots.com/image.to.design](https://divriots.com/image.to.design) — no Figma required. Accepts drag-drop, click-to-browse, or clipboard paste.

The ‹div›RIOTS API runs wherever you call it from — any backend or app that can make an HTTP request. Same engine, exposed as the image input format. Metered separately — see Pricing. Full reference: ‹div›RIOTS API documentation.

Supported input formats

The same formats apply to the plugin, the web tool, and the API:

Category Formats
Standard raster JPEG, PNG, GIF, BMP, WebP, TIFF
Modern raster AVIF, JPEG XL, JPEG 2000, HEIC/HEIF
Camera RAW CR2 (Canon), DNG (Adobe/universal), ARW (Sony)
Vector SVG, SVGZ

Output

Figma plugin — quality-tier slider

Every import goes through a slider with five modes, trading fidelity against credits and time. Each mode adds to the one before it:

Mode What you get Credits Time
Image
  • Imported as a single image
  • Supports every file type

Result is a single, flat layer.

 Free Instant
Vectors
  • Editable vector layers only
  • Ideal for vector graphics and logos

Text is imported as vectors; no bitmap assets.

2 credits ~30 sec
Quick
  • Editable layers
  • Editable text layers
  • Bitmap assets
  • Vector shapes

Optimized for speed.

 20+ credits ~3–5 min
Quality
  • Editable layers
  • Editable text layers
  • Bitmap assets
  • Vector shapes

Optimized for the quality / speed / cost balance.

100+ credits ~5–10 min
Max
  • Editable layers
  • Editable text layers
  • Bitmap assets
  • Vector shapes
  • Highest fidelity

Time and cost no object — the most expensive tier.

500+ credits ~10–20 min

Estimates vary with file complexity and size; the plugin shows a live cost/time estimate before you commit to a tier.

Web tool

The web tool runs the same conversion engine and the same quality slider, minus the free Image tier (uploading an image just to get the same image back serves no purpose on the web). Pick one of four paid tiers, then copy the HTML, download it as a .zip, or copy the result as Figma layers to paste directly into Figma:

Setting What you get Credits Time
Vectors
  • Editable vector layers only
  • Ideal for vector graphics and logos

Text is imported as vectors; no bitmap assets.

2 credits ~30 sec
Quick
  • Editable layout
  • Editable text
  • Bitmap assets
  • Vector shapes

Optimized for speed.

 20+ credits ~3–5 min
Quality
  • Editable layout
  • Editable text
  • Bitmap assets
  • Vector shapes

Optimized for the quality / speed / cost balance.

100+ credits ~5–10 min
Max
  • Editable layout
  • Editable text
  • Bitmap assets
  • Vector shapes
  • Highest fidelity

Time and cost no object — the most expensive tier.

500+ credits ~10–20 min

API

Five output formats available for the image input type:

Output format What it is
figma-rest JSON, structurally compatible with the Figma REST API
figma-clipboard Data to load into the clipboard and paste onto the Figma canvas
html-tailwindcss Generated HTML using Tailwind CSS, delivered as a ZIP
html-inlinestyles Generated HTML using inline styles, delivered as a ZIP
json JSON visual definition of the content (schema undocumented)

Editability

Mode Text Layout Images Icons Colors
Image Not extracted (flat image) N/A N/A N/A N/A
Vectors Vector shapes, not editable text N/A — vectors only Transformed into vectors Transformed into vectors N/A
Quick / Quality / Max Editable text layers Auto layout, smart-named layers Cut out as bitmap assets Matched against icon libraries, recreated as vectors if nothing matches Native Figma fills
HTML Editable text in real HTML elements Real flexbox/grid, nested Cut out of the source image Matched against icon libraries, recreated as vectors if nothing matches Sampled as CSS values, gradients included

Across every reconstructed mode — plugin Quick/Quality/Max, and the web tool — the engine can't infer hover states, animations, or JS interactions. It works from a flat image; add those behaviors after import.

Limits

Limit Value
Max input height 100,000px
Credit cost 2 / 20+ / 100+ / 500+ credits for Vectors / Quick / Quality / Max
Processing time ~30 sec to ~20 min, scaling with tier

No hover states, animations, or JS interactions are inferred — reconstruction works from a static image only.

Privacy & processing

As per our privacy policy:

  • Your images (“Input Data”) are processed solely to generate the requested output.
  • Data minimization: processed in memory or ephemeral storage, retained at most 24 hours for debugging, then permanently deleted.
  • Not used to train public AI models.

Pricing

Option Free tier Paid
Figma plugin 20 free credits to start; Image mode always free Credits spent per conversion, by quality tier (see Output)
Web tool First conversion free, no card required Credit cost varies by image complexity
API — Metered per call; image input is variable-cost (depends on requested effort and complexity). Every other input format (pdf, psd, ai, eps, html, ps, fig) is a fixed 2 credits/call

One subscription for every ‹div›RIOTS product — image.to.design included — with a shared credit balance you top up as needed.

Explore plans

How to use

Figma plugin

  1. Open your Figma file, launch image.to.design from the plugins menu.
  2. Drop or upload your image or screenshot (any supported format).
  3. Pick a quality tier — Image, Vectors, Quick, Quality, or Max — and review the credit/time estimate shown.
  4. Click Convert / Import.
  5. Edit the result directly on the canvas.

Web tool

  1. Go to divriots.com/image.to.design.
  2. Drop an image — paste from clipboard or click to browse.
  3. Wait while the engine analyzes visual structure (no prompt, no settings to configure).
  4. Ship: copy the HTML, download it as a .zip, or copy as Figma layers to paste into Figma.

API

  1. Generate an API key from your [‹div›RIOTS ONE dashboard](https://divriots.com/one).
  2. Send a request to the /convert endpoint with input: image and a chosen output format — figma-rest, figma-clipboard, html-tailwindcss, html-inlinestyles, or json.
  3. Receive the converted result in the response.

Full reference: ‹div›RIOTS API documentation.

FAQ

What image formats are supported?

Same list across web, plugin, and API — see Supported input formats, above.

Is the output production-ready?

Production-adjacent: structurally sound, visually accurate HTML that still needs semantic elements, responsive behavior, and integration with your existing styles.

How accurate is the Figma layer conversion?

It reliably captures layout structure, component groupings, text, and spacing. Complex or unusual designs may need manual cleanup afterward.

Can I get Figma layers instead of HTML?

Yes — get the output as fully editable Figma layers with auto layout and smart naming, either via the plugin or via the Figma-clipboard option in the web tool.

How accurate is the HTML output?

It scales with image quality — closely matching layout, colors, and typography at high-DPI input, with built-in resolution enhancement helping at lower quality. Expect adjustments for semantic tags, responsive breakpoints, and interactive states.

Can I import multi-page TIFF files?

Yes — each page imports as a separate layer on the canvas.

Can I import animated AVIF files?

AVIF supports animation, but the plugin imports it as a static image.

Does it work for mobile and web designs?

Yes — it adapts to both mobile app interfaces and desktop web layouts, applying layout constraints and auto layout accordingly.

Can I convert screenshots from any platform?

Yes — iOS, Android, SaaS dashboards, marketing sites, or design-tool exports all work.

Is image.to.design free?

The plugin and the web tool both include free credits to start; further use is credit-metered (see Pricing, above).

Does it work with Figma's Dev Mode?

Yes — once converted to Figma layers, standard Figma functionality applies, including Dev Mode inspection, prototyping, and component libraries.

See also