Designers Toolbox: An instant PNG of any HTML element in the browser

Try this simple Chrome Extension

Install Extension: https://chrome.google.com/webstore/detail/have-this/cndkjfadkjnabmchlgmcecmgndpbedbn

As a designer who works largely in the browser (“code”), I’ve long had to fumble around with screenshotting iterations. Especially in application UI work.

To archive an iteration or scrapbook an idea, screenshots are OK, but often I want to have just one thing. One DOM element, like a Card UI or a toolbar. I often don’t need the whole screen. And I don’t want have to go through a bunch of rigmarole to show what I need to show in Slack for a 30 second conversation.

A simple tool to utilize browser-based design assets in my workflow.

Learn more: http://iamhavingthis.com/

Artifacts of prototyping are typically mundane with short lifespans. Additionally, the focus is often on a single component with several variants. Essentially, the steps of taking screenshots, cropping to get just the right bits, can be time consuming with multiple steps. And the effort is enough that it steals focus from the design work at hand.

To evaluate all states of a UI component, the prep work shouldn’t take longer than the design review itself. E.g. quickly posting up all 5 variants of a UI component for a short-lived exercise, like reviewing component states to help sprint planning.

And when marketing needs a render of new features for a presentation, it shouldn’t be a PITA o_r something that requires me to do it._

Not having found a decent tool that scratches my itch, I built my own.

This is what I wanted to have. Maybe you want it Have <this/> to.

If you’ve been looking for similar, I hope it helps. Let me know what you think and if you’d use it too.

—

Built with React and copying Stackoverflow

Chrome Web Store: https://chrome.google.com/webstore/detail/have-this/cndkjfadkjnabmchlgmcecmgndpbedbn

Open-source: https://github.com/jessekorzan/have-this