The latest articles on DEV Community by Nick (@cranch42). https://dev.to/cranch42 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F387403%2F18a7009d-588c-4ebd-ac28-072bec8d4f03.png https://dev.to/cranch42 en Nick Tue, 17 Mar 2026 19:53:26 +0000 https://dev.to/cranch42/turn-any-website-into-editable-figma-layers-for-free-and-no-plugin-4pc1 https://dev.to/cranch42/turn-any-website-into-editable-figma-layers-for-free-and-no-plugin-4pc1 <p>Just made a free Chrome extension that lets you grab a web page and bring it into Figma as editable layers. No plugin needed, it all runs in the browser.</p> <p>It’s still early, so results can vary depending on how the site is built. More complex or unusual layouts might not come through perfectly. But for most pages, it works pretty well.</p> <p> </p> <div class="crayons-card c-embed text-styles text-styles--secondary"> <div class="c-embed__content"> <div class="c-embed__cover"> <a href="https://chromewebstore.google.com/detail/figma-capture/cdnkhcphkjllegdamanngnhcgfnledcl" class="c-link align-middle" rel="noopener noreferrer"> <img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh3.googleusercontent.com%2F6PRxrsKkFpUn7E16IcDZRngU96GVzv9S5Ndb58Y3Vf-bnfsmxbr17Rl7-0yoKf3Dh-qCt5JcJpX8ZjUfke1Stkn0%3Ds128-rj-sc0x00ffffff" height="auto" class="m-0"> </a> </div> <div class="c-embed__body"> <h2 class="fs-xl lh-tight"> <a href="https://chromewebstore.google.com/detail/figma-capture/cdnkhcphkjllegdamanngnhcgfnledcl" rel="noopener noreferrer" class="c-link"> Figma Capture - Chrome Web Store </a> </h2> <p class="truncate-at-3"> Capture any webpage for Figma with one click </p> <div class="color-secondary fs-s flex items-center"> <img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fssl.gstatic.com%2Fchrome%2Fwebstore%2Fimages%2Ficon_48px.png"> chromewebstore.google.com </div> </div> </div> </div> <p>Demo below 👇</p> <p> <iframe src="https://www.youtube.com/embed/VaIXD1rBM1I"> </iframe> </p> figma webdev showdev