JSONImageToDesign

About this plugin

Your JSON file must include two types of blocks:

•Text Blocks → Define textual elements (headline, subheadline, points, etc.)

•Image Blocks → Define image placeholders (main image, background image, icons, etc.)

⚠️ Important: Every key in the JSON structure is required. Missing keys will cause the design to fail.

✍️ Text JSON Block Example:

{

"type": "Headline", // The role of the text (Headline, Subheadline, Point, etc.)

"size": "1080x1080", // Canvas size (width x height)

"category": "text", // Always "text" for text blocks

"layer": "Headline", // Layer name (helps in identifying/replacing text later)

"content": "Fresh Organic Salads", // Actual text content

"fontSize": 48, // Font size in px

"x": 100, // X-position (from left edge of canvas)

"y": 60, // Y-position (from top edge of canvas)

"width": 880, // Width of the text bounding box

"height": 140, // Height of the text bounding box

"alignment": "center" // Text alignment (left, center, right)

}

🔎 Explanation of Keys

•type → Defines text purpose (e.g., Headline, Subheadline).

•size → Canvas size where this element belongs.

•category → Must be "text".

•layer → Identifies the layer name for replacement.

•content → The actual string of text.

•fontSize → Controls text size.

•x, y → Coordinates for placement.

•width, height → Bounding box dimensions for text.

•alignment → How text aligns within its box.

🖼️ Image JSON Block Example:

{

"type": "MainImage", // Role of the image (MainImage, Background, Icon, etc.)

"size": "1080x1080", // Canvas size (width x height)

"category": "image", // Always "image" for image blocks

"layer": "MainImage", // Layer name for this image

"x": 100, // X-position (from left edge of canvas)

"y": 500, // Y-position (from top edge of canvas)

"width": 880, // Image width

"height": 800 // Image height

}

🔎 Explanation of Keys

•type → Defines image role (e.g., MainImage, Background, Icon).

•size → Canvas size.

•category → Must be "image".

•layer → Identifies the image layer for replacement.

•x, y → Placement coordinates.

•width, height → Dimensions of the image box.

✅ Summary

•Always include both Text and Image blocks in the JSON if your design has both.

•No key can be missing — every property is required for correct rendering.

•Consistency matters: The layer and type values should match your design template for replacements to work correctly.