Sketch to Storyboard Workflow

Introduction

For designers wanting to integrate their graphic design content from Sketch (www.sketch.com) Crank offers a plugin extension to the Sketch tool that allows users to export Sketch design files to Storyboard engine files that can be imported into Storyboard Designer.

https://github.com/cranksoftwaredev/SketchPlugins

Install this plugin to your Sketch plugins directory:

/Users/<usename>/Library/Application Support/com.bohemiancoding.sketch3/Plugins

And you should now be able to see two new options under the Plugins menu:

image8.png

Exporting Sketch Designs

For Storyboard users who have used the Photoshop import and re-import feature within Storyboard Designer the workflow for Sketch content conversion to Storyboard is a bit different in that the export process takes place from within the Sketch tool rather than being pulled from within Storyboard Designer.

This export from Sketch and import to Storyboard Designer workflow is currently due to the technical limitations on being able to replicate functionality observed in the Sketch tool based on the content of the Sketch file.  In order to best represent the same visual experience that a user would observe in the Sketch tool the Storyboard plugin uses Sketch to render the content to external file resources. This is a similar technical limitation that is imposed on Photoshop users to flatten any visual effects that they leverage within their Photoshop content.

The plugin provides two different options for exporting Sketch content to Storyboard:

Export Design To Storyboard

This menu option will export your entire Sketch design to a Storyboard application based on artboard content.  All artboards from all pages will be gathered and a screen will be built for each artboard encountered.

This approach is suitable for Sketch designs that are uniform in their design as being focused on a single particular target design and all artboards are the same.  Content that is on pages that is not contained in an artboard will not be exported. If the application does not take advantage of artboards then the content from each of the pages will be pushed instead for the export.

Export Selection To Storyboard

This menu option will examine the selection that you have made and rather than exporting the entire Sketch design to a Storyboard application, it will only export content that you have selected:

  • If your selection is a page, then the artboards on that page will be exported as screen

  • If your selection is an artboard then that artboard only will be exported as a screen

It is possible to select multiple items at a time and the exported Storyboard Design will encompass all of the selection.  In this way it is possible to take a complex design that contains potentially multiple destination targets (Storyboard/Embedded, Mobile, Web) and still export the design for Storyboard.

What is Exported from Sketch?

The result for selecting either the Export Design To Storyboard or Export Selection To Storyboard options is to prompt and ask you for a file system location where the exporter can create a new directory that will hold the exported content.

image5.png

The new directory will be created in the selected location using the name of the Sketch file along with the Sketch2Storyboard_ prefix.  What goes into this newly created directory is a Storyboard Engine model file (*.gapp) and all of the images that accompany that model file.  The Storyboard Engine file format is used as a quick method to transport content into Storyboard Designer.

Importing Content to Storyboard Designer

With the Sketch design content exported to the filesystem in Storyboard Engine format, it can now be easily imported into a new Storyboard Designer project.  From inside Storyboard Designer select:

File > Import > Storyboard Embedded Engine (GAPP)

image10.png
image7.png

Select the Storyboard Engine (*.gapp) file that was exported from the Sketch plugin.

  • If this is the first time that the import is occuring, then select to import the model into a base project.

  • If this is a re-import scenario then you will want to import the project into a secondary project so that you can use the Storyboard Designer merge/compare tools to manage the changes.

Once the import is complete the content of the Sketch export directory has been copied into the Storyboard Designer project and can be deleted or removed.  The new project should open automatically.

Managing Updates to Sketch Content

As the Sketch design changes, there will likely be a need to update the imported Storyboard project with the new model elements (screens etc) or visual assets.  Since the Sketch export occurs within the Sketch tool and is independent of the Storyboard Designer environment, change management currently requires a few steps:

  • Export the Sketch design to a Storyboard Engine file

  • Import the exported Storyboard Engine design to a temporary project

  • Use the Storyboard Compare &amp; Merge utilities to manage changes between projects

This workflow is likely to be updated in future Storyboard releases as more functionality is built into the Sketch exporter and Designer importer.

Import Storyboard Engine File to a Temporary Project

It is important that a secondary project be used for content re-imports because that is going to allow the full project based merge to be leveraged and not just the merging of the Storyboard model files.

This temporary project is only used during the merge process and can be discarded after the project has been imported.

image1.png

Use Designer Project Comparison To Resolve Differences

Now that two projects are in your Storyboard Designer workspace, you can use the Storyboard Designer Merge/Compare tools to update the base project with the changes that you desire.

Select the two projects and using the right click menu select the option:

Compare With > Each Other

This will compare the full content of the two projects together, combining both the model objects as well as all of the visual assets.

image9.png

If the updated Sketch file was in a differently named design file then when it is imported it may also take on a different Storyboard Designer model file name.  This is not a problem if you just want to update visual assets or if you want to select the two model files and compare them to each other (instead of the entire project) but it may be easier to compare the files directly in the context of their projects.

image6.png

To resolve that situation, rename the Storyboard Designer model file name so that it matches and will be compared directly to the other model file:

image4.png

With this approach you can use the standard process for picking updates that are relevant and then subsequently adjusting image assets to match.

Sketch to Storyboard Model Alignment

The Sketch Storyboard Export plugin has several limitations with respect to the alignment of the Sketch development model and the Storyboard model.  Those limitations and model mis-alignments are highlighted below.

In general the transformation that will be applied is as follows:

Sketch Element

Storyboard Element(s)

Notes

Artboard

Screen

Artboards should all be the same dimension in order to be properly created as Storyboard Screens.

Drawing Primitive

Image Render Extension

This drawing primitive will be parented under a control.  The control may be the parent object or a synthetically created name.

Groups under Artboards

Layer

The first group that is located under an artboard will be turned into a Storyboard Layer.  Subsequent child groups will become groups or controls based on their own content based on the type of group element.

Group w/ Primitives

Control w/ Render Extensions

A group with only drawing primitives will turn into a Storyboard Control with render extensions for each draw operation.

Group w/ Sub Groups

Group w/ ControlsLayer w/ Group and Controls

Depending on the nature of the group, the sub-group components may be flattened together

image3.png
image2.png

Sketch supports multiple level of nested groups; Storyboard does not support nested groups:

The difference in approach to the hierarchy of model objects that can be created within Storyboard is such that if you have a group within Sketch that group will be maintained at the first level and then any subsequent groups will have their content merged together as multiple controls.

Sketch text export does not contain all text font metrics and information needed for Storyboard:

The current implementation of the Sketch Storyboard export plugin does not have the ability to extract all of the text positioning and font information from the Sketch model files.  This makes it impractical to create Storyboard controls with text render extensions as they would require significant changes to align with the visual presentation that is present in the Sketch design.

Sketch naming conventions only support _group and _layer hints:

While the default rules are applied to define how Sketch content is converted to Storyboard model objects it is possible for the user to use the _group and _layer  naming hints to indicate that the Sketch content should be converted to a Storyboard layer or group respectively.

Sketch designs do not automatically create action bindings:

At this time there is no similar functionality to the Photoshop naming convention of using _up/_down as hints that a visual element should have different up/down states and be bound automatically to Storyboard press and release events.  This is due to a different set of conventions established by Sketch plugins and the Sketch symbol system. These conventions are being examined as a more native and natural approach for action binding in the context of a Sketch design.

Sketch symbol libraries are re-useable visual assets that are not supported in Storyboard:

Sketch provides a notion of a symbol library that can serve as a master reference for other visual elements within the Design and then that particular design element can have individual attributes customized when it is used in a design.  This re-use pattern is not applied in the Storyboard content export, content will be exported as multiple distinct objects. The Storyboard resource clean-up tools can be used to re-consolidate visual assets that are the same if this is the intent.

Future Directions

In the time since the initial Sketch Storyboard Export plugin was created, the Sketch tool and the ecosystem itself has evolved.  While Sketch itself does not create specific interaction models, there are various plugins that can extend the graphic design functionality to include more live prototyping functionality, frequently targeted at an HTML audience.  Similarly conventions and best practices for Sketch users in the use and deployment of libraries has started to solidify.

The Storyboard development team is monitoring the Sketch ecosystem and working to build a smoother workflow for what we believe to be the high frequency use cases of embedded UI’s designed with Sketch.  Improving functionality such as text import and adding automated action workflows and a smoother re-integration workflow are high on our list of improvements for the Sketch Storyboard exporter. The team is also exploring alternative integration techniques to potentially leverage Sketch’s integrations to other interactive prototyping systems such as Zepplin or Craft/InVision.

Unlike Photoshop’s positioning as a prominent (near de-facto) graphic design tool, Sketch offers a niche set of functionality to Mac users with alternative cross platform prototyping graphic deisgn and prototyping tools such as Figma and Adobe XD readily available.   Customers using Sketch are encouraged to contact support@cranksoftware.com to discuss how they use Sketch in their specific team development scenarios to help contribute to Crank’s roadmap development.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

0 comments

Article is closed for comments.