Prerequisites

Our Widget API is designed to be written in JSX and TypeScript and leverage our existing plugin API extensively. Both JSX and TypeScript need to be compiled down into JavaScript prior to being run in the Widget Sandbox (in the browser).

JSX

If you are used to writing HTML, you might find writing JSX familiar. JSX allows us to express the desired widget object using a declarative syntax that looks like the following snippet

code.tsx
const { widget } = figma
const { AutoLayout, Text } = widget

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

widget.register(JSXSample)

Under-the-hood, the <Text>Hello Widget</Text> line above gets converted into the following JavaScript code:

code.js
figma.widget.h(Text, null, "Hello Widget")

figma.widget.h comes from how we've configured tsconfig.json (if this was React, it would be React.createElement).

Additionally, with JSX we can specify attributes on each element (known as props). When passed props, the conversion looks something like this:

Passing in props
// code.tsx
<Text fontSize={20}>Hello Widget</Text>

// code.js
figma.widget.h(Text, { fontSize: 20 }, "Hello Widget")

TypeScript

TypeScript is an extension of the JavaScript that allows you to add type annotations to your code. These don't change how your code runs, they are just notes for yourself and for the compiler.

When pair with an editor like Visual Studio code, these annotations are able to provide helpful hints during development:

JSX​

TypeScript​

Further Reading​

JSX

TypeScript

Further Reading