Websites can now be pasted into Figma 😱

1. Capture any webpage or section
2. "Copy to clipboard"
3. Paste straight into Figma

The fastest workflow to import websites into Figma we've ever shipped

For devs: we keep expanding the ‹div›RIOTS #API.

🆕 InDesign -> Figma

/v1/convert takes #InDesign .idml (pages, master pages, layers, text, styles, images) and returns #Figma clipboard data or REST-style JSON.

Same endpoint as PSD, AI, XD, PDF, Office.

htdevtools

Fresh in the html.to.design browser extension

New Genspark AI Slides → #Figma ✨

Open a deck in Genspark's new slides viewer, capture it, and paste the slides as editable frames.
chromewebstore.google.com/detail/htmltod…

New in the html.to.design Chrome extension

Capture as Code Layer ✨

Capture any page, even behind a login, and paste it into #Figma as a code layer that renders the real page. Resize it and the layout reflows, 1512px to 390px.

Try it out 👉 chromewebstore.google.com/detail/htmltod…

Drop a screenshot in. Get real #Figma layers out.

image.to.design rebuilt this dashboard as 108 editable layers: real text, auto layout, properly named layers, grid, you name it.

No prompt to write, just pick a quality tier.

divriots.com/image.to.design

For devs: we keep expanding the ‹div›RIOTS #API.

🆕 InDesign -> Figma

/v1/convert takes #InDesign .idml (pages, master pages, layers, text, styles, images) and returns #Figma clipboard data or REST-style JSON.

Same endpoint as PSD, AI, XD, PDF, Office.

htdevtools

#Canva shipped two AI models in a week: Craft makes images, Brush edits your designs.

Still no "Export to Figma" button. So:

1. Open the design in Chrome
2. Capture it with html.to.design Chrome Extension
3. ⌘+V in #Figma: editable text & everything

Full guide 👇
divriots.com/blog/from-canv…

Not screenshots. Real #Figma layers.

The html.to.design Chrome extension can now "Record flow": click through your pages like a real user, and it all lands in #Figma as editable layers, in order ✨

Available in the Chrome extension. Works behind a login.

Try it out 👉 html.to.design/chrome-extensi…
#Figma #FigmaPlugin

New habit: prototype in Claude, polish in #Figma, then screenshot the frames back to the agent.

Skip that. Run export.design, pick Web page, get clean HTML: real text, auto layout as flexbox, images as files.

Hand it to #Claude or #Cursor.

👉 divriots.com/export.design

Claude design → #Figma, editable layers. 3 ways:

1. Extension on the Claude tab → Copy → ⌘V in Figma
html.to.design/chrome-extensi…

2. Share → Project HTML → drop the .zip in the plugin
figma.com/community/plug…

3. MCP: ask #Claude to "send this to Figma"
html.to.design/docs/mcp-tab

You want to move a live no-code site straight into code?

But there's no Figma file. No source. Just the live site.

Take a screenshot up to 100 000 px long, run it through Image to Design (by @divriots), and get pixel-perfect code back 🤯

No original files needed. Pure magic!

Auditing a sign-up flow? Don't screenshot every page.

"Record flow": click through it like a real user, and every page lands in #Figma as editable layers, in order ✨

Available in the Chrome extension. Works behind a login.

Try it out 👉 html.to.design/chrome-extensi…
#Figma #FigmaPlugin

Adobe XD → Editable Figma✨

1. Open the #Figma plugin
2. Drop you XD file
3. Start editing

Bonus: runs locally, your file never leaves your machine.

Here's the full workflow 👇
divriots.com/blog/how-to-im…
#AdobeXD #XD #Figma

Claude Design's standalone site closes December 14. Here is how to migrate your projects to #Figma, fully editable.

html.to.design/blog/export-cl…

Workflow 👇

1. Share → Project HTML → Export
2. Drop the .zip into html.to.design

#ClaudeDesign #FigmaPlugin

Record a user flow → get every page in #Figma, in order ✨

→ Click "Record flow"
→ Browse like a real user
→ Export steps → Send to Figma

Editable layers, links ported to Figma prototype + works behind a login.

Try it out 👉 chromewebstore.google.com/detail/htmltod…
#FigmaPlugin

PDF → editable Figma – Now available directly in your browser✨

- Text stays text
- Vectors stay vectors
- Every page gets its own frame

pdf.to.design Drop your PDF, pick a layout, import.
#Figma

🆕 Adobe Fireworks → editable Figma ✨

fireworks.to.design rebuilds your legacy Fireworks files in Figma: pages, layers, text, vectors, symbols.

Drop your file, hit Convert, past it back into Figma, 100% edtable👇
divriots.com/fireworks.to.d…
#Figma #FigmaPlugin #webdesign

🆕 Adobe XD → editable Figma ✨

xd.to.design rebuilds your XD files in Figma: artboards, layers, text, vectors, images.

Figma plugin + web tool available 👇
divriots.com/xd.to.design/
#Figma #FigmaPlugin #AdobeXD

Canva has no "Export to Figma" button.

Here's the workaround ✨

- Open your design in Chrome
- Capture it with the chrome extension
- ⌘+V in #Figma → editable layers, not a PNG

Private drafts work too.

Full workflow 👇
divriots.com/blog/from-canv…
#Figma #FigmaPlugin

Quick reminder: html.to.design works with every major LLM ✨

#Claude, #ClaudeDesign, #ChatGPT, #Gemini… you name it.

→ Design something
→ Launch the Chrome extension
→ Import in #Figma

100% editable layers, in a couple of clicks 👇
chromewebstore.google.com/detail/ldnheae…
#FigmaPlugin

Many MANY requests for this one.

Adobe XD → Editable Figma with xd.to.design ✨

- Drag n drop
- Runs locally, your file never leaves your machine.

Here's the full workflow 👇
divriots.com/blog/how-to-im…
#AdobeXD #XD #Figma