We updated the “New widget…” templates to use esbuild for bundling to make it easier for new widgets created to extend beyond a single source file.

To try this out:

1. Log in to your account and open the Figma desktop app
2. You can open any existing Figma / FigJam document or create a new one.
3. Go to Menu > Widgets > Development > New widget...

• You can now create widgets in Figma Design!
  • Start by adding figma to the editorType array in your manifest.json file.
• There are two new property menu options for usePropertyMenu: toggle and link
  • toggle lets you create a button in the property menu with an on and off state
  • link will let you create a button that opens a link in a new tab
• We've added a new Span component that lets you style inline ranges of text inside of a Text component.

<Text
  fill="#0F0"
  fontSize={20}
  fontFamily="Roboto"
  fontWeight={400}
  textCase="upper"
  textDecoration="underline"
>
  Hello{' '}
  <Span
    fontSize={50}
    fontFamily="Poppins"
    fontWeight={800}
    textCase="original"
    textDecoration="none"
  >
    World
    <Span fontSize={30} fill="#F00" italic>
      d
    </Span>
  </Span>
</Text>

• We added a new positioning to support absolutely positioned AutoLayout children
  • By default, positioning is set to 'auto', which preserves the existing behavior of layout out the child using auto layout.
• We've updated AlignItems to accept a new baseline value.

Bug fixes:

• Fixed a bug in undo/redo where multiple updates to synced state might clobber the values on the undo/redo stack.
• Removed flipVertical from our docs and types since it is not implemented.

Additionally, we updated the Plugin API with some improvements to WidgetNode. For more information see: Plugin API Version 1, Update 46.

• We've extended the <Line /> component with a strokeCap prop, for specifying the line endpoint decoration. This can be one of the following:
  • 'none'
  • 'round'
  • 'square'
  • 'arrow-lines'
  • 'arrow-equilateral'
• We've extended all components that support stroke with a strokeDashPattern prop. This will give components a dashed stroke with the dash/gap lengths passed in.
• We've added showShadowBehindNode to the DropShadowEffect type, which controls whether drop shadows will be visible behind transparent layers.

Bug fixes:

• Fixed a bug where the spread prop in ShadowEffect wasn't being mapped to the resulting shadow on the canvas.

• We’re introducing a new <Input /> component that lets users edit text directly in your widget.
• We’re introducing 2 new hooks useStickable and useStickableHost to allow widgets to interact more seamlessly with other objects on the canvas.
  • Stickable widgets stick to other objects on the canvas
  • Stickable Hosts allow other other stickable objects to be stuck on the widget (eg. Stamps)
• Widgets now support undo/redo functionality. For more details, see this guide.
• Image URLs passed to <Image /> no longer require CORs headers, any image URL just works!
• Widgets now support JSX fragments! You’ll need to update your tsconfig.json to specify the new jsxFragmentFactory.
• <Ellipse /> now supports an arcData prop to enable rendering donuts and half circles.
• We updated the visual appearance of a selected and hovered widget on the canvas
  • We now show the widget’s icon as well as a link for users to learn more about the widget when the widget is hovered.
• We added a <Line /> component for drawing basic lines inside a widget.
• <Frame /> children now support x/y constraints for absolute positioning within the frame.

Bug fixes:

• Types for the key prop in custom components no longer need to be declared.
• Lazy default state initializer is allowed to use the Plugin API. This is useful for initializing synced state values to things like figma.currentUser or figma.activeUsers.

Additionally, we updated the Plugin API with new methods for WidgetNode to read the information of nodes stuck to the widget, or the node the widget is stuck to (if applicable). We hope these methods complement the new “stickable” hooks above.

• We’re introducing 3 new property menu item types:

  itemType	description
  "separator"	A non-interactive element that can be used to organize different parts of the property menu.
  "color-selector"	A colorpicker menu item that allows users to select from a list of colors.
  "dropdown"	A dropdown menu item that allows users to pick from a list of string options.

• We now return the x and y coordinates of where a user clicked in the widget onClick handler. This is useful for knowing where exactly a user clicked on your widget.

• useSyncedState now supports lazy initial state and functional updates. This is equivalent to how setState behaves in React.

• fill and stroke props now support lists of Paints.

Bug fixes:

• Our docs and typings now correctly show that stroke, strokeWidth and strokeAlign props exist on the Text component.
• We improved the Paint documentation page to add more examples of using GradientPaint.
• Fixed a bug where certain fontWeight don't work for certain fontFamily.

Additionally, we updated the Plugin API with some improvements to WidgetNode. For more information see: Plugin API Version 1, Update 39.