Skip to main content

Image

This object is handle to an image stored in Figma.

A common misconception is that Figma has image layers. What we have instead is image fills ImagePaint. In fact, dragging an image into Figma creates a rectangle with an image fill. This allows assigning images as strokes too, but it means that creating an image on the canvas requires creating a rectangle (or other shape), following by adding an image fill to it.

New images can be created via figma.createImage from a Uint8Array containing the bytes of the image file. Existing images can be read via figma.getImageByHash.

Figma supports PNG, JPEG, and GIF. Images can be up to 4096 pixels (4K) in width and height.

See this example of working with images.

Image

hash: string [readonly]

A unique hash of the contents of the image file.


getBytesAsync(): Promise<Uint8Array>

The contents of the corresponding image file. This returns a promise because the image may still need to be downloaded (images in Figma are loaded separately from the rest of the document).


getSizeAsync(): Promise<{ width: number; height: number }>

The width and height of the image in pixels. This returns a promise because the image may still need to be downloaded (images in Figma are loaded separately from the rest of the document).


On this page