New Project from a Sketch File

The Sketch Import feature provides the ability to use Sketch files to create the foundation of a new Storyboard application. To use the import feature, select the Sketch Import wizard in the toolbar:

Select the Sketch file you want to import and optionally input a custom directory to hold image resources. Then click Next.

The next page is the content selection page, which lists all the Sketch artboards on all pages and allows you to select which artboards you want to include in the initial screen set.

When you have selected the relevant content, click Finish. Your application model is then created and opened in the Storyboard editor.

Sketch to Storyboard Model Alignment

The Sketch import feature has some limitations with respect to the alignment of the Sketch development model and the Storyboard application model. In general, the transformation is applied 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

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 is maintained at the first level and any subsequent groups have their content merged together as multiple controls.

note

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.

note

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.

note

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 that particular element can have individual attributes customized when it is used. This re-use pattern is not applied in the Storyboard content import, rather content is imported 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.