Flatten Selection to Bitmap: Image is too large

[davo]

Figma won't raster when the scale multiplier results in widths / heights over 4096.2.

Flatten @ 3x with a frame @ 1365x1365

Flatten @ 3x with a frame @ 1366x1366

[davo]

Hey @yuanqing will it help to talk about some potential solutions for this bug? I want to take a stab at the issue but I'd like your opinion about which direction seems more feasible.

First, from what I gather Figma states the limits of the createImage method regarding image max size. They are following a common best practice for universal supported limits, in which textures using texImage2D should not go over 4096. Source: MDN WebGL best practices.

Here are some potential scenarios:

• [ ] So, in this scenario we are using the Bitmap resolution settings and the dimensions of the selected node. It might possible to calculate the final scaled-up size of the image. So, if the number goes over 4096, this might be resolved by:

  • A. Fixing the broken promise: An additional condition is set right before the selection check, so the promise will not try to execute createImageFromGroupAsync. If the condition is faulty, it sends an error message: Cannot raster selection at ${settings.resolution}. Scaled size ${estimatedSize.width, estimatedSize.height}, exceeds limit.

  • B. Trying to run createImageFromGroupAsync at a smaller scale: An additional condition is set right before the selection check, but in this case the plugin will recalculate if overriding the resolution from the settings to a lesser scale will exceed the limit of 4096. If not, it will continue the promise and flag that the resolution was changed. The success message could indicate: Flattened at ${resolution}x to avoid the canvas limit.

• [ ] Ok, here is a more complex scenario, this one will require more work. After exploring the GET image endpoint and testing it with a nodes with sizes 1024 and 2048 and scaling from 1 to 4, I can confirm that the API allows to scale beyond this limit. This offers great possibilities with more complexity, of course. The response time of rastering from the API will increase proportionally as the dimensions and scales go up. Questions from this scenario:

  • Could it be possible to raster a node with the API, and right after insert that blob back to the canvas using the methods you created on Insert Big Image?
  • Will this require users adding their own personal tokens for the plugin to fetch images? Personally, I wouldn't mind.

Here are are the rasters from the the GET image endpoint.

File / Scale	2x	3x	4x
1024
2048

Figma API Docs for reference:

PNG downloaded from the Endpoint

[yuanqing]

@davo

raster a node with the API, and right after insert that blob back to the canvas using the methods you created on Insert Big Image

Thanks for the detailed write-up! I quickly looked into this today and it turned out to be a small change because most of the implementation is already done in Insert Big Image – d474401

[yuanqing]

Just published a new version of the plugin to Figma. It’ll take some time to run if you have a large selection or when flattening at a high resolution

[davo]

Thanks @yuanqing! I'm glad it the write-up helped in any way.

Amazed by the PR with 63 additions and 69 deletions, and the fact that you are achieving this level of reusability between your own work 👏🏼