Skip to main content
Question

HTML to image conversion

  • May 2, 2025
  • 1 reply
  • 272 views
For Now Marketing

Hi all,

 

I am building a plugin and having trouble rendering an HTML.

Currently, I am trying to take a string html, render it to an image and take a screenshot of that image to display on Figma. I’ve tried it with a screenshot, base64, uint8array, but have found no success so far.

My current process looks like this:

  1. Input: HTML string
  2. Server-side Processing:
    1. The HTML string is sent to server endpoint
    2. The HTML is rendered using puppeteer
    3. The screenshot is converted to either base64 string, png, or uint8array (Tried all three)
  3. The the image data is received in Figma
    1. A new image is created in Figma using figma.createImageAsync()

 

I am getting errors on step 2, and the error seems to be that puppeteer is not working properly in Figma plugin’s sandboxed environment.

 

Has anyone had any luck generating screenshots from raw HTML string?

 

Thank you!

    This topic has been closed for replies.

    1 reply

    Sarawilson2
    • Sarawilson2
    • New Member
    • May 3, 2025

    You're tackling a fairly complex challenge—rendering HTML to an image for Figma plugin use can be tricky due to environment limitations like sandboxing. Puppeteer, while powerful, isn't designed to work inside a Figma plugin's isolated environment, which is likely causing the issues you’re seeing in Step 2.

    Alternative Suggestions:

    1. Move Rendering Fully Server-Side: Ensure the Puppeteer process is fully isolated from the Figma environment. Your plugin should only send the HTML string to your server, let Puppeteer do the rendering and screenshot generation, and then return a processed image (preferably in base64) ready for use with figma.createImageAsync().

    2. Use Prebuilt Rendering APIs: If setting up and maintaining Puppeteer becomes too heavy, consider using external services or APIs like:

      • htmlcsstoimage.com

      • screenshotapi.net

      These can convert HTML/CSS to images and return them in base64 or binary format.

    3. Security and Size Considerations: Ensure the HTML input doesn’t include scripts that could break your renderer. Also, keep an eye on image size—Figma has limits on what can be rendered and uploaded.

    If you’re venturing into more intelligent automation—such as dynamically generating HTML content or optimizing your rendering logic with predictive behavior—you might consider collaborating with an ai programmer to bring machine learning into your pipeline. This could be especially useful for templating or smart image generation.

    Let me know if you’d like a basic working example using one of the third-party APIs above!

    Terms & ConditionsAccessibility statement