BlendMode enum now include a pass-through variant. Support for this variant is not new, but it was undocumented.]]>widget-api-standalone.d.ts, an experimental feature which allows for importing types explicitly.]]>WidgetPropertyMenuColorSelectorOption[]. This allows widget developers to use predefined color palettes in widget color property menusheight and width property now allow you to specify maximum and minimum heights and widths.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:
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:
]]>To try this out:
figma to the editorType array in your manifest.json file.usePropertyMenu: toggle and link
toggle lets you create a button in the property menu with an on and off statelink will let you create a button that opens a link in a new tabSpan 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>
positioning to support absolutely positioned AutoLayout children
'auto', which preserves the existing behavior of layout out the child using auto layout.AlignItems to accept a new baseline value.Bug fixes:
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.
<Line /> component with a strokeCap prop, for specifying the line endpoint decoration. This can be one of the following:
stroke with a strokeDashPattern prop. This will give components a dashed stroke with the dash/gap lengths passed in.showShadowBehindNode to the DropShadowEffect type, which controls whether drop shadows will be visible behind transparent layers.Bug fixes:
spread prop in ShadowEffect wasn't being mapped to the resulting shadow on the canvas.<Input /> component that lets users edit text directly in your widget.useStickable and useStickableHost to allow widgets to interact more seamlessly with other objects on the canvas.
<Image /> no longer require CORs headers, any image URL just works!jsxFragmentFactory.<Ellipse /> now supports an arcData prop to enable rendering donuts and half circles.<Line /> component for drawing basic lines inside a widget.<Frame /> children now support x/y constraints for absolute positioning within the frame.Bug fixes:
key prop in custom components no longer need to be declared.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.
Bug fixes:
stroke, strokeWidth and strokeAlign props exist on the Text component.Paint documentation page to add more examples of using GradientPaint.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.