We craft revolutionary Figma plugins 👉 https://nitter.cf/t.co/PMmwnTp3Qh
Europe
Joined April 2019
- Tweets762
- Following12
- Followers2.9K
- Likes1.3K
Pinned Tweet
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
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/de…
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.
divriots.com/api #devtools
ALT Terminal showing a curl POST to https://api.divriots.com/v1/convert with input format "idml" (a brochure.idml URL) and output format "figma-clipboard". Comments: 202 Accepted, poll GET /v1/convert/jobs/{jobId} until done; pages, master pages, layers, text, styles, images, paste into Figma.
#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-canva…
ALT A Canva design open in Chrome with the html.to.design extension popup, an arrow, and the same design in Figma with its text layers selected.
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-extens…
#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-extens…
2. Share → Project HTML → drop the .zip in the plugin
figma.com/community/plugin/1…
3. MCP: ask #Claude to "send this to Figma"
html.to.design/docs/mcp-tab
‹div›RIOTS retweeted
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-extens…
#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-imp…
#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-c…
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/de…
#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.de…
#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-canva…
#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/de…
#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-imp…
#AdobeXD #XD #Figma
New in psd.to.design: when importing your Photoshop files into Figma, we now bring pattern fills in as real Figma pattern tiles — not flattened images ✨
Scale it. Restyle it. Swap the source. Still fully editable.
#Figma #FigmaPlugin #psd
📢 BIG quality upgrade for image.to.design web tool and Figma plugin. The first results are 😱
Screenshot -> Editable Figma or HTML
- Better overall output
- Sharper posters with better font matching
- Icons are now matched across multiple libraries, or rebuilt as vectors when needed
Try it out 👉 image.to.design/
