New:

• Type definitions now ship with docstrings, so you can view Widget API documentation alongside your code in IDEs such as VSCode.

The type definitions for the BlendMode enum now include a pass-through variant. Support for this variant is not new, but it was undocumented.

In February 2024, Figma implemented dynamic page loading for Figma design files. Now, dynamic page loading has been extended to FigJam files. If your widget handles FigJam files, you should follow the steps in Migrating Plugins to Dynamically Load Pages. The same steps and considerations apply to widgets.

This change introduces widget-api-standalone.d.ts, an experimental feature which allows for importing types explicitly.

Version 1.9.1 was published to NPM, but does not contain any changes relative to 1.9.0.

• Add a property colorMapToOptions, which takes in a ColorPalette and returns a WidgetPropertyMenuColorSelectorOption[]. This allows widget developers to use predefined color palettes in widget color property menus
• Add support for localhost in the manifest networkAccess allowedDomains field. See manifest networkAccess docs.

This update exposes some new features introduced in AutoLayout v5.

• All components that have a height and width property now allow you to specify maximum and minimum heights and widths.
• The AutoLayout component has a couple of property changes:
  • The spacing property now accepts a LayoutGap object, which allows you to specify a horizontal or vertical gap.
  • A new wrap property allows you to enable wrapping.
• The Text component has a new truncate property for controlling text truncation behavior.

This update introduces the optional networkAccess key to the widget manifest.

Add the networkAccess to your widget's manifest.json file to limit the domains that your widget is permitted to access. When networkAccess is applied, if your widget makes a network request to a domain that is not specified in the list of permitted domains, that request is blocked.

For example:

{
  "name": "MyWidget",
  "id": "737805260747778093",
  "api": "1.0.0",
  "widgetApi": "1.0.0",
  "editorType": ["figma", "figjam"],
  "containsWidget": true,
  "main": "code.js",
  "ui": "ui.html",
  "networkAccess": {
    "allowedDomains": ["https://my-app.cdn.com", "wss://socket.io", "*.example.com", "example.com/api/",  "exact-path.com/content"]
  }
}

When you publish your widget, the list of domains that you specify for networkAccess is displayed on your widget's Community page. This information is also visible for org admins when widgets are reviewed for approval.

To try this out:

1. In the manifest.json file for your widget, add the following:

   "networkAccess": {
     "allowedDomains": ["none"]
   }
   

none is a special keyword for allowedDomains that prevents any network access from your widget. 2. In Figma, create a new Figma or FigJam file and add your widget. Try to use the widget as normal. 3. Check the developer console. If your widget makes network requests, such as calls to an API or fetching images, Figma blocks the requests and throws content-security policy (CSP) errors. 4. To fix the CSP errors, in your widget manifest, replace ["none"] with the domains that your widget needs to access.

For more information about network access, see:

• How Widgets Run
• Making Network Requests
• Widget Manifest

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>