Sketch Art Production Guidelines

Welcome to the VectoUI Sketch art production guidelines! To turn your design file into a complete Unity UI with one click, follow these simple rules while creating your artwork. The core principle is: the way your hierarchy looks in Sketch is the way the nodes will look in Unity.

1. Basic guidelines

• Use a consistent artboard: Agree on one fixed Artboard size for the entire project, such as 1920x1080.
• Use English names: All layer, group, and slice names must use only English letters, numbers, and underscores (for example, icon_gold_big). Do not use Chinese characters or special symbols, to avoid compilation errors.
• Remove discarded work: Before exporting, delete redundant layers outside the artboard or hidden layers and keep the structure clean.

2. Groups and hierarchy (parent-child relationships)

• Group content appropriately: A "Group" or "Frame" in Sketch directly corresponds to a "parent GameObject node" in Unity. Place logically related elements, such as backgrounds, icons, and text, inside the same group.

3. Flatten complex elements

• Merge layers: If an icon is composed of multiple shape paths, shadows, and masks, and those details do not need to be preserved in the engine, convert them into a Symbol or merge them directly and export them as one complete slice.
• Be careful with blend modes: The engine's default UI material does not support advanced blend modes such as Overlay and Screen. Layers that use these effects must be merged and exported as a single image.

4. The Slice tool and transparent bounds (important ⚠️)

• Prevent unwanted cropping: When assets are exported by default, transparent pixels around the edges are usually cropped. This causes UI anchors and dimensions to become inconsistent in Unity.
• Correct approach: For elements with glow or shadow effects, or elements that need reserved transparent margins, use the Sketch Slice Tool to draw a fixed-size slice manually, and export or upload to Lanhu using that slice.

5. Fonts and text

• Map font names: The font names used in Sketch should match the font asset names used in the Unity client. VectoUI automatically replaces them with Unity Text or TextMeshPro components.
• Set text box bounds: Set multiline text to "Fixed Size" so the text box does not expand indefinitely with its content and cause layout overflow.

6. 9-slice assets

• Replace manually: Stretchable 9-slice elements such as popup backgrounds currently require manual parameter adjustment in Unity. When creating slices, retain clean corners or a sufficiently large solid-color transition area for stretching.