Cloud Inventory® Documentation

About Sketch Plugin

Sketch Plugin maps designs created in Sketch to wires within Mobile Enterprise Platform, speeding the process to create user interfaces for apps.

Sketch is a professional digital design tool for Mac that accommodates rapid app design and prototyping. If app designers use Sketch as part of their design process, they can install Sketch Plugin on their Macs and export designs to files that can be used in Mobile Enterprise Platform.

In Mobile Enterprise Platform, a Sketch design becomes one or more wires that an app developer connects to an app's back-end business logic and implements as a user interface for the app.

The full process is outlined in the Use a Sketch design in DSI Platform Manager topic.

The plugin interface

After Sketch Plugin is installed, you access its interface in Sketch through the Sketch Plugin menu. In the menu, Advanced Inventory Sketch Plugin displays as Export to Wire. It provides multiple options to prepare a Sketch design for export to wires, and to complete the export. For a description of each option, refer to Sketch Plugin options.

Example of Sketch to wire

When a Sketch design is exported to a wire, nested groups in Sketch become nested panels in the wire that match the layer hierarchy.

A design in Sketch

The resulting wire

<panel name="grid" xpos="19.467%" ypos="8.696%" width="39.200%" height="22.339">
	<panel name="row2" xpos="0.000%" ypos="56.376" width="100.000%" height="43.624%">
		<panel name="column-2" xpos="0.000%" ypos="0.000%" width=44.218%" height="100.000%" background="#d11919" borderwidth="1" bordercolor="#969696" />
		<panel name="column-1" xpos="55.782%" ypos="0.000%" width="44.218%" height="100.000%" background="#d11919" borderwidth="1" bordercolor="#969696" />
	</panel>
	<panel name="row1" xpos="0.000%" ypos="0.000%" width="100.000%" height="43.624%">
		<panel name="colum-2" xpos="0.000%" ypos="0.000%" width="44.218%" height="100.000%" background="#d11919" borderwidth="1" bordercolor="#969696" />
		<panel name="column-1" xpos="55.782%" ypos="0.000%" width="4.218%" height="100.000%" background="#d11919" borderwidth="1" bordercolor="#969696" />
	</panel>
</panel>

About using a Sketch designed wire in an app

After a Sketch design is imported into Mobile Enterprise Platform as a wire, an app developer can use it to build a user interface for an app under development in Mobile Enterprise Platform.

The imported design functions in Mobile Enterprise Platform as a wire, where an app developer can add it to an app's business logic and then design, publish, and test the app with the new wire design. For steps, refer to Mobile Enterprise Platform documentation.

Also keep in mind the following additional considerations.

The testing of a wire imported from Sketch may require multiple exports from Sketch and imports into Mobile Enterprise Platform. You must delete the wire file (with the name provided when exported from Sketch) in the Wires section of Application Studio. The project can then be deleted in the Projects section, and the Sketch design can be re-exported from Sketch, and imported into Mobile Enterprise Platform.
If text does not appear on the screen while testing a wire, verify that the name in the <text> tag is the same as the name in the <style> tag.
If images are stretched out in a wire, verify that only height or width are defined. This scales the image to the correct size.

Install Sketch Plugin

Sketch Plugin allows you to easily export Sketch designs to wires in Mobile Enterprise Platform. These wires, using the designs, can become the user interface of an app.

Prerequisite: The Sketch design tool must already be installed on the Mac computer.

To install the Sketch Plugin, complete the following steps.

Download the SketchWirePlugin-1.2.zip file.
Double-click the ZIP file to open it.
Double-click the ExportToWire.sketchplugin executable file.

Result: The plugin is installed to Sketch. In Sketch, the plugin displays in the Sketch Plugins menu as Export to Wire.

Sketch Plugin options

Sketch Plugin offers multiple options to prepare and export a Sketch design for use as wires in Mobile Enterprise Platform.

Fix wire panel names

For successful export from Sketch, the element IDs must not contain spaces. Use this option to remove any spaces from the file. For steps, refer to Remove spaces from a Sketch design file before export.

Export to wire

This option will export the file as a code only .wire file. This file can be opened in a code editor for checking and testing the code, or to copy the code to paste it into a Wire. This file cannot be imported into Mobile Enterprise Platform Wires. For steps, refer to Export a Sketch design file for testing or copying.

Export to DSI Platform project

This option allows for exporting either a project that bundles the code and assets, such as images, into a .zip file, or a basic wire file without assets. The project or wire file can be uploaded for use in Mobile Enterprise Platform. For steps, refer to Export a Sketch design for use in wires.

Toggle class

This option creates a class and puts all construct code into the class so it can be called in the wire. This organizes the layers of the sketch into a class, and uses object tags to reference the layers. For steps, refer to Organize a Sketch design into a class for wire.

Edit wire properties

This option allows for creating an object alias and setting geometry for percentages or pixels. It is generally a best practice to use percentages for best display on a device. This makes the layer object a pager that will be scrollable. Enable the box for Treat object as a <pager> tag to treat the object as a pager in the wire. For steps, refer to Edit wire export properties.

Use a Sketch design in DSI Platform Manager

These steps outline the process to use a Sketch design as the user interface in an app developed in Mobile Enterprise Platform. Through the Advanced Inventory Sketch Plugin, the Sketch design is converted to one or more wires for use in Mobile Enterprise Platform.

Prerequisite: Install Sketch Plugin on a Mac that already has Sketch installed.

To incorporate a Sketch design into an app that is under development in Advanced Inventory Platform Manager, complete the following steps.

In Sketch, a designer follows the Best practices to create a Sketch design for export to wires.
In Sketch, a designer uses Sketch Plugin to export the design.
In Advanced Inventory Platform Manager, an app developer imports the design.
In Advanced Inventory Platform Manager, an app developer adds the wire to an app's business logic and then designs, publishes, and tests the app with the new wire design.