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 .
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 . Your application model is then created and opened in the Storyboard editor.
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 |
|
|
|
Sketch supports multiple levels 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 is maintained at the first level and any subsequent groups have their content merged together as multiple controls.
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.
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.