render-design-preview-with-mockup

This task prepares a preview for the specified artifact (design) using a mockup.

note

The rendering is performed based on the settings specified in this task. The rendering settings configured in the editor will be ignored.

Parameters

• mockupId (string): The ID of the mockup in Asset Storage.
• mockupFolder (string): The path to the mockup folder in Asset Storage (e.g., /Cards/Stack).
• mockupName (string): The name of the mockup file in Asset Storage within the specified folder (e.g., Card.psd).
• previewWidth (number): The width of the preview image in pixels.
• previewHeight (number): The height of the preview image in pixels.
• previewFormat (string): The output file format for the preview image, either Jpeg or Png.
• mockupTargetArtworkLayers (string[]): An array of smart-object names within the mockup where the artifact will be inserted. You may find this useful if mockup masks are treated as smart object layers.
• visualizePrintAreas (boolean): If true, indicates that design print area bounds should be visualized. The default value is true.

These parameters support argument interpolation following the common rules.

note

If only mockupFolder is specified (i.e., mockupId and mockupName are not set):

• Each single input artifact will be inserted into all mockups in the specified folder.
• Only one element from each collection of input artifacts will be inserted into all mockups in the specified folder.

Examples

Using a specific mockup by ID

{
    "description": "Prepare preview of design file with mockup",
    "name": "render-design-previews",
    "type": "render-design-preview-with-mockup",
    "inputArtifacts": [
        "design"
    ],
    "parameters": {
        "mockupId": "6565dac9c2807e72a406fb7a",
        "previewWidth": 500,
        "previewHeight": 500,
        "previewFormat": "Jpeg"
    },
    "outputArtifacts": [
        "preview"
    ]
}

Using a mockup folder with target layers

This is how to generate a preview when a custom field MockupFolderPath specifies a folder with mockups, and all of them contain a Design smart object.

{
    "description": "Prepare design preview with mockup folder",
    "name": "render-design-previews",
    "type": "render-design-preview-with-mockup",
    "inputArtifacts": [
        "design"
    ],
    "parameters": {
        "mockupFolder": "{{project.items.@.fields.MockupFolderPath}}",
        "mockupTargetArtworkLayers": [
            "Design"
        ],
        "previewWidth": 2048,
        "previewHeight": 2048,
        "previewFormat": "Png"
    },
    "outputArtifacts": [
        "preview*"
    ]
}