export.design Docs

export.design docs

Last updated

What it is

export.design converts Figma frames into a print-ready PDF, an editable PowerPoint deck, or HTML code.

Option Output
Web tool PDF, PowerPoint, or Web page (HTML with inline styles or Tailwind CSS)
Figma plugin PDF, PowerPoint, or Web page
API PDF, PowerPoint, or HTML (inline styles or Tailwind CSS)

The web tool and the API don't need the Figma plugin. Output details are in Output.

What it does

export.design takes Figma frames and returns them as a file you can print, present, or hand to code. Copy frames in Figma, paste them into export.design, and pick an output: a PDF, a PowerPoint deck, or HTML.

The conversion runs on ‹div›RIOTS' own engine, making it near-instant with each frame costing the same, whatever the design.

Where it runs

The web tool runs in your browser at divriots.com/export.design. It is a web service: no Figma plugin to install, no admin approval, and no file access to grant. Paste copied frames, or drop a .fig file.

The Figma plugin runs inside Figma and exports the frames you select to a PDF, a PowerPoint deck or a web page, with no tab switching and no copy-paste (Figma Community). It works in Figma Design, FigJam, Figma Slides and Figma Buzz.

The ‹div›RIOTS API runs wherever you call it from, in any backend or app that can make an HTTP request. Same engine, with fig, figma-clipboard and figma-rest as input formats. Metered separately, see Pricing. Full reference: ‹div›RIOTS API documentation.

Supported input formats

The web tool takes Figma frames from the clipboard or a saved Figma file. The API accepts three Figma input formats.

Input Where What it is
Figma frames copied from the canvas Web tool, API (figma-clipboard) A selection copied in Figma with Ctrl+C / Cmd+C and pasted in
.fig file Web tool, API (fig) A Figma design file saved locally
Figma REST API JSON API (figma-rest) Figma nodes as the Figma REST API returns them (or a plugin's JSON_REST_V1 export), plus their image fills

One selection can hold several frames. Each frame is converted separately.

Output

export.design returns a PDF, a PowerPoint deck, or HTML. Multiple frames become one PDF, one deck, or a list of individual HTML files.

Output What you get
PDF Print-ready, one page per frame at the frame's own size. Real, searchable and selectable text with subsetted fonts embedded.
PowerPoint Editable deck, one slide per frame. Real text boxes, native shapes, gradients and shadows.
Web page (HTML) Inline styles, or Tailwind CSS classes. Each frame is listed individually, ready to copy or download as its own folder.

export.design keeps the parts of a frame that each format can express natively, and falls back to a bitmap only where it must. Editability lists what carries over, element by element.

PDF page size

Fit-to-frame (default), A4, A3, Letter, or Legal, with an option for a white page background.

HTML formats

Inline styles produce self-contained markup, suited to emails, embeds and single-file demos. Tailwind output suits projects already using Tailwind CSS, and needs Tailwind available where it runs.

Figma plugin

Select the frames, choose PDF, PowerPoint or Web page, and export. For Web page, the plugin writes one folder per frame, with its images, and turns auto layout into real flex layout. A Styling option sets how the CSS is written: Inline CSS (the default) or Tailwind. The File name field accepts the tokens {name}, {count} and {date}, and a web page export is saved as a zip.

API

Four output formats are available for the Figma input types:

Output format What it is
pdf A print-ready PDF, one page per frame, with selectable text and embedded fonts
pptx An editable PowerPoint deck, one slide per frame: real text boxes, native shapes, gradients and shadows
html-tailwindcss Generated HTML using Tailwind CSS, delivered as a ZIP
html-inlinestyles Generated HTML using inline styles, delivered as a ZIP

Editability

What carries over, by element and output:

Element PDF PowerPoint Web page
Text Real, selectable and searchable Editable text boxes Real text in the DOM
Fonts Subsetted and embedded Matched by name Embedded via @font-face
Shapes and vectors Kept vector Native shapes and custom geometry Inline SVG
Images Full-resolution fills Native pictures, crop kept Extracted as asset files
Colors and gradients Vector gradients Native gradients; conic gradients rasterized CSS gradients, conic included
Shadows and effects Vector shadows; blur rasterized Native shadows; blur and blend rasterized Live CSS filters and blend modes
Layout One page per frame, never reflows Exact positions, named groups Auto layout becomes real flex layout

Image fills keep their crop and tiling, and an image used across many frames is stored once.

Figma-specific behaviors that have no direct HTML equivalent are not part of the HTML output: prototype interactions, variables, and component variant logic.

Limits

Limit Value
Credit cost 1 credit per frame, whatever the design's complexity
Effects a format can't express Fall back to a bitmap (see Editability)
HTML output No prototype interactions, variables, or component variant logic
Tailwind output Needs Tailwind CSS available in the project where the HTML is used

Privacy & processing

As per the code.to.design privacy policy, which covers Figma content sent for conversion:

  • Your Figma content (“Input Data”) is processed solely to generate the requested output.
  • Data minimization: processed in memory or ephemeral storage, and deleted shortly after the conversion completes or after a short window for debugging.
  • Not used to train public AI models.
  • Encrypted in transit (HTTPS).

The web tool needs no Figma authentication and no access to your Figma files — you copy frames or drop a .fig file yourself.

Pricing

Every conversion is 1 credit per frame, whatever the design's complexity. There is no token billing.

Option Free tier Paid
Web tool Free trial: your first export is free, no credit card required 1 credit per frame
API — 1 credit per frame for fig, figma-clipboard and figma-rest input, to pdf, pptx, html-tailwindcss or html-inlinestyles output

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

Explore plans

How to use

Web tool

  1. Go to divriots.com/export.design.
  2. In Figma, copy one or more frames (Ctrl+C / Cmd+C), click the drop zone and paste (Ctrl+V / Cmd+V). You can also drop or browse to upload a .fig file.
  3. Pick the output: PDF, PowerPoint, or Web page. For PDF, choose a page size (Fit-to-frame, A4, A3, Letter or Legal) and whether to keep the white page background. For Web page, choose inline styles or Tailwind CSS.
  4. Download the PDF or the PowerPoint deck, or copy or download the code.

Figma plugin

  1. Open your Figma file and select the frames to export.
  2. Launch export.design from the plugins menu.
  3. Choose PDF, PowerPoint or Web page. For Web page, pick a Styling option.
  4. Edit the File name if you want. It accepts {name}, {count} and {date}.
  5. Click Export.

API

  1. Generate an API key from your ‹div›RIOTS ONE dashboard.
  2. Send a request to the /convert endpoint with input set to fig, figma-clipboard or figma-rest, and an output of pdf, pptx, html-tailwindcss or html-inlinestyles.
  3. The conversion runs as a background job: the call returns 202 Accepted with a Location header. Poll GET /convert/jobs/{jobId} until status is done, then download the result from resultUrl (a signed URL valid ~15 min; re-poll for a fresh one if it expires).

For HTML from a Figma copy-paste, the /clip endpoint takes the raw clipboard payload Figma writes on copy and returns a ZIP with one index.html per top-level frame, plus images. Choose html-inlinestyles or html-tailwindcss. Guide: From Figma frame to HTML. Full reference: ‹div›RIOTS API documentation.

FAQ

Do I need to install a Figma plugin?

No. export.design is a web service. Copy a frame in Figma, paste it into export.design, and get your file: no plugin install, no admin approval, and no file access to grant. The Figma plugin is optional — it lets you select frames, choose the output and export without leaving Figma, with no tab switching and no copy-paste.

What output formats are supported?

A print-ready PDF, an editable PowerPoint deck, or your frames as code: HTML with inline styles, or HTML with Tailwind CSS classes. Pick inline for self-contained markup (emails, embeds, single-file demos), or Tailwind if your project already uses it.

Is the text in the PDF selectable?

Yes. export.design renders real, subsetted fonts, so text stays selectable and searchable rather than flattened to a raster image.

What page sizes can the PDF use?

Fit-to-frame, A4, A3, Letter, or Legal. Fit-to-frame gives each page the size of its frame.

Can I edit the PowerPoint output?

Yes. The deck keeps real text boxes and native shapes, so it can be edited in PowerPoint, Keynote or Google Slides. Fonts are matched by name, not embedded.

What does the exported code include?

The parts of a Figma design that have direct equivalents in HTML and CSS: layout structure, typography, colors and fills, spacing from auto layout, and images exported as assets and referenced inline. Prototype interactions, variables, and component variant logic have no direct HTML equivalent and are not part of the output.

Does export.design support multiple pages or frames?

Yes. Copy several pages or frames in one selection and each one is converted separately. To PDF they become one document, one page per frame at its own size, so a fixed design never reflows. To PowerPoint, one slide per frame. To code, each is listed individually, ready to copy or download as its own folder.

Can I use a .fig file instead of copying frames?

Yes. Drop a .fig file into the web tool, or send it to the API as the fig input.

Does export.design use AI?

No. It runs on ‹div›RIOTS' own conversion engine. No LLM generates your PDF or your code, so the output is deterministic, conversion is near-instant and the price is flat: 1 credit per frame, whatever the design.

What if a format can't express part of my design?

export.design falls back to a bitmap only for what can't be expressed natively: blur in PDFs, and conic gradients, blur and blend effects in PowerPoint. In the Web page output, gradients (conic included), filters and blend modes stay as live CSS.

Can I name the exported files?

Yes, in the Figma plugin. The File name field accepts the tokens {name}, {count} and {date}. A web page export is saved as a zip.

How much does it cost?

A flat 1 credit per frame, regardless of design complexity. The free trial includes your first export, with no credit card required. There is no token billing and no surprise charges for complex designs.

Is there an API?

Yes. The ‹div›RIOTS API converts fig, figma-clipboard and figma-rest input to pdf, pptx, html-tailwindcss or html-inlinestyles output at 1 credit per frame. See the API documentation.

Can I bring the PDF back into Figma?

pdf.to.design imports PDF files into Figma as editable layers or static images.

See also