Zion Converter

About this plugin

Button (button)

Rule: Name a FRAME as button-xxx.

Functionality: It will automatically find a TEXT layer inside for its title and a VECTOR layer for its backgroundImage. It is treated as an atomic component.

Input (input)

Rule: Name a FRAME as input-xxx.

Functionality: It will automatically find a TEXT layer named placeholder inside to use as its placeholder text.

Image (image)

Rule (Automatic):Any shape (like a Rectangle) with an Image Fill. Any VECTOR, STAR, POLYGON etc. Any FRAME or GROUP that only contains vector-like children and is reasonably small (e.g., less than 200x200 pixels) will be treated as a single icon.

Functionality: Bitmaps (JPG/PNG): Will be converted into a Base64 data string. Vectors & Icons: Will be exported as an optimized SVG data URI.

Line (horizontal-line)

Rule: Any native LINE node, or any RECTANGLE/VECTOR that is very thin (height or width ≤ 2px).

Functionality: Its color and thickness will be derived from the stroke properties.

List (custom-list)

Rule (Automatic): The plugin will intelligently detect any FRAME that uses Auto Layout and contains 3 or more instances of the same Main Component. However，name FRAME as list-xxx can also make it.

Functionality: The parent FRAME becomes a custom-list, and only the first instance is converted (as a blank-container) to serve as the list item template. All other instances are ignored.

Conditional (conditional container)

Rule: Name a FRAME as conditional-xxx.

Functionality: The parent FRAME becomes a case.