Introduction

Widgets are a new way to extend FigJam by defining custom, interactive on-canvas objects in JavaScript.

An example

Developers can define what a widget looks like using a component-based API similar to React. They can also have their widget run arbitrary code in response to various user interactions, such as click events. Widgets also have custom property menus similar to other FigJam objects.

Building widgets

Widgets are written in a declarative style similar to React components. If you have written React before you should feel right at home. A widget is just a “pure function” that returns what gets rendered inside of a node.

What we mean by a "pure function" is that the a widget should always render consistently to the same object given the same input state, regardless of the user or the environment. Additionally, rendering a widget should not mutate any external state or result in side-effects like changing the viewport or opening iframes.

Here’s an example of a simple widget that renders a single text node:

const { widget } = figma
const { Text } = widget

function SimpleWidget() {
  return <Text>Hello Widget</Text>
}

widget.register(SimpleWidget)

Passing in props

Additionally we can configure our Text element by passing it props!

// number values
<Text fontSize={20}>Hello Widget</Text>

// string values
<Text fontFamily="Inter">Hello Widget</Text>

// multiple props
<Text fontFamily={"Inter"} italic={true}>Hello Widget</Text>

// spreading props
const textProps = {
  fontSize: 20,
  fontFamily: 'Roboto'
}

<Text {...textProps}>Hello Widget</Text>
Prerequisites →