With the <a href="http://html.to.design" target="_blank" rel="noopener nofollow">html.to.design</a> extension, you can clone any real-world website and instantly transform it into 100% editable vectors, fonts, images, and layouts right inside your Figma canvas.
It is the ultimate shortcut to bridge the gap between frontend development and UI/UX design!
🚀 How it works in just 2 steps:
<ol>
<li>Visit any website and click the extension icon to capture the page.</li>
<li>Copy it to your clipboard and hit Paste (Ctrl+V / ⌘+V) directly in Figma. Everything appears perfectly organized in layers!</li>
</ol>
🔥 Why it belongs in your dev stack:
<ul>
<li>Fully Editable: Modify real fonts, text contents, colors, and shapes without limits.</li>
<li>Instant Assets: Extract complex layouts, hero sections, or buttons to reverse-engineer their visual structure.</li>
<li>Massive Time Saver: Perfect for building rapid wireframes, creating client demos, or studying layout architectures.</li>
<li>100% Free: Access this powerful automated workflow without any paid subscriptions.</li>
</ul>
Download <a href="https://chromewebstore.google.com/detail/htmltodesign/ldnheaepmnmbjjjahokphckbpgciiaed" target="_blank" rel="noopener nofollow">html.to.design</a> on the Chrome Web Store

Smiley Face

Welcome to Showcase. A dedicated space for the daily.dev community to demo side-projects and share product updates. Whether it's a weekend build, a SaaS launch, or a helpful open-source tool, your code deserves an audience.

Showcase

html.to.design is a free Chrome extension that converts any live website into fully editable Figma layers, including vectors, fonts, images, and layouts. It works in two steps: capture a page via the extension, then paste directly into Figma. Useful for reverse-engineering designs, building wireframes, and creating client demos.

Convert ANY Web Page to Editable Figma Layers for FREE!