The latest articles on DEV Community by dren0r (@dren0r). https://dev.to/dren0r 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%2F854409%2F2eccd1b9-60b6-47fa-9dba-7b1d94bd20be.png https://dev.to/dren0r en dren0r Sun, 31 Aug 2025 13:26:18 +0000 https://dev.to/dren0r/compare-design-to-website-in-one-click-3kg https://dev.to/dren0r/compare-design-to-website-in-one-click-3kg <p>Hi, everyone👋<br> I would like to share my first startup. Hope you find it useful! </p> <p><a href="https://overfig.com/" rel="noopener noreferrer"><strong>Over.fig</strong> </a>— a free Chrome extension that overlays your Figma semi-transparent design directly on the webpage for instant visual comparison.</p> <p>🔧 How It Works:</p> <ol> <li><strong>Paste your Figma link</strong></li> <li> <strong>Pick a frame</strong> to overlay</li> <li> <strong>Compare instantly</strong> — your design floats right over your web page</li> </ol> <p>✅ Key Features:</p> <ul> <li>Pixel-perfect accuracy</li> <li>Effortless Figma CSS inspection — auto-convert styles to Tailwind utility classes</li> <li>Precise measurements — see design elements spacing, font sizes, and alignment in real time</li> <li>Custom font support</li> <li>Download optimized assets directly from Figma</li> <li>Save hours every week on QA and revisions</li> </ul> <p>🚀All features are available <strong>absolutely for free</strong>.<br> Would love your feedback!</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp2z1vnnb80la4ef9va7t.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp2z1vnnb80la4ef9va7t.png" alt=" " width="800" height="500"></a><br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F50dzixfv66zbufdyiq1c.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F50dzixfv66zbufdyiq1c.png" alt=" " width="800" height="500"></a></p> webdev productivity discuss frontend