Skip to main content
Genoni Studio
Genoni Studio
New Participant
Jan 6, 2022 7:47 PM UTC
Question

Convert base64 for use with rect.fills imageHash

In my code.ts I have a JPEG image that’s been converted to base64 and I am attempting to use it as the imageHash value but am getting Invalid SHA1 hash error.

const img = '/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAA...

const rect = figma.createRectangle();
rect.fills = [{ type: 'IMAGE', scaleMode: 'FIT', imageHash: img }];
figma.currentPage.appendChild(rect);

What conversion needs to happen to the base64 string in order to use it this way?

    This topic has been closed for replies.

    6 replies

    tank666
    tank666
    Jan 6, 2022 8:19 PM UTC

    The Plugin API says that images should be converted to Uint8Array.

    figma.com
    UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
    Genoni Studio
    Genoni StudioAuthor
    New Participant
    Jan 6, 2022 8:26 PM UTC

    Thank you. I realized I was trying to do the conversion inside code.ts but it needs to happen in ui.html. In ui.html I’m using a helper function to convert the base64 string.

      function _base64ToUint8Array(base64) {
    var binary_string = window.atob(base64);
    var len = binary_string.length;
    var bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
      bytes[i] = binary_string.charCodeAt(i);
    }
    return new Uint8Array(bytes.buffer);
  }
    Jeevan_D_Souza
    Apr 27, 2023 12:14 PM UTC

    hey you have any idea about this error “figma_app.min.js.br:5 unhandled promise rejection: Error: in set_fills: Expected “fills.[0].imageHash” to have type string but got undefined instead”
    im giving uint8array for imagehash

    tank666
    tank666
    Jul 31, 2023 5:03 PM UTC

    You should have passed a Uint8Array as an argument to the createImage method. This method will return an Image object in which you can get the value of the hash property and use this value to set the fill.

    UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
    tank666
    tank666
    Jul 31, 2023 5:09 PM UTC

    I want to note that in Figma there are methods for encoding/decoding Base64.

    figma.com
    UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
      Script_Junkie
      Script_Junkie
      Dec 24, 2024 11:58 AM UTC

      Hello,

      I’m currently developing a Figma plugin that converts Figma frames into HTML and CSS code. However, I’m facing challenges when it comes to generating responsive CSS for each node within the frames.

      I would love to know if anyone has experience or solutions for dynamically generating responsive CSS for individual Figma nodes, such as handling different screen sizes, layout adjustments, and element resizing/positioning based on Figma’s design constraints.

      Any tips, best practices, or resources would be greatly appreciated!

      Thank you in advance!

      Terms & ConditionsAccessibility statement