pdf.to.design docs
What it is
pdf.to.design converts PDF files into editable Figma designs — through a Figma plugin or a web tool.
| Option | Output |
|---|---|
| Figma plugin | Figma layers, or static images |
| Web tool | Figma layers via clipboard |
Figma plugin requires Figma open; the web tool doesn't. Full output details in the Output section below.
What it does
Drop in a PDF. pdf.to.design reads its contents — text, fonts, vectors, and images — page by page and rebuilds them as native Figma layers, preserving as much of the original editability as the import method allows, from static images 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). It works in Figma Design files and in Figma Slides, where PDF pages import as slides.
The web tool runs in your browser, at divriots.com/pdf.to.design — no Figma required. Accepts drag-drop, click-to-browse, or clipboard paste.
Supported input formats
| Format | Extension |
|---|---|
| Portable Document Format | .pdf |
Supported across both the plugin and the web tool. Multi-page PDFs are supported, including exports from Canva, Adobe InDesign, Adobe Illustrator, and Office apps. In the plugin, password-protected PDFs prompt for the password before the file is read.
Output
Figma plugin — import methods
Every import goes through one of two methods, trading full editability for a static picture of each page:
| Method | What you get |
|---|---|
| Editable layers | Text imports as editable text layers, shapes and icons as editable vectors, and images as native Figma images. |
| Static images | Each page imports as a pixel-perfect image. Pixel density is adjustable. |
Multi-page PDFs land in a section, with each page as its own frame. Before importing, preview the PDF and choose your pages and layout:
| Setting | What it does |
|---|---|
| Page selection |
Import every page, or just a range — for example
1-5, 8, 11-15.
|
| Page layout | Stack the page frames vertically, horizontally, or in a grid. |
Web tool
The web tool returns the converted PDF as Figma layers only — there's no HTML output. Drop your PDF, wait for the conversion, then copy the result to your clipboard and paste it straight into Figma. Every page comes through as editable layers, lined up either horizontally or vertically.
Editability
| Element | Behavior |
|---|---|
| Text | Imports as editable Figma text layers. |
| Fonts | Detected and matched against the fonts available in Figma. Fonts embedded in the PDF are detected; in the plugin, any that are missing from your workspace are flagged, and you can map each one to an alternative before importing. |
| Vectors and shapes | Shapes, icons, and paths convert to editable Figma vectors, keeping the same geometry they had in the PDF. |
| Images | Extracted from the PDF as separate image layers. In the plugin they import as native Figma images — not frames with an image fill — so you can crop, resize, and swap them like any image placed directly in Figma. |
| Pages | Each page becomes its own frame inside a shared section, whichever layout you choose — layout only changes where the frames sit on the canvas. |
This table describes the Editable layers import method — Static images trades all of this away for a pixel-perfect picture of each page (see Output, above).
Limits
| Limit | Value |
|---|---|
| Fonts | Fonts missing from your Figma workspace need to be mapped to an alternative. Embed fonts when you export the PDF so pdf.to.design can detect them. |
| Dense, print-heavy PDFs | May need light cleanup after import. |
Privacy & processing
- Figma plugin: your PDFs are processed on your local machine and are never sent to any server.
Pricing
| Option | Free tier | Paid |
|---|---|---|
| Figma plugin | Static images: unlimited. Editable layers: 5 imports, first 3 pages only | ‹div›RIOTS ONE — full features, and multiple files at once |
| Web tool | Same as the free Figma plugin: 5 imports, first 3 pages only | ‹div›RIOTS ONE — full features, and multiple files at once |
One subscription for every ‹div›RIOTS product — pdf.to.design included — with access to every ‹div›RIOTS plugin, service, and API.
How to use
Figma plugin
- Open your Figma file, launch pdf.to.design from the plugins menu.
- Drag and drop your PDF into the plugin, or click to browse.
- If the PDF is password-protected, enter the password when prompted.
- Choose an import method — Editable layers or Static images.
- Select the pages to import, map any missing fonts, and pick a page layout — vertical, horizontal, or grid.
- Click Import.
- Your pages land in a section, one frame per page — edit directly on the canvas.
Web tool
- Go to divriots.com/pdf.to.design.
- Drop your PDF, paste it from the clipboard, or click to browse.
- Wait while the engine reads the document.
- Click Copy to Clipboard.
- Paste into Figma — every page arrives as editable layers.
FAQ
What file types does pdf.to.design support?
.pdf — including exports from Canva, Adobe InDesign, Adobe Illustrator, and Office apps. Multi-page PDFs are supported.
Can I import a password-protected PDF?
Yes — the plugin prompts for the password before it reads the file, so you don’t need to remove the protection with a separate tool first.
How are multi-page PDFs organized?
Each page becomes its own frame inside one shared section. In the plugin you choose whether the frames stack vertically, horizontally, or in a grid, and whether to import every page or just a range.
What happens to my fonts?
Text imports as editable Figma text, matched against your available Figma fonts. In the plugin, missing fonts are flagged and you can map each one to an available alternative before importing. Embed fonts when you export the PDF so pdf.to.design can detect them.
How are images imported?
In the plugin, images import as native Figma images rather than frames with an image fill applied, so you can crop, resize, and swap them like any image placed directly in Figma.
Can I get HTML output instead of Figma layers?
No — pdf.to.design only produces Figma output: layers via the plugin, or layers via clipboard from the web tool. For HTML output from an image, see image.to.design.
Can I use pdf.to.design without Figma?
Yes — the web tool at divriots.com/pdf.to.design runs in your browser without needing Figma open. Copy the result to your clipboard as Figma layers, then paste it into Figma when you’re ready.
Does it work in Figma Slides?
Yes — run the plugin in a Figma Slides file and each PDF page imports as a slide.
Can I import a Canva, InDesign, or Google Slides file?
Yes — export it as a PDF from the source tool, then import that PDF. From Canva, use PDF Standard. From InDesign, either Adobe PDF (Interactive) or Adobe PDF (Print) works. The same route works for Google Slides, Gamma, OpenOffice and StarOffice presentations, and Mural boards.
Does the plugin upload my PDFs?
No — the plugin processes your PDFs on your local machine and never sends them to a server.
Does it work with Figma's Dev Mode?
Yes — once converted, standard Figma functionality applies, including Dev Mode inspection, prototyping, and component libraries.
Can I turn my edited design back into a PDF?
Yes — with the companion plugin export.design.
Can I import multiple PDFs at once?
Yes — importing multiple files at once is included with ‹div›RIOTS ONE.
Is pdf.to.design free?
There’s a free plan: unlimited imports as static images in the plugin, and 5 imports as editable layers (first 3 pages only) in both the plugin and the web tool. ‹div›RIOTS ONE unlocks full features and multiple files at once (see Pricing, above).