Images in Widgets

You can render Images as part of a widget using the <Image> component or by using the fill property on <Frame> and <Rectangle> elements.

Here is an example

Render images

const { widget } = figma
const { Image, Frame, AutoLayout } = widget

function ImageExamples() {
  return (
    <AutoLayout>
      <Image
        // Pass a data uri directly as the image
        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAECSURBVHgBpY87TwJBFIXPnVkhbqQQE7UQNWhrsdpLI40FsdSYGGNvbWFhZ2Jj+AWER0fFD6CAhhYCod8GGmCLJRAI2Rl22LDh1RBOc1/fzb0H2EK0WPSfzj+lxG3wMIpAOKpaZfpPpddgKxG510BllSsw6MGAEAYl0zWVMn+L8boEzOXD0oRwrI1vZF9ESRetWO94XMjEDwxb0xttTF6txyNbzbU5mHmWhhtiQ3aGSkQmTH129YJLunJjdQned9DshkbF8d7o4cRiOSB0475ld+JUnTM+/Pb1d0p8ck2eKXN49/OOFfkGOXfCLnjpdamNDfLhgfFdIyE+GOg3AJHHrpoC5YtKfAfixH0AAAAASUVORK5CYII="

        width={100}
        height={100}
      />
      <Frame
        fill={{
          type: 'image',
          src: figma.currentUser.photoUrl
        }}

        width={100}
        height={100}
      />
    </AutoLayout>
  )
}

widget.register(ImageExamples)