‹div›RIOTS logo
Figma logo with an arrow pointing into HTML 5 logo.

From Figma frame to HTML - Introducing the /clip endpoint

We’re excited to announce a new endpoint in our code.to.design API: /clip!

code.to.design is the only API that turns HTML into Figma designs, programatically. And now the API runs in both directions, thanks to the new /clip endpoint: send a Figma clipboard payload, get back a zip of clean, pixel-perfect HTML (inline styles or TailwindCSS) and images. Your users can copy from Figma and paste straight into your app!

This guide covers exactly how the /clip endpoint works and how to integrate it into your product for an “Import from Figma” feature.

Quick Guide: From Figma to HTML

  • Step 1. Copy one or more frames in Figma using Cmd+C (Mac) or Ctrl+C (Windows).

  • Step 2. Capture the raw text/html clipboard payload that Figma writes on copy.

  • Step 3. Send a POST request to https://api.to.design/clip with that payload in the clipboard field.

  • Step 4. Include your API key in the Authorization header as Bearer YOUR_KEY_HERE.

  • Step 5. Choose your output format: html-inlinestyles or html-tailwindcss.

  • Step 6. Receive a .zip file containing one index.html per top-level frame and images — ready to use.

ℹ️ For a complete guide, check out the /clip endpoint documentation

What the /clip endpoint converts

A common question is: what exactly gets preserved in the Figma to HTML conversion?

The endpoint processes whatever is in the Figma clipboard payload — specifically the text/html data Figma writes on copy. It converts each top-level frame in that payload into a standalone index.html file.

Output format options:

  • html-inlinestyles: Every CSS property (position, size, color, font, spacing) is written as an inline style attribute. No class names, no stylesheets, no dependencies. The file renders correctly anywhere.

  • html-tailwindcss: Styles are expressed using Tailwind CSS utility classes. Requires Tailwind to be available in the target environment. This output integrates directly into projects already using Tailwind.

Why use the /clip endpoint?

The handoff gap between Figma and code is a real time cost. First you need to inspect frames in Figma, manually write HTML, cross-reference spacing values, and re-check colors. The /clip endpoint removes that loop.

  • No Figma authentication required from the end user. The input is clipboard data — a paste event. Users don’t need to authenticate with Figma or expose file keys.

  • Integrates into any web app. Because the trigger is a standard paste event, you can add this to design tools, internal dashboards, or handoff platforms without building a Figma plugin.

  • Two output formats match your stack. Inline styles work in any environment. Tailwind output fits directly into projects that already use Tailwind classes.

  • Per-frame pricing is predictable. At 1 credit per index.html, the cost scales exactly with the number of frames converted — no surprises.

Use code.to.design and /clip in your product

The new /clip endpoint gives builders a direct path from a Figma frame to clean, pixel-perfect HTML. Copy frames in Figma, send the clipboard data to https://api.to.design/clip, and get back a zip of ready-to-use index.html files — with inline styles or Tailwind classes depending on your stack.

Try it in the code.to.design API and see how it fits in your product or workflow.

🚀 Want to see /clip in action?

Try our new figma.to.code web service — paste a Figma frame and get clean HTML and images back (or download the .zip file). It runs 100% on the new /clip endpoint.

FAQ

Q: Do users need to be logged in to Figma to use /clip?

No. The /clip endpoint accepts raw clipboard data from a paste event — the text/html payload Figma writes when you copy a frame. No Figma authentication is required on the user’s side.

Q: How many index.html files does one request return?

One per top-level frame in the clipboard data. If you copy three frames in Figma before pasting, the zip contains three index.html files. Each one costs 1 credit.

Q: What is the difference between html-inlinestyles and html-tailwindcss output?

html-inlinestyles writes all CSS as inline style attributes — no dependencies, works anywhere. html-tailwindcss uses Tailwind utility classes instead, which integrates directly into projects already running Tailwind but requires Tailwind to be present in the target environment.