Best practices to create a Sketch design for export to wires
When creating a Sketch design for export to wires, take into account the following best practices.
Pagers
By default, when a Sketch file is exported for use in a wire, a pager is created to house each of the artboards used in Sketch as a screen. If a series of design assets is to be used as <pager> tags in wires, group them together in a folder named Pager in Sketch.
-
To ensure that the screens appear in the correct order in the wire pager, arrange the artboards in top-to-bottom order in Sketch before export.
-
When a pager is used within a screen to display app data in a wire, arrange each row of data in bottom-to-top order in Sketch before export.
To specify that a Sketch object is converted to a <pager> in wire, Edit wire export properties.
Classes
For best results, organize the layers of a Sketch design into a class, which create object tags to reference the layers. For steps to convert Sketch elements to a class for wires, refer to Organize a Sketch design into a class for wire.
Styles
Any design elements defined as styles in Sketch will be available as a reusable style in the wire code. The text elements that use styles appear as purple "Aa" icons in the list.
For font sizes and text styles, assign a style to all text elements on the Sketch canvas, as the display in Sketch and wire is not identical. It is not necessary to create a style for each text element. You can create styles for each category, or level of text in the hierarchy, and assign them to all applicable text elements. The styles created in Sketch translate to <style> tags in the wire.
Symbols, images, and shapes
-
In Sketch, you can create symbols and easily paste, or insert, anywhere within the same artboard, or across multiple artboards. This feature can be used to export a symbol as a class or image into a wire.
-
You must "slice" design elements such as circles, rectangles, irregular shapes, and images to make them exportable to a wire. To do this, select the element in the respective artboard and select the + on the Make Exportable tab at the bottom right of the screen. Do this multiple times if you are designing for Retina displays or higher. Another entry appears with the suffix "@2x", "@3X", etc. for each time the + is selected. The Sketch Plugin exports these images with the Project file, which the app developer uploads to the Mobile Enterprise Platform repository with the name provided to the element in Sketch.
-
Sketch Plugin does not support the exporting of round shapes. If your design has circle shapes, change each to a square shape and adjust the corner radii to match the width and height of the square. If this is not done, exported circle designs will appear as squares in the published wire.
-
When using image masks, crop the image to the exact dimensions of the underlying mask to prevent it from extending beyond the measure of the screen.
Artboards and layers
-
Sketch Plugin only exports artboards. If you have multiple modals on a single screen, create a separate artboard that contains only the modal to be exported to wires.
-
Layer visibility must be taken into account. Any layer not made visible in Sketch will not export to wires, and the layer will not be available in the wire code. All UI elements must be visible.
Element ID and naming conventions
When you bring elements onto the canvas in Sketch, an ID is assigned to the element. Since every element ID transfers, it is highly recommended that you rename the element ID to be relevant to the structure of the wire code. For example, if you have a blue rectangle as the background of the app, its default ID is Rectangle1.
For successful export from Sketch, the element ID must not contain spaces. For more information, refer to Remove spaces from a Sketch design file before export.
Organize a Sketch design into a class for wire
This process adds "class" to the front of the folder name in Sketch, and results in a reusable wire class that contains all of the elements in the folder from the Sketch design.
To create a class for wire from the Sketch design, complete the following steps in Sketch.
-
From a Sketch design, select the folder that you want to be a class.
-
Select Plugins > Export to Wire.
-
Select Toggle Class.
Result: The layers of the Sketch design are organized into a class and object tags are created to reference the layers.
Remove spaces from a Sketch design file before export
For successful export from Sketch, the element IDs must not contain spaces. Use this option to remove any spaces from the file.
To remove spaces from the file before exporting it for wire, complete the following steps in Sketch.
-
From a Sketch design, select Plugins > Export to Wire.
-
Select Fix Panel wire names.
Result: Spaces are removed from the file to make it ready for export to wire.
Edit wire export properties
Edit wire properties to create an object alias and set geometry for percentages or pixels.
To edit wire properties, complete the following steps in Sketch.
-
From a Sketch design, select Plugins > Export to Wire.
-
Select Edit Wire Properties.Step Information
-
For Object Alias, enter a name for the object.
-
For Geometry, select one of the following options.
-
Pixels
-
Percentages
-
Width as Pixels: If selected, the xpos and ypos will be in percentages, but the width will be in pixels.
-
Height as Pixels: If selected, the xpos and ypos will be in percentages, but the height will be in pixels
-
-
Enable the Treat object as a <pager> tag box to treat the object as a pager in the Wire. This makes the parent folder a scrollable area.
-
For Orientation, select Vertical or Horizontal scrolling.
-
For Paginate, select Yes for a smooth scroll, or No to snap to pages.
-
Select OK to save the changes to the properties.
Loading...
There was a problem loading this topic