Import Screenshots: Export code.

Today, after a summer of silence and hard work, I finally get to announce the launch of Shots, a new approach to interface development and rapid prototyping.

Creating ideas as quickly as possible to test, validate and iterate is essential to building successful products. The more time between the new ideas and the end users who use them; the greater the risk of failure.

Most product ideas require designers and developers to collaborate. When you’re moving fast sometimes the details are often missed and the feedback is inaccurate — this can misdirect the product. Designers have an eye to see past low fidelity design work to focus on the experience. Testers, users and other stakeholders do not. They commonly get stuck on details and have expectations for other design elements to be present in the design.

We realized that one of the biggest pain points product teams face on a day-to-day is fidelity in their prototypes. Teams ideate and take inspiration from high quality, well tested, rich galleries of app screenshots and wireframes; however, it takes time to introduce this level of quality early in the process. With the role of the designer being so crucial the availability of tools to help them solve these types of problems are extremely limited. Today no tool allows product teams to browse inspiration galleries and live trace existing screenshots or app wireframes and instantly convert them into code. When we started working on Shots we knew we could leverage the same technology that powers self-driving vehicles to see signs, people and cars to also identify UI elements and other design patterns present in screenshots and wireframes, but we had no idea how hard it would be. Building custom models, overcoming bias and the countless edge cases that surface due to the nuances in design techniques has not made it easy. Expectations for generated code are high. After using Shots internally and working with alpha customers, I’m confident we’re reached this high bar.

Today, we’re announcing Shots is available to use. We’re really looking to the product community to help shape our product roadmap. We’re just getting started and excited for what’s to come.

Here are some specific things we’re really excited about in 2019:

• Exporting Sketch files complete with design system
• In browser editing — change code through design
• Sending scans to Xcode Storyboard

The possibilities of what you can do with Shots are limitless. I can’t wait to see what you will create.