Search Docs
Loading...
Skip to content

To PNG

Export designs to PNG format with lossless quality and optional transparency support.

5 mins
estimated time
GitHub

PNG is a lossless image format that preserves image quality and supports transparency. It’s ideal for designs requiring pixel-perfect fidelity, logos, graphics with transparent backgrounds, and any content where quality cannot be compromised.

This guide covers how to export designs to PNG and configure export options using the Android Engine API.

Export to PNG#

Use engine.block.export(...) with MimeType.PNG to export a design block to PNG. The method returns a ByteBuffer containing the image data.

suspend fun exportSinglePage(
    engine: Engine,
    page: DesignBlock,
): ByteBuffer {
    val pngData = engine.block.export(
        block = page,
        mimeType = MimeType.PNG,
    )


    check(pngData.hasRemaining()) { "single page PNG export is empty" }
    return pngData
}

Export All Pages#

Export all pages in a scene using the batch export API. Pass the page list to engine.block.export(...), which returns one ByteBuffer for each page in the same order.

suspend fun exportAllPages(engine: Engine): List<ByteBuffer> {
    val pages = engine.scene.getPages()
    val pngFiles = engine.block.export(
        blocks = pages,
        mimeType = MimeType.PNG,
    )


    check(pngFiles.size == pages.size)
    pngFiles.forEachIndexed { index, pngData ->
        check(pngData.hasRemaining()) { "page ${index + 1} PNG export is empty" }
    }
    return pngFiles
}

The batch API reuses a single worker engine for all exports, making it more memory efficient than exporting pages individually.

Compression Level#

Control the file size versus export speed tradeoff using pngCompressionLevel in ExportOptions. Valid values are 0-9, where higher values produce smaller files but take longer to export. Since PNG is lossless, image quality remains unchanged.

suspend fun exportWithCompression(
    engine: Engine,
    page: DesignBlock,
): ByteBuffer {
    val options = ExportOptions(pngCompressionLevel = 9)
    val pngData = engine.block.export(
        block = page,
        mimeType = MimeType.PNG,
        options = options,
    )


    check(pngData.hasRemaining()) { "compressed PNG export is empty" }
    return pngData
}

The default compression level is 5, providing a good balance between file size and export speed.

Target Dimensions#

Resize the output by setting targetWidth and targetHeight. The block scales to fill the target dimensions while maintaining its aspect ratio.

suspend fun exportWithTargetDimensions(
    engine: Engine,
    page: DesignBlock,
): ByteBuffer {
    val options = ExportOptions(
        targetWidth = 1200F,
        targetHeight = 900F,
    )
    val pngData = engine.block.export(
        block = page,
        mimeType = MimeType.PNG,
        options = options,
    )


    check(pngData.hasRemaining()) { "target dimensions PNG export is empty" }
    return pngData
}

Set both values when you need predictable output dimensions. Leave both values null to use the block’s native size.

Text Overhang#

Decorative fonts sometimes have glyphs that extend beyond their frame. Set allowTextOverhang to true to prevent clipping these glyphs during export.

suspend fun exportWithTextOverhang(
    engine: Engine,
    page: DesignBlock,
): ByteBuffer {
    val options = ExportOptions(allowTextOverhang = true)
    val pngData = engine.block.export(
        block = page,
        mimeType = MimeType.PNG,
        options = options,
    )


    check(pngData.hasRemaining()) { "text overhang PNG export is empty" }
    return pngData
}

Troubleshooting#

IssueFix
Large PNG filesIncrease pngCompressionLevel toward 9 to reduce file size. Higher compression can take longer, but PNG quality remains lossless.
Wrong output dimensionsSet targetWidth and targetHeight together when you need predictable output dimensions. Leave both values null only when you want the block’s native size.
Decorative text appears clippedSet allowTextOverhang to true when fonts extend outside their text frame.

API Reference#

APIDescription
engine.block.export(block=_, mimeType=MimeType.PNG, options=_)Exports a single block to ByteBuffer with the specified options
engine.block.export(blocks=_, mimeType=MimeType.PNG, options=_)Exports multiple blocks, returning one ByteBuffer per block
engine.scene.getCurrentPage()Returns the current page block ID or null
engine.scene.getPages()Returns all page block IDs in the scene

Key Options#

OptionDescription
pngCompressionLevelControls PNG compression from 0 to 9
targetWidth and targetHeightResize the export when both dimensions are set
allowTextOverhangAllows glyphs to extend beyond text frames during export

Next Steps#