JSONImageToDesign

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.