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. 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. One DOM element, like a Card UI or a toolbar. 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 to. Have <this/> 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
