Does Storyboard support Sketch?

Crank Storyboard is purpose-built to remove barriers between developers and designers working together on embedded GUI products. While Adobe Photoshop was the designers’ tool of choice for many years, Sketch has seen a growing rise in popularity and, naturally, we get many questions around how we support it.

In this UXTools.co survey of over 4000 designers, Sketch was chosen as the primary design tool by over 14 times more professionals than Photoshop.

What does this mean for Storyboard users?

With our upcoming release, teams will get unparalleled support for Sketch design files, including all the import and re-import features that help embedded GUI teams iterate fast, streamline testing, and deliver products quickly.

Evan Beisheim, software developer at Crank, and Daniel Conroy, user interface designer, explain how Storyboard’s support for Sketch works and what you’ll get in our next release.

How have you contributed to our Sketch story?

Evan: As part of the R&D team here at Crank, I’ve worked on different aspects of the Storyboard product, from the runtime to the front end. For Sketch, I’ve done a lot of work on understanding how its design files work to build our import and re-import functionality.

Dan: I’m a graphic and user experience (UX) designer that supports our marketing and product teams. A key part of my role is designing GUIs for professional services and realistic samples for the product teams, including ones that help Evan test what works and what doesn’t work to validate our Sketch features. Between the two of us, we set up the GUI scenarios within Sketch to determine the best workflows across tools.

What differences between Sketch and Photoshop should embedded GUI teams be aware of?

Dan: There are reasons outside of what we do that are important to embedded GUI design teams. Not only is Sketch more popular than Photoshop these days, it's usually more cost effective too. Sketch also tends to be less memory and resource intensive than Photoshop, and everyone likes to have more horsepower at their disposal.

Being over 30 years old, I’d suggest that Photoshop wasn’t really built with product design in mind, especially projects in embedded systems. Sketch came into being in the post-iPhone world so it's more focused and optimized on GUI design and optimization rather than having extraneous features for photo editing and image manipulation. There’s features within Sketch that come out as a result, like shared styles that allow designers to reuse common elements across the GUI document instead of having to rely on your own manual work to make global changes in a Photoshop project.

Evan: Another important difference is the Sketch Page. Designers use Pages to organize content within a document, something that doesn’t exist within Photoshop. Pages are a great feature for GUI designers as it allows them to split up content within a document that may not be related but is useful to refer to. For example, a designer can layout one GUI screen per Page, do whatever modifications they want, and select only those Pages they want for import and re-import into Storyboard.

This brings up a good point for Storyboard users. Everything in Sketch, whether it’s a shared style or Page, gets brought in and rasterized into a PNG image in Storyboard. This means designers and developers don’t have to worry about missing elements or having to rebuild things within the Storyboard workspace. They can focus on adding transitions, animations, and events, and integrating the GUI with the backend application.

How does Storyboard support Sketch users?

Evan: With the upcoming release and our rapid design import and iteration technology, Storyboard allows users to import and re-import Sketch documents directly into the workspace, preserving all elements of the design and its iterations. This is a one-click approach to bringing in the rich designs and UX work into the platform for further work on application behavior, testing, and performance optimization.

The Import Wizard is run first, to bring the Sketch document into Storyboard and allow the developer to do their work. Any time there’s a design change, say from user testing, the Re-Import Wizard is used to apply those updates to the Storyboard GUI application, without having to modify or redo any of the backend work that’s already been done. The Re-Import Wizard also includes a merge and compare tool that shows users a visual representation of the design changes that were made and allows them to pick and choose the ones they want to accept into the Storyboard application. Even if you’ve added a completely new screen, the Re-Import Wizard will identify it and you can add it to your existing project.

This drastically improves the Sketch workflow as users no longer need to use a separate plugin to import files, it can all be done within the Storyboard workspace.

Dan: This streamlined approach ensures that embedded GUI teams can work better together with Sketch. The designer has the freedom to create the best UX possible while the developer can focus on the backend integration work. And neither of them have to worry about design changes and iterations driven by outside stakeholders as the Storyboard re-import process ensures those changes are reflected in the workspace with minimal work.

How do you set up Sketch to work with Storyboard?

Evan: It may seem obvious but you do need Sketch installed on your computer (unlike Photoshop). Within your Sketch document, there are a couple things to consider to streamline the import and re-import processes into Storyboard:

1. Lay out your designs exactly like they would be laid out in Storyboard, including GUI hierarchy. This ensures there’s no discrepancies between size, layout, behavior, etc. between the two tools.
2. Ensure unique and consistent naming across Sketch elements. Sketch is very free form — you could literally name everything the same — but Storyboard requires unique names to identify elements, handle events, and update behavior at runtime.
3. While Sketch supports an almost infinite number of recursive objects, Storyboard has a strict application architecture to optimize runtime performance. Designers should learn this architecture and build it into their Sketch documents to make sure nothing is lost. You can learn more details about Sketch best practices in this guide.

With the growing adoption of Sketch as an embedded GUI design tool, we are committed to evolving our rapid design import and iteration technology to keep supporting it as a source of amazing UX content.

To learn more about how Storyboard supports Sketch, watch Evan and Dan’s Advanced User Training video: