psd.to.design docs
What it is
psd.to.design converts Adobe Photoshop (.psd and
.psb) files into editable Figma designs — through a
Figma plugin, a web tool, or the ‹div›RIOTS API.
| Option | Output |
|---|---|
| Figma plugin | Figma layers |
| Web tool | Figma layers via clipboard |
| API | Figma layers, JSON, or a flattened image |
Figma plugin requires Figma open; the web tool and API don't. Full output details, including all API formats, in Output.
What it does
Drop in a .psd or .psb file. psd.to.design
reads its Photoshop layer structure — groups, text, shapes, images, blend
modes, and effects — and rebuilds it as native Figma layers, preserving
as much of the original editability as the import mode allows, from a
single flattened image up to fully editable layers (see Output, below).
Where it runs
The plugin runs inside Figma — you'll need Figma open to use it (Figma Community).
The web app runs in your browser, at divriots.com/psd.to.design — no Figma required. Accepts drag-drop or click-to-browse uploads.
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
psd input format. Metered separately — see
Pricing. Full reference:
‹div›RIOTS API documentation.
Supported input formats
| Format | Extension |
|---|---|
| Photoshop Document | .psd |
| Photoshop Large Document | .psb |
.psd and .psb are supported across both the
plugin and the API.
Output
Figma plugin — import modes
Every import goes through one of two modes, trading full editability for a single flattened image:
| Mode | What you get |
|---|---|
| Fully editable (recommended) | Text, images, effects, patterns, and shapes all import as editable layers — text stays editable, shapes stay vector. |
| Flattened in a single image layer | The whole file imports as one flat image layer, no layer structure. |
The plugin places each import on its own page in Figma, so your existing file stays untouched.
Web tool
The web tool runs the same conversion engine and the same two import modes as the plugin. Pick a mode, then copy the result as Figma layers to paste directly into Figma:
| Mode | What you get |
|---|---|
| Fully editable (recommended) | Text, images, and shapes all import as editable layers — text stays editable, shapes stay vector. |
| Flattened in a single image layer | The whole file imports as one flat image layer, no layer structure. |
API
Five output formats are available for the psd input type
— the image output is unique to psd among the
document inputs:
| Output format | What it is | Credits |
|---|---|---|
figma-clipboard | Data to load into the clipboard and paste onto the Figma canvas | 2 |
figma-rest | JSON, structurally compatible with the Figma REST API | 2 |
figma-json | Figma's JSON_REST_V1 node export | 2 |
json | JSON visual definition of the content (schema undocumented) | 2 |
image | The document flattened to a single PNG at 1:1 | 2 |
Full reference: ‹div›RIOTS API documentation.
Editability
| Element | Behavior |
|---|---|
| Layer groups | Photoshop's folder structure converts to Figma frames and groups, hierarchy preserved. |
| Layer naming | Layer names carry over as-is. |
| Layer visibility | Hidden layers stay hidden. |
| Raster layers | Import as high-quality raster images. |
| Shape layers | Converted to vector objects when possible. |
| Adjustment layers | Not supported — imported as an invisible placeholder layer, flagged in its name. (Gradient-map adjustments keep their gradient colors.) |
| Text layers | Fully editable, with font family and style (when available in your Figma fonts), size, spacing, line height, and basic text effects preserved. Missing fonts are flagged, with substitution options offered. |
| Blend modes | Screen, Multiply, Overlay and the other blend modes Figma supports carry over. Photoshop-only modes with no Figma equivalent (Dissolve, Hard Mix, Subtract, Divide) are dropped; Pin/Vivid/Linear Light fall back to Overlay. |
| Opacity | Layer and fill opacity are preserved. |
| Layer masks | Both vector and pixel (raster) masks convert to Figma's native masking system — raster masks come in as luminance masks. |
| Layer styles | Drop shadows, inner shadows, glows, strokes, and color/gradient/pattern overlays translate to equivalent Figma effects. Bevel & Emboss is approximated with inner shadows; Satin isn't supported. |
| Smart Objects | Flattened to raster images — not preserved as editable Figma components. |
| Gradient fills | Multi-stop gradients are preserved with their original color stops. |
| Pattern fills | Import as tiled image fills, not flattened into the composite. Very large or missing pattern tiles fall back to a placeholder. |
This table describes the Fully editable import mode — the other mode trades all of this away for a single flattened image (see Output, above).
Limits
| Limit | Value |
|---|---|
| Adjustment layers & Smart Objects | Not preserved as editable — dropped or flattened |
| Unsupported effects & blend modes | Satin layer style; Dissolve, Hard Mix, Subtract & Divide blend modes |
| File size | 500MB max (free tier), 10GB max (Pro) |
No hover states, animations, or other interactive behavior are inferred — conversion works from the static layer data in the file only.
Privacy & processing
Per the privacy policy — covers the web app and the ‹div›RIOTS API, and by extension the shared conversion engine the plugin also calls:
- Your files (“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
The Figma plugin and web tool are included in ‹div›RIOTS ONE:
| Option | Pricing |
|---|---|
| ‹div›RIOTS ONE — Free | 5 imports a month, files up to 500MB each |
| ‹div›RIOTS ONE — Pro | Unlimited imports, files up to 10GB each |
| API |
Metered per call — psd input reserves 2 credits/call
for any output format (figma-clipboard, figma-rest, figma-json,
json, or image) — see
Output, above
|
One subscription across every ‹div›RIOTS product — psd.to.design included — with a shared credit balance you top up as needed.
How to use
Figma plugin
- Open your Figma file, launch psd.to.design from the plugins menu.
-
Drag and drop your
.psdor.psbfile into the plugin, or click to browse. - Choose an import mode — Fully editable or Flattened in a single image layer.
- Click Import.
- Your design lands on its own page in Figma, layer structure intact — edit directly on the canvas.
Web tool
- Go to divriots.com/psd.to.design.
-
Drop your
.psdor.psbfile, or click to browse. - Choose an import mode — Fully editable or Flattened in a single image layer.
- Copy the result as Figma layers to paste into Figma.
API
- Generate an API key from your ‹div›RIOTS ONE dashboard.
-
Send a request to the
/convertendpoint withinput: psdand a chosen output format —figma-clipboard,figma-rest,figma-json,json, orimage. - Receive the converted result in the response.
Full reference: ‹div›RIOTS API documentation.
FAQ
What file types does psd.to.design support?
.psd and .psb — Adobe Photoshop’s standard and large-document formats. See Supported input formats, above.
Does it preserve my layer structure?
Yes — folders convert to Figma frames and groups with hierarchy intact, layer names carry over, and hidden layers stay hidden.
What happens to my fonts?
Text imports as fully editable Figma text, matched against your available Figma fonts. Missing fonts are flagged, with substitution options offered.
Are blend modes preserved?
Most are — Screen, Multiply, Overlay and the other blend modes Figma supports carry over. A few Photoshop-only modes have no Figma equivalent: Dissolve, Hard Mix, Subtract, and Divide are dropped, and Pin/Vivid/Linear Light fall back to Overlay.
What about layer masks?
Both are supported — vector masks convert to Figma's native masking system, and pixel (raster) masks come in as luminance masks.
What about layer styles like drop shadows and glows?
Drop shadows, inner shadows, glows, strokes, and color/gradient/pattern overlays translate to equivalent Figma effects. Bevel & Emboss is approximated with inner shadows, and Satin isn’t supported.
What happens to Smart Objects?
They’re flattened to raster images — Smart Objects aren’t preserved as editable Figma components.
Can I get HTML output instead of Figma layers?
No — psd.to.design only produces Figma-compatible output: layers via the plugin or web tool, or figma-clipboard, figma-rest, figma-json, json, or a flattened image via the API. For HTML output from an image, see image.to.design.
Can I use psd.to.design without Figma?
Yes — the web tool at divriots.com/psd.to.design runs the same conversion engine without needing Figma open. Copy the result as Figma layers via clipboard.
Does it work with Figma's Dev Mode?
Yes — once converted, standard Figma functionality applies, including Dev Mode inspection, prototyping, and component libraries.
Is psd.to.design free?
It’s included in ‹div›RIOTS ONE. The free tier gives you 5 imports a month with files up to 500MB each; the Pro tier is unlimited imports with files up to 10GB each (see Pricing, above). The API is credit-metered per call.
Can I import large PSB files?
Yes — .psb is supported alongside .psd, limited to 10GB per file.