With this guide you will learn how Shots works and how you can use it to supercharge your products. Let’s start!
In this guide you'll take your very first steps with Shots.
1. Create an account
Create a free account on Shots from the Sign Up page.
Shots runs directly from the browser and doesn't require users to download anything.
2. Find a mobile design pattern
Next, browse Shots to find a mobile design pattern you are interested in. You can filter by UI elements detected in images, tags, OS and even common UX patterns.
Hover the shot you like with your mouse. Click trace to activate the tracing process for that particular screen.
2. Discover details about the shot
The shot is processed using artificial intelligence. Colors, fonts, ui elements and more are extracted from the shot in real time. You can view the details of what was detected by hovering the elements after they have been traced.
3. Download HTML
Click download html to convert the traced mobile shot into HTML and CSS. The exported HTML output is converted to Twitter Bootstrap 4. For legal reasons we replace images with placeholders because they have copyrights.
We're excited with the many possibilities of the technology behind Shots. Tracing to Sketch, creating design systems on the fly, exporting to React and so much more!