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.

Figma plugin requires Figma open; the web tool and API don't. Full output details, including both 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 also runs in Figma Slides and FigJam, importing onto the canvas the same way as in a design file.

The web app runs in your browser, at 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:

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:

Quick, Quality and Max withhold their credits from your balance at the start of conversion; when it finishes you pay what it actually used, and any unused credits are returned to your balance. Large or dense images can sometimes cost more than the withheld amount. 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:

API

Two output formats available for the image input type:

For the image input type, input.effort picks the agent effort level — low | balanced (default) | max. Higher effort yields higher fidelity, takes longer, and costs more. Each level withholds the credits below at the start; when the job finishes you pay what it actually used, and any unused credits are returned to your balance. Omit the field and the conversion runs at balanced. Full request body: API reference.

Editability

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

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

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. Pick a quality tier — Vectors, Quick, Quality, or Max — and click Convert. No prompt to write.
4. Wait while the engine analyzes visual structure.
5. Ship: copy the HTML, download it as a .zip, or copy as Figma layers to paste into Figma.

API

The API is asynchronous: a conversion runs as a background job, so you kick it off, poll until it's done, then download the result. The base URL is https://api.divriots.com/v1 and every request authenticates with your key in the Authorization: Bearer … header.

1. Generate an API key from your ‹div›RIOTS ONE dashboard.
2. POST to /convert with input: image and a chosen output format — html-tailwindcss or html-inlinestyles.
3. The call returns 202 Accepted with a Location header pointing at a poll endpoint (GET /convert/jobs/{jobId}).
4. Poll that endpoint until its JSON status is done (or error), then download the short-lived resultUrl it hands back — a signed URL valid ~15 min; re-poll for a fresh one if it expires. For input: image the result is a ZIP.

Inline requests are capped at 30 MB total (base64 inflates the payload by ~33%). For larger files — up to 10 GB — upload out of band with POST /convert/upload first, then convert by reference.

A minimal end-to-end call with curl:

# 1. Start the conversion — returns 202 Accepted + a Location header
curl -i https://api.divriots.com/v1/convert \
  -H "Authorization: Bearer sk-drc-XXXXXXXXXXXXXXXX" \
  -H "Content-Type: application/json" \
  -d '{
    "input":  { "format": "image", "data": "<base64-image-bytes>" },
    "output": { "format": "html-tailwindcss" }
  }'

# 2. Poll the job URL from that Location header until status is "done"
curl https://api.divriots.com/v1/convert/jobs/{jobId} \
  -H "Authorization: Bearer sk-drc-XXXXXXXXXXXXXXXX"
# → { "status": "done", "resultUrl": "https://storage.googleapis.com/…" }

# 3. Download the result within ~15 min (a ZIP when input.format is image)
curl -L -o result.zip "<resultUrl>"

Full reference: ‹div›RIOTS API documentation.

FAQ

Support

Need a hand, hit a bug, or have an image that doesn’t convert the way you expect? Email us at [email protected]. Attaching the image (or a screenshot of the result) helps us help you faster.

See also

• Changelog & product updates
• image.to.design on Figma Community
• ‹div›RIOTS API documentation
• ‹div›RIOTS ONE