# Table of Contents - [Developer Docs](#developer-docs) - [Updates | Developer Docs](#updates-developer-docs) - [Compare the Figma APIs | Developer Docs](#compare-the-figma-apis-developer-docs) - [Updates | Developer Docs](#updates-developer-docs) - [Archive | Developer Docs](#archive-developer-docs) - [Updates | Developer Docs](#updates-developer-docs) - [Updates | Developer Docs](#updates-developer-docs) - [Updates | Developer Docs](#updates-developer-docs) - [Updates | Developer Docs](#updates-developer-docs) - [Updates | Developer Docs](#updates-developer-docs) - [Archive | Developer Docs](#archive-developer-docs) - [Updates | Developer Docs](#updates-developer-docs) - [Updates | Developer Docs](#updates-developer-docs) - [Updates | Developer Docs](#updates-developer-docs) - [Updates | Developer Docs](#updates-developer-docs) - [Updates | Developer Docs](#updates-developer-docs) - [Updates | Developer Docs](#updates-developer-docs) - [Updates | Developer Docs](#updates-developer-docs) - [Updates | Developer Docs](#updates-developer-docs) - [Search the documentation | Developer Docs](#search-the-documentation-developer-docs) - [Configuring your project | Developer Docs](#configuring-your-project-developer-docs) - [Connect to your GitHub repository | Developer Docs](#connect-to-your-github-repository-developer-docs) - [Continuous Integration | Developer Docs](#continuous-integration-developer-docs) - [GitHub App Permissions Overview | Developer Docs](#github-app-permissions-overview-developer-docs) - [CSS Variables and Theming | Developer Docs](#css-variables-and-theming-developer-docs) - [Debugging | Developer Docs](#debugging-developer-docs) - [Editing Properties | Developer Docs](#editing-properties-developer-docs) - [Figma Components | Developer Docs](#figma-components-developer-docs) - [Frozen Plugins | Developer Docs](#frozen-plugins-developer-docs) - [Get Help | Developer Docs](#get-help-developer-docs) - [How Plugins Run | Developer Docs](#how-plugins-run-developer-docs) - [Making Network Requests | Developer Docs](#making-network-requests-developer-docs) - [Libraries and Bundling | Developer Docs](#libraries-and-bundling-developer-docs) - [Plugin Manifest | Developer Docs](#plugin-manifest-developer-docs) - [OAuth with Plugins | Developer Docs](#oauth-with-plugins-developer-docs) - [Accepting Parameters as Input | Developer Docs](#accepting-parameters-as-input-developer-docs) - [Prerequisites | Developer Docs](#prerequisites-developer-docs) - [Migrating Plugins to Dynamically Load Pages | Developer Docs](#migrating-plugins-to-dynamically-load-pages-developer-docs) - [Plugin Quickstart Guide | Developer Docs](#plugin-quickstart-guide-developer-docs) - [Proposed API | Developer Docs](#proposed-api-developer-docs) - [Publishing | Developer Docs](#publishing-developer-docs) - [Requiring Payment | Developer Docs](#requiring-payment-developer-docs) - [Resource Links | Developer Docs](#resource-links-developer-docs) - [Samples | Developer Docs](#samples-developer-docs) - [Setting Editor Type | Developer Docs](#setting-editor-type-developer-docs) - [Stability and Updates | Developer Docs](#stability-and-updates-developer-docs) - [Text Review Plugins | Developer Docs](#text-review-plugins-developer-docs) - [TypeScript | Developer Docs](#typescript-developer-docs) - [Working in FigJam | Developer Docs](#working-in-figjam-developer-docs) - [Working in Slides | Developer Docs](#working-in-slides-developer-docs) - [Working in Dev Mode | Developer Docs](#working-in-dev-mode-developer-docs) - [Working with Rich Text | Developer Docs](#working-with-rich-text-developer-docs) - [Working with Images | Developer Docs](#working-with-images-developer-docs) - [Working with Text | Developer Docs](#working-with-text-developer-docs) - [Payments | Developer Docs](#payments-developer-docs) - [Working with Variables | Developer Docs](#working-with-variables-developer-docs) - [Global properties | Developer Docs](#global-properties-developer-docs) - [Introduction | Developer Docs](#introduction-developer-docs) - [Action types | Developer Docs](#action-types-developer-docs) - [waitForTask | Developer Docs](#waitfortask-developer-docs) - [Authentication | Developer Docs](#authentication-developer-docs) - [Scopes | Developer Docs](#scopes-developer-docs) - [Rate Limits | Developer Docs](#rate-limits-developer-docs) - [Comments | Developer Docs](#comments-developer-docs) - [Users | Developer Docs](#users-developer-docs) - [Version history | Developer Docs](#version-history-developer-docs) - [Projects | Developer Docs](#projects-developer-docs) - [Activity Logs | Developer Docs](#activity-logs-developer-docs) - [Webhooks V2 | Developer Docs](#webhooks-v2-developer-docs) - [Library Analytics | Developer Docs](#library-analytics-developer-docs) - [Components and styles | Developer Docs](#components-and-styles-developer-docs) - [Dev Resources | Developer Docs](#dev-resources-developer-docs) - [Types | Developer Docs](#types-developer-docs) - [register | Developer Docs](#register-developer-docs) - [figma.widget | Developer Docs](#figma-widget-developer-docs) - [useSyncedMap | Developer Docs](#usesyncedmap-developer-docs) - [useWidgetId | Developer Docs](#usewidgetid-developer-docs) - [usePropertyMenu | Developer Docs](#usepropertymenu-developer-docs) - [Variables | Developer Docs](#variables-developer-docs) - [colorMapToOptions | Developer Docs](#colormaptooptions-developer-docs) - [useSyncedState | Developer Docs](#usesyncedstate-developer-docs) - [Errors | Developer Docs](#errors-developer-docs) - [useStickableHost | Developer Docs](#usestickablehost-developer-docs) - [Endpoints | Developer Docs](#endpoints-developer-docs) - [Endpoints | Developer Docs](#endpoints-developer-docs) - [Property types | Developer Docs](#property-types-developer-docs) - [Node types | Developer Docs](#node-types-developer-docs) - [useStickable | Developer Docs](#usestickable-developer-docs) - [Discovery | Developer Docs](#discovery-developer-docs) - [Endpoints | Developer Docs](#endpoints-developer-docs) - [Endpoints | Developer Docs](#endpoints-developer-docs) - [Events | Developer Docs](#events-developer-docs) - [Endpoints | Developer Docs](#endpoints-developer-docs) - [useEffect | Developer Docs](#useeffect-developer-docs) - [Entity types | Developer Docs](#entity-types-developer-docs) - [Endpoints | Developer Docs](#endpoints-developer-docs) - [SCIM API Reference | Developer Docs](#scim-api-reference-developer-docs) - [Changelog | Developer Docs](#changelog-developer-docs) - [API Reference | Developer Docs](#api-reference-developer-docs) - [ | Developer Docs](#-autolayout-developer-docs) - [AlignItems | Developer Docs](#alignitems-developer-docs) - [Re-publish OAuth Apps | Developer Docs](#re-publish-oauth-apps-developer-docs) - [Updates to Figma's Developer Platform | Developer Docs](#updates-to-figma-s-developer-platform-developer-docs) - [Property types | Developer Docs](#property-types-developer-docs) - [Endpoints | Developer Docs](#endpoints-developer-docs) - [Security | Developer Docs](#security-developer-docs) - [Types | Developer Docs](#types-developer-docs) - [Events | Developer Docs](#events-developer-docs) - [Endpoints | Developer Docs](#endpoints-developer-docs) - [Endpoints | Developer Docs](#endpoints-developer-docs) - [The Typings File | Developer Docs](#the-typings-file-developer-docs) - [Widget Manifest | Developer Docs](#widget-manifest-developer-docs) - [ | Developer Docs](#-image-developer-docs) - [ | Developer Docs](#-ellipse-developer-docs) - [ | Developer Docs](#-svg-developer-docs) - [ | Developer Docs](#-line-developer-docs) - [ | Developer Docs](#-input-developer-docs) - [ | Developer Docs](#-span-developer-docs) - [ | Developer Docs](#-frame-developer-docs) - [ | Developer Docs](#-text-developer-docs) - [ | Developer Docs](#-rectangle-developer-docs) - [Endpoints | Developer Docs](#endpoints-developer-docs) - [ | Developer Docs](#-fragment-developer-docs) - [Endpoints | Developer Docs](#endpoints-developer-docs) - [Types | Developer Docs](#types-developer-docs) - [Widget State | Developer Docs](#widget-state-developer-docs) - [Examples | Developer Docs](#examples-developer-docs) - [JSON file schema | Developer Docs](#json-file-schema-developer-docs) - [Types | Developer Docs](#types-developer-docs) - [Supported Schemas | Developer Docs](#supported-schemas-developer-docs) - [Text types | Developer Docs](#text-types-developer-docs) - [Endpoints | Developer Docs](#endpoints-developer-docs) - [Endpoints | Developer Docs](#endpoints-developer-docs) - [CornerRadius | Developer Docs](#cornerradius-developer-docs) - [How Widgets Run | Developer Docs](#how-widgets-run-developer-docs) - [FontWeight | Developer Docs](#fontweight-developer-docs) - [StrokeCap | Developer Docs](#strokecap-developer-docs) - [ImagePaint | Developer Docs](#imagepaint-developer-docs) - [TextEditEvent | Developer Docs](#texteditevent-developer-docs) - [Effect | Developer Docs](#effect-developer-docs) - [Paint | Developer Docs](#paint-developer-docs) - [Transform | Developer Docs](#transform-developer-docs) - [Constraint | Developer Docs](#constraint-developer-docs) - [Padding | Developer Docs](#padding-developer-docs) - [StrokeAlign | Developer Docs](#strokealign-developer-docs) - [LayoutGap | Developer Docs](#layoutgap-developer-docs) - [SolidPaint | Developer Docs](#solidpaint-developer-docs) - [Size | Developer Docs](#size-developer-docs) - [PropertyMenu | Developer Docs](#propertymenu-developer-docs) - [GradientPaint | Developer Docs](#gradientpaint-developer-docs) - [WidgetClickEvent | Developer Docs](#widgetclickevent-developer-docs) - [PlaceholderProps | Developer Docs](#placeholderprops-developer-docs) - [HoverStyle | Developer Docs](#hoverstyle-developer-docs) - [SyncedMap | Developer Docs](#syncedmap-developer-docs) - [Color | Developer Docs](#color-developer-docs) - [BlendMode | Developer Docs](#blendmode-developer-docs) - [WidgetAttachedStickablesChangedEvent | Developer Docs](#widgetattachedstickableschangedevent-developer-docs) - [ArcData | Developer Docs](#arcdata-developer-docs) - [WidgetStuckEvent | Developer Docs](#widgetstuckevent-developer-docs) - [Endpoints | Developer Docs](#endpoints-developer-docs) - [Widget State & Multiplayer | Developer Docs](#widget-state-multiplayer-developer-docs) - [Handling User Events | Developer Docs](#handling-user-events-developer-docs) - [Introduction | Developer Docs](#introduction-developer-docs) - [Using the Plugin API | Developer Docs](#using-the-plugin-api-developer-docs) - [Prototyping Widget UI | Developer Docs](#prototyping-widget-ui-developer-docs) - [Stability and Updates | Developer Docs](#stability-and-updates-developer-docs) - [Working with Widgets | Developer Docs](#working-with-widgets-developer-docs) - [Setting Editor Type | Developer Docs](#setting-editor-type-developer-docs) - [Figma and FigJam Widgets | Developer Docs](#figma-and-figjam-widgets-developer-docs) - [Adding Hover States | Developer Docs](#adding-hover-states-developer-docs) - [Best Practices | Developer Docs](#best-practices-developer-docs) - [Managing Multiple Widgets | Developer Docs](#managing-multiple-widgets-developer-docs) - [Working with Lists | Developer Docs](#working-with-lists-developer-docs) - [Images in Widgets | Developer Docs](#images-in-widgets-developer-docs) - [Text Editing | Developer Docs](#text-editing-developer-docs) - [Working with Variables | Developer Docs](#working-with-variables-developer-docs) - [Undo/Redo for Widgets | Developer Docs](#undo-redo-for-widgets-developer-docs) - [Testing | Developer Docs](#testing-developer-docs) - [Making Network Requests | Developer Docs](#making-network-requests-developer-docs) - [Setup Guide | Developer Docs](#setup-guide-developer-docs) - [Widgets vs Plugins | Developer Docs](#widgets-vs-plugins-developer-docs) - [Prerequisites | Developer Docs](#prerequisites-developer-docs) - [Samples | Developer Docs](#samples-developer-docs) - [What's Supported | Developer Docs](#what-s-supported-developer-docs) - [Get Help | Developer Docs](#get-help-developer-docs) --- # Developer Docs [Skip to main content](https://developers.figma.com/#__docusaurus_skipToContent_fallback) If you can dream it, you can build it ===================================== Our developer platform puts the power in your hands to create the tools teams need to improve efficiency, expand functionality, and bring ideas to life. Take a look at our APIs, documentation, guides, and references to get started. ![Abstract illustration that represents a Figma Plugin](https://static.figma.com/uploads/2b6cb3fa0c8256e958e2954ae37f8bfb9475a4af) ### Plugin APIs Automate tasks, add new functionality, and improve your workflow with plugins for everything from documentation to communication. [View plugin docs](https://developers.figma.com/docs/plugins/) ![Abstract illustration that represents a widget](https://static.figma.com/uploads/edf502651aa643f0a5631b45cee6d384271aeab0) ### Widget APIs Encourage team collaboration and run meetings more efficiently in FigJam with interactive games, polls, trackers, and more. [View widget docs](https://developers.figma.com/docs/widgets/) Bring Figma to you ------------------ Leverage the power of our REST API to bring Figma into your external tools and products. Use our Embed kit to share or embed real-time Figma designs and prototypes to whoever, whenever you need to. [Start building](https://developers.figma.com/docs/rest-api/) Automate account provisioning ----------------------------- Simplify onboarding and offboarding with role-setting via our SCIM API. Any changes to members’ roles within your identity provider are automatically pushed to Figma—saving your team time and energy. [Get started](https://help.figma.com/hc/articles/360048514653-Set-up-automatic-provisioning-via-SCIM) “Figma’s API has helped bring ideas we have dreamt about for ages to life.” =========================================================================== Erik Klimczak, Principal Designer at Uber Share your builds with millions ------------------------------- ### Show us what you got Publish and share what you build with the millions of users in our Figma community. [View Figma community](https://www.figma.com/community) ### Partner with Figma Give your work more exposure when you feature your integration in our collection. [View integrations](https://www.figma.com/product-integrations) ### Be a team player Create private plugins and widgets to keep internal information and data safe. [Start building](https://help.figma.com/hc/articles/4404228629655-Create-private-organization-plugins) Join the club ------------- Learn from others, share your work, and extend your tool set with a diverse group of developers from around the world. * [Browse plugin samples on GitHub](https://github.com/figma/plugin-samples) * [Browse widget samples on GitHub](https://github.com/figma/widget-samples) * [View video tutorials on YouTube](https://youtube.com/playlist?list=PLXDU_eVOJTx5YBAszyuOTyxlgIxkQVyii) * [Join the conversation on Discord](https://discord.gg/xzQhe2Vcvx) * [Share Plugin API feedback](https://forum.figma.com/c/plugin-api/20) * [Share REST API feedback](https://forum.figma.com/c/rest-api/11) * [Share Widget API feedback](https://forum.figma.com/c/plugin-widget-api/20) * [See what users are requesting](https://forum.figma.com/c/figjam/resource-ideas/59) Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Updates | Developer Docs [Skip to main content](https://developers.figma.com/docs/plugins/updates/#__docusaurus_skipToContent_fallback) * Added grid gap types to [VariableBindableNodeField](https://developers.figma.com/docs/plugins/api/VariableBindableNodeField/) * Added grid types to [AnnotationProperty](https://developers.figma.com/docs/plugins/api/AnnotationProperty/) * Added the `visible` property to the [Noise](https://developers.figma.com/docs/plugins/api/Effect/#noiseeffect) and [Texture](https://developers.figma.com/docs/plugins/api/Effect/#textureeffect) effect types. * Added the `boundVariables` property to [Noise](https://developers.figma.com/docs/plugins/api/Effect/#noiseeffect) and [Texture](https://developers.figma.com/docs/plugins/api/Effect/#textureeffect) effect types to prevent validation errors on write. Note that binding variables for Noise and Texture effects is not yet supported. * Added a new [Glass](https://developers.figma.com/docs/plugins/api/Effect/#glasseffect) effect type in beta. Note that the effect is only supported on Frames at this time, and binding variables is not yet supported. * Fixed [`GridTrackSize`](https://developers.figma.com/docs/plugins/api/GridTrackSize/) to properly handle `value` as optional. Added documentation for figma.ui.getPosition(). Added support for Grid layout properties on grid containers and children. Grid Containers[​](https://developers.figma.com/docs/plugins/updates/#grid-containers "Direct link to Grid Containers") ------------------------------------------------------------------------------------------------------------------------ * [`gridRowCount`](https://developers.figma.com/docs/plugins/api/properties/nodes-gridrowcount/) * [`gridColumnCount`](https://developers.figma.com/docs/plugins/api/properties/nodes-gridcolumncount/) * [`gridRowGap`](https://developers.figma.com/docs/plugins/api/properties/nodes-gridrowgap/) * [`gridColumnGap`](https://developers.figma.com/docs/plugins/api/properties/nodes-gridcolumngap/) * [`gridRowSizes`](https://developers.figma.com/docs/plugins/api/properties/nodes-gridrowsizes/) * [`gridColumnSizes`](https://developers.figma.com/docs/plugins/api/properties/nodes-gridcolumnsizes/) * [`appendChildAt`](https://developers.figma.com/docs/plugins/api/properties/nodes-appendchildat/) Grid Children[​](https://developers.figma.com/docs/plugins/updates/#grid-children "Direct link to Grid Children") ------------------------------------------------------------------------------------------------------------------ * [`gridRowSpan`](https://developers.figma.com/docs/plugins/api/properties/nodes-gridrowspan/) * [`gridColumnSpan`](https://developers.figma.com/docs/plugins/api/properties/nodes-gridcolumnspan/) * [`gridRowAnchorIndex`](https://developers.figma.com/docs/plugins/api/properties/nodes-gridrowanchorindex/) * [`gridColumnAnchorIndex`](https://developers.figma.com/docs/plugins/api/properties/nodes-gridcolumnanchorindex/) * [`gridChildHorizontalAlign`](https://developers.figma.com/docs/plugins/api/properties/nodes-gridchildhorizontalalign/) * [`gridChildVerticalAlign`](https://developers.figma.com/docs/plugins/api/properties/nodes-gridchildverticalalign/) * [`setGridChildPosition`](https://developers.figma.com/docs/plugins/api/properties/nodes-setgridchildposition/) * Added missing stroke cap types to [StrokeCap](https://developers.figma.com/docs/plugins/api/StrokeCap/) including `"DIAMOND_FILLED"`, `"TRIANGLE_FILLED"`, and `"CIRCLE_FILLED"` * Added the `color` property to the [Noise](https://developers.figma.com/docs/plugins/api/Effect/#noiseeffect) effect type **New**: * Type definitions now ship with docstrings, so you can view Plugin API documentation alongside your code in IDEs such as VSCode. **Bug fixes**: * Fix the type definition for [InteractiveSlideElementNode](https://developers.figma.com/docs/plugins/api/InteractiveSlideElementNode/) to include a `clone()` method. * Fix the type definition for [PatternPaint](https://developers.figma.com/docs/plugins/api/Paint/#patternpaint) to include `visible`, `opacity` and `blendMode` properties. Bug fixes: * The type definition for [CodegenPreferences.unit](https://developers.figma.com/docs/plugins/api/figma-codegen/#preferences) now uses uppercase string values instead of lowercase string values We're adding the following new node types and properties in beta: * [Text path](https://developers.figma.com/docs/plugins/api/TextPathNode/) node type * [Transform group](https://developers.figma.com/docs/plugins/api/TransformGroupNode/) node type * [Texture](https://developers.figma.com/docs/plugins/api/Effect/#textureeffect) and [Noise](https://developers.figma.com/docs/plugins/api/Effect/#noiseeffect) effect types * [Progressive](https://developers.figma.com/docs/plugins/api/Effect/#blureffectprogressive) blur effect type * [Pattern](https://developers.figma.com/docs/plugins/api/Paint/#patternpaint) paint type The node types and properties in beta can be used with Figma Design and Figma Draw. Some exciting news for codegen plugins! Thanks to your feedback, we've extended the [`figma.codegen.on` callback](https://developers.figma.com/docs/plugins/api/properties/figma-codegen-on/) timeout from 3s to 15s. For more details, see: * [Codegen plugins](https://developers.figma.com/docs/plugins/codegen-plugins/) * [`figma.codegen.on` callback](https://developers.figma.com/docs/plugins/api/properties/figma-codegen-on/) **New**: We've updated our Plugin API to support [**Annotation Categories**](https://developers.figma.com/docs/plugins/api/AnnotationCategory/) , enabling developers to create organized and structured annotations with their plugins. Plugin API users can now: * Initialize and manage Annotation Categories at the file level * Create Categories with custom labels and colors. * Read existing Annotation Categories defined for a file * Assign a new Category to an Annotation for better organization * Remove, add, and edit Categories as needed This update builds upon our previous [annotations](https://developers.figma.com/docs/plugins/api/Annotation/) support, giving you more control over how annotations are categorized and displayed in your plugins. For more information, see: * [Annotation Categories](https://developers.figma.com/docs/plugins/api/AnnotationCategory/) * [Annotation Category Colors](https://developers.figma.com/docs/plugins/api/AnnotationCategoryColor/) * [`figma.annotations`](https://developers.figma.com/docs/plugins/api/figma-annotations/) We're making some changes to plugin data storage. New: * The total [client storage](https://developers.figma.com/docs/plugins/api/figma-clientStorage/) limit is now 5 MB, up from 1 MB previously * [`setSharedPluginData`](https://developers.figma.com/docs/plugins/api/properties/nodes-setplugindata/) and [`setSharedPluginData`](https://developers.figma.com/docs/plugins/api/properties/nodes-setsharedplugindata/) have new per-entry 100 kB limits Bug fixes: * Fix the return type for [node.getRangeBoundVariable()](https://developers.figma.com/docs/plugins/api/TextNode/#getrangeboundvariable) . Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Compare the Figma APIs | Developer Docs [Skip to main content](https://developers.figma.com/compare-apis/#__docusaurus_skipToContent_fallback) Compare the Figma APIs ====================== Learn how Figma's APIs can support the use cases of your work and organization! Figma provides the [Plugin API](https://developers.figma.com/docs/plugins/) , [Widget API](https://developers.figma.com/docs/widgets/) , and [REST API](https://developers.figma.com/docs/rest-api/) , powerful developer interfaces that let you extend how Figma can be used by you, your team, and the entire Figma community. On this page, we dive into the differences between our APIs. API overview ------------ The **Plugin API** enables you to create interactive experiences that extend what Figma can do. For example, you can use plugins to: * Generate content or ideas with AI * Bring outside content like stock photos into Figma * Insert context from other tools, like your project tracker, into Figma The **Widget API** enables you to create custom interactive on-canvas nodes with rich user interfaces that can be applied to the Figma or FigJam canvas. For example, you can use widgets to: * Show an alignment scale where all the viewers of a file can vote on how aligned they feel * Stamp the canvas with emojis or custom stickers * Show a snippet of information, like the details of a ticket or work item, from a project tracker The **REST API** enables you to access your Figma files from your own script, tool, or app. You can use the REST API to: * Automate syncing your Figma libraries to and from your codebase * Write a custom automation script or app * Bring the best of Figma into your own apps and experiences as one of our [integration partners](https://www.figma.com/product-integrations/) API comparison -------------- This section breaks down Figma's APIs by interaction model, use case, and more. Use these comparisons to determine the right API for what you're trying to build. ### Interaction models #### Plugin API **In Figma and FigJam:** A user has a particular Figma design or FigJam file open; the plugin is reading or writing to that file as they work. The plugin might also be sending details to other apps, like updating a ticket in Jira. #### Widget API **In Figma and FigJam:** A user has a particular Figma design or FigJam file open; the widget is added to the canvas of that file. The widget persists on the canvas and is visible to anyone viewing the file. The widget can update when any of those viewers interact with it; it can also be manually refreshed with updated details from another app or service. #### REST API **In any automated system:** A user sets up a pre-programmed routine or script that runs at a later time: either manually, on a set schedule (like a job that runs every night), or triggered by an event (like a build that runs whenever code files are changed). **Note:** Figma does not need to be open and a user does not need to be present. **In [integrated apps](https://www.figma.com/product-integrations/) :** A user has any an integrated app (e.g. Slack / Storybook / Notion / Maze / etc.) open and is either (a) looking at a live embed of a Figma design or FigJam file or (b) pulling details from a Figma design or FigJam file into the app for further processing, like creating a prototype from designs or pulling design details into a live design system. **In Figma, via a plugin or widget:** A user running a plugin or widget (using the Plugin and Widget APIs) can also call the REST API to access contents of files other than the file where the plugin or widget is running. ### Example scenarios #### Plugin API **Bring content into Figma:** Interactively browse content from another source (like [Unsplash](https://www.figma.com/community/plugin/738454987945972471/Unsplash) or [LottieFiles](https://www.figma.com/community/plugin/809860933081065308/LottieFiles) ) and easily add it to your Figma design **Create shared workflows that involve Figma and other tools:** Minimize context switching by bringing key context and actions (like viewing or creating a [Jira](https://www.figma.com/community/plugin/1220802563996996107/Jira) ticket) into the Figma experience where you're already working **Bring designs to code:** Transform Figma designs into working code in real time, like [Anima](https://www.figma.com/community/plugin/857346721138427857/Anima---Figma-to-React-and-HTML) or [LottieFiles](https://www.figma.com/community/plugin/809860933081065308/LottieFiles) #### Widget API **Enable real-time interactivity:** Drive alignment with voting, have fun with games, and more - right on the canvas where everyone can see **Bring context from other tools onto the canvas:** Enable viewers of a Figma design or FigJam file to see relevant context from another app (like a row from a Coda or Notion table) directly on the canvas **Add notes and annotations:** Add markup or context to a Figma design or FigJam file in exactly the format and UI that viewers will expect **Start with rich, interactive templates:** Start off common projects like creating a table, building a timeline, or assembling a project board with smart templates that can react to the user's changes #### REST API **Build an integration:** [Integration partners](https://www.figma.com/product-integrations/) or Enterprise customers can leverage the REST API to build experiences enriched with Figma data and embeds in their own apps **Sync Figma and your codebase:** Enterprises use the REST API to sync changes from their Figma design libraries to their codebase's design systems (and vice versa) **Access details of other files from a plugin:** Plugins that want to compare the contents of the file in which they're running with other files, like linters, can access other files using the REST API ### Advantages #### Plugin API * Allows real-time changes to the contents of a Figma design or FigJam file * Allows editing almost any aspect of a Figma design or FigJam file #### Widget API * Allow you to create rich and interactive multiplayer experiences directly on the canvas #### REST API * Allows other systems (e.g. apps like Notion, build systems like GitHub Actions, custom automations and scripts on a power user's local computer) to read the contents of one or many Figma design and/or FigJam files, even without having Figma open * Better for accessing a large quantity of nodes (design items) in a single file and for accessing nodes from many files * When using a user's Personal Access Token to call the API, can access all files that a user can access * When registered as an OAuth app, any user can give the app permission to access all of their files ### Limitations #### Plugin API * Can only read and edit the current file that a user has open in Figma * Cannot work across multiple files unless the user manually triggers the plugin on each file or the plugin code also calls the REST API #### Widget API * Can only read and edit the current file that a user has open in Figma * Cannot work across multiple files; each instance of a widget acts only on the file where it's inserted #### REST API * Is largely read-only, with the exception of: * [Comments](https://developers.figma.com/docs/rest-api/comments-endpoints/#post-comments-endpoint) and [Comment Reactions](https://developers.figma.com/docs/rest-api/comments-endpoints/#post-comment-reactions-endpoint) * [Variables](https://developers.figma.com/docs/rest-api/variables-endpoints/) * [Dev Resources](https://developers.figma.com/docs/rest-api/dev-resources-endpoints/) Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Updates | Developer Docs [Skip to main content](https://developers.figma.com/docs/plugins/updates/page/12/#__docusaurus_skipToContent_fallback) New: * As per popular request, the default typings have moved have moved to NPM. See the [Typings](https://developers.figma.com/docs/plugins/api/typings/) page for more information. * Added `getPublishStatusAsync` to components and styles. Last update erroneously set the typings file to update 13, so this skips ahead to update 14. New: * The [setRelaunchData](https://developers.figma.com/docs/plugins/api/properties/nodes-setrelaunchdata/) API (plugin inspector) now supports multiple buttons. * The `setRelaunchData` API is now available on the [DocumentNode](https://developers.figma.com/docs/plugins/api/DocumentNode/) . Relaunch buttons set on this node will appear on every page when nothing is selected. New: * New `selectedTextRange` API that allows you to get and set the [current text selection](https://developers.figma.com/docs/plugins/api/properties/PageNode-selectedtextrange/) . * New `insertCharacters` and `deleteCharacters` that make it easier to [edit text](https://developers.figma.com/docs/plugins/api/properties/TextNode-insertcharacters/) while preserving existing styles. * ICYM, new `setRelaunchData` API (plugin inspector) introduced at [Config](https://www.figma.com/blog/config-2020-new-feature-announcements/) . * `"STRETCH"` is now a valid value for `layoutAlign` in [children of frames](https://developers.figma.com/docs/plugins/api/properties/nodes-layoutalign/) . Fixed: * The following properties have been removed on group nodes (they didn't do anything): `clipsContent`, `guides`, `layoutGrids`, `gridStyleId`. New: * Access to the current [viewport bounds in canvas coordinates](https://developers.figma.com/docs/plugins/api/figma-viewport/) . * Read-only access to the [current file name](https://developers.figma.com/docs/plugins/api/DocumentNode/) via `figma.root.name`. * New helper methods `findChild` and `findChildren` to [search immediate children](https://developers.figma.com/docs/plugins/api/PageNode/) . * Access to the `constrainProportions` as a [node property](https://developers.figma.com/docs/plugins/api/FrameNode/) . * Access to the `strokeMiterLimit` property and `outlineStroke()` method as [node properties](https://developers.figma.com/docs/plugins/api/VectorNode/) . * Access to the `scaleFactor` as an [instance property](https://developers.figma.com/docs/plugins/api/InstanceNode/) . * Access to the `expanded` property on [nodes with children](https://developers.figma.com/docs/plugins/api/FrameNode/) . * Added a definition `Rect` (x, y, width, height) to the typings. Fixed: * Fixed how the `getRange`/`setRange` functions handle unicode characters. Previously, those function took a `start` and `end` parameter which were interpreted as unicode code points (UCS4). However, `node.characters` returns a JavaScript string which is encoded as UTF16. This created an inconsistency where calling `getRange`/`setRange` could end up referencing a different range than the one you would expect, if characters that encode differently were present in your strings (such as emojis). Most plugins should simply work better as a result of this change. If you had added workaround code in your plugin, you may now need to remove the workaround. We also recently released a new version of the desktop app, which uses Electron 6 and Chrome 76. This gives you access to newer Chrome APIs that weren't previously available in the desktop app. New: * Read-only access to prototyping properties is now available for all plugins Fixed: * Fixed a bug where cloning a page did not clone the prototyping connections New: * Auto-layout properties are now available! Please refer to the [`FrameNode` documentation](https://developers.figma.com/docs/plugins/api/FrameNode/) . Fixed: * The `FrameNode` and `GroupNode` objects now have separate [prototypes](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes) , which means that code such as `'strokes' in group` will correctly return false. Note that we still recommend checking the `.type` property of node objects over using the `in` operator. We expect this to be an implementation detail -- however, let us know if this is causing you any issues. Proposed API ([how do they work?](https://developers.figma.com/docs/plugins/proposed-api/) ): * Overlay properties have been added to the proposed prototyping APIs. Figma has [released auto-layout](https://www.figma.com/release-notes/) ! As always, we try to make sure plugins [don't break when we release new features](https://developers.figma.com/docs/plugins/stability-updates/) . That being said, this release affects a lot of the core functionality of Figma and you may need to update your plugin to be aware of those concepts. ### New layout constraints[​](https://developers.figma.com/docs/plugins/updates/page/12/#new-layout-constraints "Direct link to New layout constraints") Auto-layout frames introduces **new types of relations between layers**. Existing APIs around size, positioning and children order have different behavior: * Children of auto-layout frames have a `x` and `y` position set automatically. Writing to the position of those nodes via the API will no-op. Similarly, setting `relativeTransform` may ignore the translation component (but retain the rotation component). * Calling `resize(w, h)` and `resizeWithoutConstraints(w, h)` will no-op in one or both dimensions if the auto-layout frame has a size set automatically by auto-layout. * Changing the size of a node will have the side effect of changing the size of its parent if the parent is an auto-layout frame. * Changing the order of children in an auto-layout frame will have the side effect of changing the position of its children. The plugin API is intended to always return the most up to date value for all properties (i.e. has auto-layout applied). As such, be aware of these new restrictions and side effects when setting properties. ### New frame properties[​](https://developers.figma.com/docs/plugins/updates/page/12/#new-frame-properties "Direct link to New frame properties") Frame-like containers (frames, components & instances) now support new properties! The properties listed below now exist on nodes of type `"FRAME"`, `"COMPONENT"` and `"INSTANCE"`. Note that they are **not** available on nodes of type `"GROUP"`. Note that adding these new properties required re-organizing type definitions in the [typings file](https://developers.figma.com/docs/plugins/api/typings/) . Notably, we've split `FrameNode` into `FrameNode` and `GroupNode` because a lot of properties are not supported on group nodes. * Fill properties * `fills` * `fillStyleId` * Stroke properties * `strokes` * `strokeStyleId` * `strokeWeight` * `strokeAlign` * `strokeCap` * `strokeJoin` * `dashPattern` * Corner properties * `cornerRadius` * `topLeftRadius` * `topRightRadius` * `bottomLeftRadius` * `bottomRightRadius` * `cornerSmoothing` Tip: don't write code like `if ('fills' in node) { ... }` to check if a property exists on a node. This is not guaranteed to work, especially with group nodes. Compare against the node type instead. It also helps TypeScript infer properties about the node better. function isFrameLike(node: BaseNode): node is FrameNode | ComponentNode | InstanceNode { return node.type === 'FRAME' || node.type === 'COMPONENT' || node.type === 'INSTANCE'}if (isFrameLike(node)) { console.log(node.fills, node.strokes, node.cornerRadius)} ### Deprecation of `backgrounds` property[​](https://developers.figma.com/docs/plugins/updates/page/12/#deprecation-of-backgrounds-property "Direct link to deprecation-of-backgrounds-property") On frame-like nodes, the `backgrounds` and `backgroundStyleId` properties are **marked as DEPRECATED**. Use the newly-introduced `fills` and `fillStyleId` properties instead. We made this change to be consistent with other types of nodes that also use the `fills` properties. We may remove the property entirely in a new version so you should not use it. In the meantime, `backgrounds` and `backgroundStyleId` will keep working as an alias for `fills` and `fillStyleId` (i.e. they read and write to the same value). On group nodes, `backgrounds` and `backgroundStyleId` are **no longer supported**, both in the editor and the API. If you have existing frames with a background, you will notice that the backgrounds panel in the properties panel has been changed with a message prompting you to replace it with a fill. Consequently, in the API, writing to the `backgrounds` and `backgroundStyleId` properties of a group node will no-op. On page nodes, `backgrounds` is not deprecated. ### Auto-layout properties[​](https://developers.figma.com/docs/plugins/updates/page/12/#auto-layout-properties "Direct link to Auto-layout properties") Coming soon! (Also included: update 6) New: * We updated the [typings](https://developers.figma.com/docs/plugins/api/typings/) and replaced instances of `| symbol` with `PluginAPI['mixed']` for all properties that can return the special `figma.mixed` value. This new syntax also fixes the problem where TypeScript's control flow analysis was not able to understand `if (node.prop !== figma.mixed)` and narrow down the type. * We added "Use Developer VM" option in the plugin developer menu that gives plugin code access to the browser's debugger during development. [Read more](https://developers.figma.com/docs/plugins/debugging/#developer-vm) . * We fixed a bug where the `selectionchanged` event could sometimes fire multiple times when the selection changed. Proposed API ([how do they work?](https://developers.figma.com/docs/plugins/proposed-api/) ): * We decided not to go forward with the optional `position` option in `figma.showUI()`. Instead, plugins now always remember their last opened position by default. * Most prototyping properties are now available, read-only, under the proposed flag! [Read more about these new properties](https://developers.figma.com/docs/plugins/proposed-api/) . As always, let the Figma team know if these properties are working for you. New: * The `figma.ui.on('message')`, `figma.on('selectionchange')` and `figma.on('currentpagechange')` APIs, which were previously [proposed APIs](https://developers.figma.com/docs/plugins/proposed-api/) can now be used in published plugins. * A new `figma.on('close')` API for allowing you to run shutdown actions when the plugin closes. Proposed API ([how do they work?](https://developers.figma.com/docs/plugins/proposed-api/) ): * An optional `position` option in `figma.showUI()` with possible values `'default' | 'last' | 'auto'` New: * The concept of a developer-only "proposed API". [Click here to learn more](https://developers.figma.com/docs/plugins/proposed-api/) . * Selection change and page change event APIs (`figma.on('selection')`) as a proposed API. Fixed: * Previously a stray vertex not belonging to any segment would throw an error when converting the network to a path. Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Archive | Developer Docs [Skip to main content](https://developers.figma.com/docs/plugins/updates/archive/#__docusaurus_skipToContent_fallback) ### 2025[​](https://developers.figma.com/docs/plugins/updates/archive/#2025 "Direct link to 2025") * [February 6 - Updates for 2025-02-06](https://developers.figma.com/docs/plugins/updates/2025/02/06/update/) * [February 13 - Version 1, Update 107](https://developers.figma.com/docs/plugins/updates/2025/02/13/version-1-update-107/) * [February 26 - Version 1, Update 108](https://developers.figma.com/docs/plugins/updates/2025/02/26/version-1-update-108/) * [March 12 - Updates for 2025-03-12](https://developers.figma.com/docs/plugins/updates/2025/03/12/update/) * [March 17 - Version 1, Update 109](https://developers.figma.com/docs/plugins/updates/2025/03/17/version-1-update-109/) * [April 3 - Updates for 2025-04-03](https://developers.figma.com/docs/plugins/updates/2025/04/03/update/) * [April 30 - Updates for 2025-04-30](https://developers.figma.com/docs/plugins/updates/2025/04/30/update/) * [May 7 - Version 1, Update 110](https://developers.figma.com/docs/plugins/updates/2025/05/07/version-1-update-110/) * [May 14 - Version 1, Update 111](https://developers.figma.com/docs/plugins/updates/2025/05/14/version-1-update-111/) * [May 22 - Version 1, Update 113](https://developers.figma.com/docs/plugins/updates/2025/05/22/version-1-update-113/) * [June 13 - Version 1, Update 114](https://developers.figma.com/docs/plugins/updates/2025/06/13/version-1-update-114/) * [July 8 - Version 1, Update 115](https://developers.figma.com/docs/plugins/updates/2025/07/08/version-1-update-115/) * [July 17 - Version 1, Update 116](https://developers.figma.com/docs/plugins/updates/2025/07/17/version-1-update-116/) * [August 13 - Version 1, Update 117](https://developers.figma.com/docs/plugins/updates/2025/08/13/version-1-update-117/) ### 2024[​](https://developers.figma.com/docs/plugins/updates/archive/#2024 "Direct link to 2024") * [January 3 - Version 1, Update 83](https://developers.figma.com/docs/plugins/updates/2024/01/03/version-1-update-83/) * [January 10 - Version 1, Update 84](https://developers.figma.com/docs/plugins/updates/2024/01/10/version-1-update-84/) * [January 24 - Version 1, Update 85](https://developers.figma.com/docs/plugins/updates/2024/01/24/version-1-update-85/) * [February 7 - Version 1, Update 86](https://developers.figma.com/docs/plugins/updates/2024/02/07/version-1-update-86/) * [February 21 - Version 1, Update 87](https://developers.figma.com/docs/plugins/updates/2024/02/21/version-1-update-87/) * [March 1 - Version 1, Update 88](https://developers.figma.com/docs/plugins/updates/2024/03/01/version-1-update-88/) * [March 27 - Version 1, Update 89](https://developers.figma.com/docs/plugins/updates/2024/03/27/version-1-update-89/) * [April 3 - Version 1, Update 90](https://developers.figma.com/docs/plugins/updates/2024/04/03/version-1-update-90/) * [April 16 - Version 1, Update 91](https://developers.figma.com/docs/plugins/updates/2024/04/16/version-1-update-91/) * [April 24 - Version 1, Update 92](https://developers.figma.com/docs/plugins/updates/2024/04/24/version-1-update-92/) * [May 6 - Version 1, Update 93](https://developers.figma.com/docs/plugins/updates/2024/05/06/version-1-update-93/) * [May 30 - Version 1, Update 94](https://developers.figma.com/docs/plugins/updates/2024/05/30/version-1-update-94/) * [June 6 - Version 1, Update 95](https://developers.figma.com/docs/plugins/updates/2024/06/06/version-1-update-95/) * [June 10 - Version 1, Update 96](https://developers.figma.com/docs/plugins/updates/2024/06/10/version-1-update-96/) * [June 17 - Version 1, Update 97](https://developers.figma.com/docs/plugins/updates/2024/06/17/version-1-update-97/) * [July 24 - Updates for 2024-07-24](https://developers.figma.com/docs/plugins/updates/2024/07/24/update/) * [August 15 - Version 1, Update 98](https://developers.figma.com/docs/plugins/updates/2024/08/15/version-1-update-98/) * [August 27 - Version 1, Update 99](https://developers.figma.com/docs/plugins/updates/2024/08/27/version-1-update-99/) * [September 11 - Version 1, Update 100](https://developers.figma.com/docs/plugins/updates/2024/09/11/version-1-update-100/) * [September 16 - Version 1.100.1](https://developers.figma.com/docs/plugins/updates/2024/09/16/version-1.100.1/) * [September 17 - Version 1.100.2](https://developers.figma.com/docs/plugins/updates/2024/09/17/version-1.100.2/) * [September 27 - Updates for 2024-09-27](https://developers.figma.com/docs/plugins/updates/2024/09/27/update/) * [November 12 - Version 1, Update 102](https://developers.figma.com/docs/plugins/updates/2024/11/12/version-1-update-102/) * [November 12 - Version 1, Update 101](https://developers.figma.com/docs/plugins/updates/2024/11/12/version-1-update-101/) * [November 22 - Version 1, Update 103](https://developers.figma.com/docs/plugins/updates/2024/11/22/version-1-update-103/) * [December 3 - Version 1, Update 104](https://developers.figma.com/docs/plugins/updates/2024/12/03/version-1-update-104/) * [December 13 - Version 1, Update 105](https://developers.figma.com/docs/plugins/updates/2024/12/13/version-1-update-105/) * [December 19 - Version 1, Update 106](https://developers.figma.com/docs/plugins/updates/2024/12/19/version-1-update-106/) ### 2023[​](https://developers.figma.com/docs/plugins/updates/archive/#2023 "Direct link to 2023") * [January 18 - Version 1, Update 58](https://developers.figma.com/docs/plugins/updates/2023/01/18/version-1-update-58/) * [February 6 - Version 1, Update 59](https://developers.figma.com/docs/plugins/updates/2023/02/06/version-1-update-59/) * [March 7 - Version 1, Update 60](https://developers.figma.com/docs/plugins/updates/2023/03/07/version-1-update-60/) * [March 10 - Version 1, Update 61](https://developers.figma.com/docs/plugins/updates/2023/03/10/version-1-update-61/) * [March 14 - Version 1, Update 62](https://developers.figma.com/docs/plugins/updates/2023/03/14/version-1-update-62/) * [March 31 - Version 1, Update 63](https://developers.figma.com/docs/plugins/updates/2023/03/31/version-1-update-63/) * [May 2 - Version 1, Update 64](https://developers.figma.com/docs/plugins/updates/2023/05/02/version-1-update-64/) * [May 3 - Version 1, Update 65](https://developers.figma.com/docs/plugins/updates/2023/05/03/version-1-update-65/) * [May 10 - Version 1, Update 66](https://developers.figma.com/docs/plugins/updates/2023/05/10/version-1-update-66/) * [May 31 - Version 1, Update 67](https://developers.figma.com/docs/plugins/updates/2023/05/31/version-1-update-67/) * [June 21 - Version 1, Update 68](https://developers.figma.com/docs/plugins/updates/2023/06/21/version-1-update-68/) * [June 30 - Version 1, Update 69](https://developers.figma.com/docs/plugins/updates/2023/06/30/version-1-update-69/) * [July 6 - Version 1, Update 70](https://developers.figma.com/docs/plugins/updates/2023/07/06/version-1-update-70/) * [July 19 - Version 1, Update 71](https://developers.figma.com/docs/plugins/updates/2023/07/19/version-1-update-71/) * [July 27 - Version 1, Update 72](https://developers.figma.com/docs/plugins/updates/2023/07/27/version-1-update-72/) * [August 10 - Version 1, Update 73](https://developers.figma.com/docs/plugins/updates/2023/08/10/version-1-update-73/) * [August 11 - Version 1, Update 74](https://developers.figma.com/docs/plugins/updates/2023/08/11/version-1-update-74/) * [August 21 - Version 1, Update 75](https://developers.figma.com/docs/plugins/updates/2023/08/21/version-1-update-75/) * [August 24 - Version 1, Update 76](https://developers.figma.com/docs/plugins/updates/2023/08/24/version-1-update-76/) * [September 14 - Version 1, Update 77](https://developers.figma.com/docs/plugins/updates/2023/09/14/version-1-update-77/) * [September 21 - Version 1, Update 78](https://developers.figma.com/docs/plugins/updates/2023/09/21/version-1-update-78/) * [October 4 - Version 1, Update 79](https://developers.figma.com/docs/plugins/updates/2023/10/04/version-1-update-79/) * [October 18 - Updates for 2023-10-18](https://developers.figma.com/docs/plugins/updates/2023/10/18/update/) * [October 27 - Version 1, Update 80](https://developers.figma.com/docs/plugins/updates/2023/10/27/version-1-update-80/) * [November 9 - Version 1, Update 81](https://developers.figma.com/docs/plugins/updates/2023/11/09/version-1-update-81/) * [December 6 - Version 1, Update 82](https://developers.figma.com/docs/plugins/updates/2023/12/06/version-1-update-82/) ### 2022[​](https://developers.figma.com/docs/plugins/updates/archive/#2022 "Direct link to 2022") * [January 12 - Version 1, Update 41](https://developers.figma.com/docs/plugins/updates/2022/01/12/version-1-update-41/) * [January 26 - Version 1, Update 42](https://developers.figma.com/docs/plugins/updates/2022/01/26/version-1-update-42/) * [March 2 - Version 1, Update 43](https://developers.figma.com/docs/plugins/updates/2022/03/02/version-1-update-43/) * [April 6 - Version 1, Update 44](https://developers.figma.com/docs/plugins/updates/2022/04/06/version-1-update-44/) * [April 27 - Version 1, Update 45](https://developers.figma.com/docs/plugins/updates/2022/04/27/version-1-update-45/) * [May 4 - Version 1, Update 46](https://developers.figma.com/docs/plugins/updates/2022/05/04/version-1-update-46/) * [May 10 - Version 1, Update 47](https://developers.figma.com/docs/plugins/updates/2022/05/10/version-1-update-47/) * [June 8 - Version 1, Update 48](https://developers.figma.com/docs/plugins/updates/2022/06/08/version-1-update-48/) * [June 23 - Version 1, Update 49](https://developers.figma.com/docs/plugins/updates/2022/06/23/version-1-update-49/) * [August 8 - Version 1, Update 50](https://developers.figma.com/docs/plugins/updates/2022/08/08/version-1-update-50/) * [August 31 - Version 1, Update 51](https://developers.figma.com/docs/plugins/updates/2022/08/31/version-1-update-51/) * [September 21 - Version 1, Update 52](https://developers.figma.com/docs/plugins/updates/2022/09/21/version-1-update-52/) * [October 7 - Version 1, Update 53](https://developers.figma.com/docs/plugins/updates/2022/10/7/version-1-update-53/) * [October 18 - Version 1, Update 54](https://developers.figma.com/docs/plugins/updates/2022/10/18/version-1-update-54/) * [October 27 - Version 1, Update 55](https://developers.figma.com/docs/plugins/updates/2022/10/27/version-1-update-55/) * [November 22 - Version 1, Update 56](https://developers.figma.com/docs/plugins/updates/2022/11/22/version-1-update-56/) * [December 6 - Version 1, Update 57](https://developers.figma.com/docs/plugins/updates/2022/12/06/version-1-update-57/) ### 2021[​](https://developers.figma.com/docs/plugins/updates/archive/#2021 "Direct link to 2021") * [January 29 - Version 1, Update 20](https://developers.figma.com/docs/plugins/updates/2021/01/29/version-1-update-20/) * [March 22 - Version 1, Update 21](https://developers.figma.com/docs/plugins/updates/2021/03/22/version-1-update-21/) * [April 19 - Version 1, Update 22](https://developers.figma.com/docs/plugins/updates/2021/04/19/version-1-update-22/) * [April 28 - Version 1, Update 23](https://developers.figma.com/docs/plugins/updates/2021/04/28/version-1-update-23/) * [May 26 - Version 1, Update 24](https://developers.figma.com/docs/plugins/updates/2021/05/26/version-1-update-24/) * [June 10 - Version 1, Update 25](https://developers.figma.com/docs/plugins/updates/2021/06/10/version-1-update-25/) * [June 30 - Version 1, Update 26](https://developers.figma.com/docs/plugins/updates/2021/06/30/version-1-update-26/) * [July 22 - Version 1, Update 27](https://developers.figma.com/docs/plugins/updates/2021/07/22/version-1-update-27/) * [July 27 - Version 1, Update 28](https://developers.figma.com/docs/plugins/updates/2021/07/27/version-1-update-28/) * [August 17 - Version 1, Update 30](https://developers.figma.com/docs/plugins/updates/2021/08/17/version-1-update-30/) * [August 17 - Version 1, Update 29](https://developers.figma.com/docs/plugins/updates/2021/08/17/version-1-update-29/) * [August 24 - version-1-update-31](https://developers.figma.com/docs/plugins/updates/2021/08/24/version-1-update-31/) * [August 26 - Version 1, Update 32](https://developers.figma.com/docs/plugins/updates/2021/08/26/version-1-update-32/) * [September 1 - Version 1, Update 33](https://developers.figma.com/docs/plugins/updates/2021/09/01/version-1-update-33/) * [September 8 - Version 1, Update 34](https://developers.figma.com/docs/plugins/updates/2021/09/08/version-1-update-34/) * [September 22 - Version 1, Update 35](https://developers.figma.com/docs/plugins/updates/2021/09/22/version-1-update-35/) * [October 8 - Version 1, Update 36](https://developers.figma.com/docs/plugins/updates/2021/10/08/version-1-update-36/) * [October 11 - Version 1, Update 37](https://developers.figma.com/docs/plugins/updates/2021/10/11/version-1-update-37/) * [November 3 - Version 1, Update 38](https://developers.figma.com/docs/plugins/updates/2021/11/03/version-1-update-38/) * [November 11 - Version 1, Update 39](https://developers.figma.com/docs/plugins/updates/2021/11/11/version-1-update-39/) * [December 15 - Version 1, Update 40](https://developers.figma.com/docs/plugins/updates/2021/12/15/version-1-update-40/) ### 2020[​](https://developers.figma.com/docs/plugins/updates/archive/#2020 "Direct link to 2020") * [January 8 - Version 1, Update 10](https://developers.figma.com/docs/plugins/updates/2020/01/08/version-1-update-10/) * [February 5 - Version 1, Update 11](https://developers.figma.com/docs/plugins/updates/2020/02/05/version-1-update-11/) * [February 12 - Version 1, Update 12](https://developers.figma.com/docs/plugins/updates/2020/02/12/version-1-update-12/) * [February 26 - Version 1, Update 14](https://developers.figma.com/docs/plugins/updates/2020/02/26/version-1-update-14/) * [May 7 - Version 1, Update 15](https://developers.figma.com/docs/plugins/updates/2020/05/07/version-1-update-15/) * [July 7 - Version 1, Update 16](https://developers.figma.com/docs/plugins/updates/2020/07/07/version-1-update-16/) * [October 8 - Version 1, Update 17](https://developers.figma.com/docs/plugins/updates/2020/10/08/version-1-update-17/) * [October 28 - Version 1, Update 18](https://developers.figma.com/docs/plugins/updates/2020/10/28/version-1-update-18/) * [November 19 - Version 1, Update 19](https://developers.figma.com/docs/plugins/updates/2020/11/19/version-1-update-19/) ### 2019[​](https://developers.figma.com/docs/plugins/updates/archive/#2019 "Direct link to 2019") * [August 21 - Version 1, Update 1](https://developers.figma.com/docs/plugins/updates/2019/08/21/version-1-update-1/) * [August 29 - Version 1, Update 2](https://developers.figma.com/docs/plugins/updates/2019/08/29/version-1-update-2/) * [September 4 - Version 1, Update 3](https://developers.figma.com/docs/plugins/updates/2019/09/04/version-1-update-3/) * [October 10 - Version 1, Update 4](https://developers.figma.com/docs/plugins/updates/2019/10/10/version-1-update-4/) * [October 24 - Version 1, Update 5](https://developers.figma.com/docs/plugins/updates/2019/10/24/version-1-update-5/) * [November 26 - Version 1, Update 7](https://developers.figma.com/docs/plugins/updates/2019/11/26/version-1-update-7/) * [December 4 - Version 1, Update 8](https://developers.figma.com/docs/plugins/updates/2019/12/04/version-1-update-8/) * [December 11 - Version 1, Update 9](https://developers.figma.com/docs/plugins/updates/2019/12/11/version-1-update-9/) Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Updates | Developer Docs [Skip to main content](https://developers.figma.com/docs/plugins/updates/page/11/#__docusaurus_skipToContent_fallback) New: * Added `title` parameter to options for [showUI](https://developers.figma.com/docs/plugins/api/properties/figma-showui/) . * Added [use\_absolute\_bounds property](https://developers.figma.com/docs/plugins/api/ExportSettings/#useabsolutebounds) for [ExportSettings](https://developers.figma.com/docs/plugins/api/ExportSettings/) . New: * Added [hyperlink](https://developers.figma.com/docs/plugins/api/TextNode/#hyperlink) property for [TextNode](https://developers.figma.com/docs/plugins/api/TextNode/) . New methods [getRangeHyperlink](https://developers.figma.com/docs/plugins/api/TextNode/#getrangehyperlink) and [setRangeHyperlink](https://developers.figma.com/docs/plugins/api/TextNode/#setrangehyperlink) are also available for manipulating hyperlink targets. * Added [rotation](https://developers.figma.com/docs/plugins/api/Paint/#rotation) property for [ImagePaint](https://developers.figma.com/docs/plugins/api/Paint/#imagepaint) . * Added `ON_KEY_DOWN` type to [Trigger](https://developers.figma.com/docs/plugins/api/Trigger/) . New: * Added [documentationLinks](https://developers.figma.com/docs/plugins/api/ComponentNode/#documentationlinks) property for [ComponentNode](https://developers.figma.com/docs/plugins/api/ComponentNode/) and [ComponentSetNode](https://developers.figma.com/docs/plugins/api/ComponentSetNode/) . * Added [detachInstance](https://developers.figma.com/docs/plugins/api/InstanceNode/#detachinstance) functionality for [InstanceNode](https://developers.figma.com/docs/plugins/api/InstanceNode/) . This function preserves the same behavior as the equivalent functionality in the Figma editor. New: * Added `swapComponent` to swap an instance's main component to a different main component. This function preserves overrrides using the same heuristics as instance swap in the Figma editor UI. New: * Added `commitUndo` to commit new undo states to undo history. This does not trigger an undo. * Added `triggerUndo` to trigger an undo action. This reverts to the last state in undo history. New: * Added `moveLocalPaintStyleAfter`, `moveLocalTextStyleAfter`, `moveLocalEffectStyleAfter`, and `moveLocalGridStyleAfter` to reorder local styles within folders. * Added `moveLocalPaintFolderAfter`, `moveLocalTextFolderAfter`, `moveLocalEffectFolderAfter`, and `moveLocalGridFolderAfter` to reorder style folders that share the same parent folder. New: * Support for the new autolayout APIs! They are available on [frame nodes](https://developers.figma.com/docs/plugins/api/FrameNode/) . * The `primaryAxisSizingMode`, `primaryAxisAlignItems`, `counterAxisAlignItems` properties have been added on frame-like nodes. * The `horizontalPadding` and `verticalPadding` properties are now deprecated. Use `paddingLeft`, `paddingRight`, `paddingTop` and `paddingBottom` instead. * The `layoutGrow` property has been added on all nodes (except documents & page nodes). * The `layoutAlign` has changed. It now supports the values `"STRETCH" | "INHERIT"`. Fixed: * The `getPluginData` and `getSharedPluginData` APIs now properly inherit from components when accessed from an instance. * The `setRelaunchData` APIs is now able to override relaunch data on instances. New: * Support for Variants! This update comes with a new node type: learn more about [component sets](https://developers.figma.com/docs/plugins/api/ComponentSetNode/) . * New functions [`combineAsVariants`](https://developers.figma.com/docs/plugins/api/figma/#combineasvariants) and [`importComponentSetByKeyAsync`](https://developers.figma.com/docs/plugins/api/figma/#importcomponentsetbykeyasync) to support variants. Fixed: * Fixed a bug where `instance.children` would not return any children when the instance was invisible * Fixed a bug where setting a local style to private (by prepending `_` to the style name) did not stop it from being published * Fixed a bug where accessing `textNode.textAutoResize` would crash * Fixed a bug where it was possible to give a node invalid coordinates by setting `relativeTransform` to some value where the two axes had zero dot product * Fixed a bug where components imported from the team library became writeable * Fixed a bug where `figma.getLocal*Styles()` would return an array containing `null` or invalid style nodes New: * `enablePrivatePluginApi` option in [manifest.json](https://developers.figma.com/docs/plugins/manifest/#enableprivatepluginapi) to enable Private Plugin specific APIs * For private plugins with the above option set, [`figma.fileKey`](https://developers.figma.com/docs/plugins/api/figma/#filekey) will be set to the key of the current file. * The [`ui`](https://developers.figma.com/docs/plugins/manifest/#ui) property in the plugin manifest can now either contain a filename in the form of a string. Or a list of filenames in the form of a map. // either"ui": "ui.html"// or"ui": { "loginPage": "login.html", "main": "ui.html",} * If you use the former, the file is available through the [`__html__`](https://developers.figma.com/docs/plugins/api/global-objects/#html) property. If you use the latter, then the files are available through a new [`__uiFiles__`](https://developers.figma.com/docs/plugins/api/global-objects/#uifiles) property (eg.`__uiFiles__.loginPage`, `__uiFiles__.main` etc) Fixed: * [`InstanceNode.mainComponent`](https://developers.figma.com/docs/plugins/api/InstanceNode/#maincomponent) now returns null instead of raising an exception if the underlying component doesn't actually exist. * `setPluginData` and `setSharedPluginData` now removes the the relevant entries when the value is set to the empty string `""`, which is the default value returned by `getPluginData` and `getSharedPluginData`. New: * The newly released easing curves are [now available in the API](https://developers.figma.com/docs/plugins/api/Transition/) . * The existing `reactions` property returns multiple reactions to support this newly launched feature. * The `spread` property in [ShadowEffect](https://developers.figma.com/docs/plugins/api/Effect/) to match the newly released spread feature. * A `rescale` function to match to toolbar's [Scale Tool](https://developers.figma.com/docs/plugins/api/properties/nodes-rescale/) . * The `masterComponent` property has been renamed to `mainComponent` Fixed: * The QuickJS runtime used to [sandbox plugin code](https://developers.figma.com/docs/plugins/how-plugins-run/) has been upgraded to the latest version. Exceptions thrown will now contain a property stack trace (e.g. in the `(new Error()).stack`). Note that you could previously get stack traces using the [Developer VM](https://developers.figma.com/docs/plugins/debugging/#developer-vm) , which also supports the `debugger` keyword. * The `setSharedPluginData` namespace argument now supports the characters `_`, `.` and uppercase characters. * Fixed an issue where `exportAsImage` API would sometimes would fail to render nodes correctly due to instances not being updated. * Fixed an issue where plugins could sometimes set a non-invertible affine transform to `relativeTransform`. * Fixed an issue where cloning a component via `.clone()` would not trigger library updates for publishing. * Fixed an issue where very long plugin names would stretch the plugin window. Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Updates | Developer Docs [Skip to main content](https://developers.figma.com/docs/plugins/updates/page/10/#__docusaurus_skipToContent_fallback) More features added to plugin parameters (which itself is still in beta)! * It is now allowed to make all parameters optional * The [setSuggestions](https://developers.figma.com/docs/plugins/api/figma-parameters/#setsuggestions) function now supports icons. Check out the updated [Svg Inserter](https://github.com/figma/plugin-samples/tree/master/svg-inserter) for an example * You can set a custom error message using [setError](https://developers.figma.com/docs/plugins/api/figma-parameters/#seterror) . This can also be used for validating user typed values and enforcing pre-conditions like selection or document contents. [Resizer](https://github.com/figma/plugin-samples/tree/master/resizer) contains an example for how to do this * You can also set custom loading messages [setLoadingMessage](https://developers.figma.com/docs/plugins/api/figma-parameters/#setloadingmessage) when accessing network requests * Lots of rendering improvements to the parameter UI New: * Support for Multiple Flows! Added [flowStartingPoints](https://developers.figma.com/docs/plugins/api/PageNode/#flowstartingpoints) property for [PageNode](https://developers.figma.com/docs/plugins/api/PageNode/) . New: * Added [variantProperties](https://developers.figma.com/docs/plugins/api/ComponentNode/#variantproperties) property for [ComponentNode](https://developers.figma.com/docs/plugins/api/ComponentNode/) and [InstanceNode](https://developers.figma.com/docs/plugins/api/InstanceNode/) to get variant properties and values for a node. * Added [variantGroupProperties](https://developers.figma.com/docs/plugins/api/ComponentSetNode/#variantgroupproperties) property for [ComponentSetNode](https://developers.figma.com/docs/plugins/api/ComponentSetNode/) to get all variant properties and possible values that exist on a component set. * Added [setProperties](https://developers.figma.com/docs/plugins/api/InstanceNode/#setproperties) function for [InstanceNode](https://developers.figma.com/docs/plugins/api/InstanceNode/) to set the variant properties and values for an instance of a variant node. * Bugfix: callbacks take an `event` param again /working-in-figjam/--- title: Version 1, Update 31[​](https://developers.figma.com/docs/plugins/updates/page/10/#working-in-figjam---title-version-1-update-31 "Direct link to /working-in-figjam/--- title: Version 1, Update 31") ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Introducing [FigJam Plugins](https://developers.figma.com/docs/plugins/working-in-figjam/) for public beta! We're introducing a number of APIs and events to enable plugin development in FigJam. New: * `editorType` is now required in [manifests](https://developers.figma.com/docs/plugins/manifest/#editortype) . Specifying an editorType will control the APIs your plugin has access to in each editor, and whether your plugin shows up in Figma Design or FigJam (or both). * `figma.editorType`: returns either `figma` or `figjam` and enables you to have conditional logic in your plugin depending on the editor it’s run in. FigJam Plugins only: * Timer support with [figma.timer](https://developers.figma.com/docs/plugins/api/figma-timer/) object * [StickyNode](https://developers.figma.com/docs/plugins/api/StickyNode/) type. Create a StickyNode with [createSticky](https://developers.figma.com/docs/plugins/api/properties/figma-createsticky/) * [ConnectorNode](https://developers.figma.com/docs/plugins/api/ConnectorNode/) type. Create a ConnectorNode with [createConnector](https://developers.figma.com/docs/plugins/api/properties/figma-createconnector/) * [ShapeWithTextNode](https://developers.figma.com/docs/plugins/api/ShapeWithTextNode/) type. Create a ShapeWithTextNode with [createShapeWithText](https://developers.figma.com/docs/plugins/api/properties/figma-createshapewithtext/) * [StampNode](https://developers.figma.com/docs/plugins/api/StampNode/) type. * UI addition: In FigJam relaunch buttons are shown in the in-line property menu of a node. * UI addition: We added all of the same plugin menus that you have in Figma (e.g. right-click menu, top-left menu, quick actions) New: * Added [plugin parameters](https://developers.figma.com/docs/plugins/plugin-parameters/) in public beta. This feature offers developers a way to receive user input through our in-editor search UI, quick actions, instead of building a custom UI. Small tweak to the typings as part of [plugin parameters](https://developers.figma.com/docs/plugins/updates/2021/08/17/version-1-update-29/) . Made type for values of [`ParameterValues`](https://developers.figma.com/docs/plugins/api/figma-parameters/#parametervalues) `any`. New: * `reactions` node properties for prototyping now support writes (e.g. [`FrameNode` reactions](https://developers.figma.com/docs/plugins/api/FrameNode/#reactions) ) * Updated [`Reaction`](https://developers.figma.com/docs/plugins/api/Reaction/) type to allow null `Action` or `Trigger`. This change more accurately reflects what is possible through the UI and allows you to create reactions with partially null properties. New: * Added `showShadowBehindNode` parameter to options for [Effect](https://developers.figma.com/docs/plugins/api/Effect/) . New: * Added `getRangeListOptions`, `setRangeListOptions`, `getRangeIndentation`, `setRangeIndentation` to TextNode to allow for creation of ordered/unordered lists and to adjust indentation levels Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Updates | Developer Docs [Skip to main content](https://developers.figma.com/docs/plugins/updates/page/13/#__docusaurus_skipToContent_fallback) This update only contains bug fixes. * Pressing ESC no longer closes the plugin automatically when a UI is shown. The plugin is now responsible for handling the ESC event now. This allows plugins to use ESC for editing operations inside the plugin UI. * Fix a bug where invalid styles or components could be sometimes be created accidentally by plugins. This update only contains bug fixes. * Previously, assigning a `textStyleId` to a text node required you to load the existing font on the text node, even though it is being replaced. This is now no longer necessary. * `text.setRangeFontName` now requires you to load all existing fonts used in the text nodes, as they might still be present after the text node gets modified. * Fix a bug where `text.setRangeXYZ` functions would clear the `textStyleId` of characters outside the range that was being modified. This is the first update to the plugins API since launch! This update does not contain breaking changes, so all plugins receive these updates automatically. Please refer to [Stability and Updates](https://developers.figma.com/docs/plugins/stability-updates/) for more on our update and versioning policies. * Added `figma.union`, `figma.subtract`, `figma.intersect`, `figma.exclude` to replace `figma.createBooleanOperation()`. * Added `figma.notify` as an easy way to show messages to the user * Added `figma.getLocalPaintStyles`, `figma.getLocalGridStyles`, `figma.getLocalTextStyles`, `figma.getLocalEffectStyles` to enumerate local styles. * Fix a bug where the `"MAX"` layout grid type was not accepted when setting the value. Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Updates | Developer Docs [Skip to main content](https://developers.figma.com/docs/plugins/updates/page/3/#__docusaurus_skipToContent_fallback) In February 2024, Figma [implemented dynamic page loading](https://developers.figma.com/docs/plugins/updates/2024/02/21/version-1-update-87/#apis-for-dynamic-page-loading) for Figma design files. Now, dynamic page loading has been extended to FigJam files. If your plugin handles FigJam files, you should follow the steps in [Migrating Plugins to Dynamically Load Pages](https://developers.figma.com/docs/plugins/migrating-to-dynamic-loading/) . Bugfixes[​](https://developers.figma.com/docs/plugins/updates/page/3/#bugfixes "Direct link to Bugfixes") ---------------------------------------------------------------------------------------------------------- * The `boundVariables` property of the [ColorStop](https://developers.figma.com/docs/plugins/api/Paint/#colorstop) interface was erroneously annotated as non-nullable. A nullable annotation (`?`) has been added. This change introduces `plugin-api-standalone.d.ts`, an experimental feature which allows for importing types explicitly. Bug fixes * [Mouse Enter](https://developers.figma.com/docs/plugins/api/Trigger/#MOUSE_ENTER) and [Mouse Leave](https://developers.figma.com/docs/plugins/api/Trigger/#MOUSE_LEAVE) prototype events will now be created using the current functionality instead of the legacy functionality. Legacy Mouse Enter/Leave events would trigger every time the mouse moves inside (or outside) of a frame; current Mouse Enter/Leave events only trigger once when they cross the outer boundary of the frame. No migration needed for creating these events, the new behavior will always apply. Reading legacy events will return `deprecatedVersion: true` if present. New * Added the `openInNewTab` property to the [URL](https://developers.figma.com/docs/plugins/api/Action/#URL) action type. This version contains a partial revert of [update 1.98](https://developers.figma.com/docs/plugins/updates/2024/08/15/version-1-update-98/) . In 1.98, we removed the nullable `?` modifier from the TypeScript type annotations for [`boundVariables`](https://developers.figma.com/docs/plugins/working-with-variables/#bound-variables) . `boundVariables` is indeed non-nullable when _reading_ objects from the Plugin API, but several of the affected types, such as [Paint](https://developers.figma.com/docs/plugins/api/Paint/) and [Effect](https://developers.figma.com/docs/plugins/api/Effect/) , are used for _writing_. In the write path, `boundVariables` is optional. Removing the nullable modifier caused typechecker errors in otherwise valid code. The nullable modifier has been added back in 1.99. Apologies to everyone who encountered difficulties, and apologies to anyone affected by the additional churn from this update! Note that this version only affects TypeScript type definitions. No runtime behavior is affected. We intend to release a typings update in the future that makes `boundVariables` non-nullable in specific situations, but the second attempt will more carefully address the write path. **Note**: The `boundVariables` bugfix in this version caused another typechecker bug. We strongly recommend skipping v1.98. ### Updates[​](https://developers.figma.com/docs/plugins/updates/page/3/#updates "Direct link to Updates") * [`StyledTextSegment`](https://developers.figma.com/docs/plugins/api/StyledTextSegment/) objects now expose [text style overrides](https://developers.figma.com/docs/plugins/api/StyledTextSegment/#textstyleoverrides) . ### Bugfixes[​](https://developers.figma.com/docs/plugins/updates/page/3/#bugfixes "Direct link to Bugfixes") * The [`boundVariables`](https://developers.figma.com/docs/plugins/working-with-variables/#bound-variables) property that appears on many node types has been updated so it is no longer nullable; the `?` annnotation was removed. If no bound variables are defined on a node, `boundVariables` will evaluate to an empty object. New: * [CSS variables](https://developers.figma.com/docs/plugins/css-variables/) docs no longer say that FigJam semantic color tokens are in beta. New: * [DevStatus](https://developers.figma.com/docs/plugins/api/DevStatus/) can take on a new `COMPLETED` value, which indicates that dev work for the design is done * [FigJam](https://developers.figma.com/docs/plugins/working-in-figjam/#pages) can now support multiple pages, and the documentation has been updated accordingly ### Updates[​](https://developers.figma.com/docs/plugins/updates/page/3/#updates "Direct link to Updates") Fix plugin typings bug for prototype expressions. The `ExpressionFunction` enum has been updated to include a previously missing value: `NOT`. ### Updates[​](https://developers.figma.com/docs/plugins/updates/page/3/#updates "Direct link to Updates") Fix plugin typings bug for typography variables. Instances of `keyof Omit` have been updated to `Exclude`, which correctly excludes values from the `VariableBindableTextField` enum. Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Updates | Developer Docs [Skip to main content](https://developers.figma.com/docs/plugins/updates/page/2/#__docusaurus_skipToContent_fallback) We've added a timeout to the `figma.codegen.on` callback. Now, if code generation takes longer than 3 seconds, it will automatically stop and an error message will be displayed in the codegen panel. For more information, see: * [Codegen plugins](https://developers.figma.com/docs/plugins/codegen-plugins/) * [`figma.codegen.on` callback](https://developers.figma.com/docs/plugins/codegen-plugins/) To help developers enhance decks and presentations, Figma Slides now supports plugins! You can use the new API features to effectively enable users to create beautiful, functional slide decks. New: * Figma's Plugin API typings now support Figma Slides. * Figma Slides has four new node types: [SLIDE](https://developers.figma.com/docs/plugins/working-in-slides/#slide) , [SLIDE\_ROW](https://developers.figma.com/docs/plugins/working-in-slides/#slide_row) , [SLIDE\_GRID](https://developers.figma.com/docs/plugins/working-in-slides/#slide_grid) , and [INTERACTIVE\_SLIDE\_ELEMENT](https://developers.figma.com/docs/plugins/working-in-slides/#interactive_slide_element) . * `figma.editorType` can now return `slides` when a plugin is running in Figma Slides. * `figma.viewport.slidesMode` can be used to toggle between `grid` view or `single-slide` view. * `figma.currentPage.focusedSlide` identifies the slide currently focused on in the interface. * `figma.getSlideGrid()` returns the slide grid, a 2D representation of slides within a deck. * `figma.setSlideGrid()` is used to reorder slides in the grid. * `getSlideTransition()` gets the current transition for a given `SLIDE` node. * `setSlideTransition()` is used to set the transition for a given `SLIDE` node. For more information, see the [Working in Slides](https://developers.figma.com/docs/plugins/working-in-slides/) guide. Figma now supports proportional resizing via the `Lock aspect ratio` option. This replaces the legacy `constrainProportions` option. `constrainProportions` maintains backwards compatibility by setting the new [`targetAspectRatio`](https://developers.figma.com/docs/plugins/api/properties/nodes-targetaspectratio/) field, but we encourage you to use the new property. Previously, [createPage](https://developers.figma.com/docs/plugins/api/properties/figma-createpage/) could incorrectly create more pages than supported by Figma's Starter plan. This issue has been fixed. **New**: Figma now supports customizing underlines. The following changes were made to support getting and setting new underline features: * [textDecorationStyle](https://developers.figma.com/docs/plugins/api/TextNode/#textdecorationstyle) , [textDecorationOffset](https://developers.figma.com/docs/plugins/api/TextNode/#textdecorationoffset) , [textDecorationThickness](https://developers.figma.com/docs/plugins/api/TextNode/#textdecorationthickness) , [textDecorationColor](https://developers.figma.com/docs/plugins/api/TextNode/#textdecorationcolor) , and [textDecorationSkipInk](https://developers.figma.com/docs/plugins/api/TextNode/#textdecorationskipink) are now supported on [TextNode](https://developers.figma.com/docs/plugins/api/TextNode/) * Added support for [textDecorationStyle](https://developers.figma.com/docs/plugins/api/TextNode/#textdecorationstyle) , [textDecorationOffset](https://developers.figma.com/docs/plugins/api/TextNode/#textdecorationoffset) , [textDecorationThickness](https://developers.figma.com/docs/plugins/api/TextNode/#textdecorationthickness) , [textDecorationColor](https://developers.figma.com/docs/plugins/api/TextNode/#textdecorationcolor) , and [textDecorationSkipInk](https://developers.figma.com/docs/plugins/api/TextNode/#textdecorationskipink) in [getStyledTextSegments()](https://developers.figma.com/docs/plugins/api/properties/TextNode-getstyledtextsegments/) * Added ranged getters [getRangeTextDecorationStyle()](https://developers.figma.com/docs/plugins/api/node-properties/#getrangetextdecorationstyle) , [getRangeTextDecorationOffset()](https://developers.figma.com/docs/plugins/api/node-properties/#getrangetextdecorationoffset) , [getRangeTextDecorationThickness()](https://developers.figma.com/docs/plugins/api/node-properties/#getrangetextdecorationthickness) , [getRangeTextDecorationColor()](https://developers.figma.com/docs/plugins/api/node-properties/#getrangetextdecorationcolor) , and [getRangeTextDecorationSkipInk()](https://developers.figma.com/docs/plugins/api/node-properties/#getrangetextdecorationskipink) . * Added ranged setters [setRangeTextDecorationStyle()](https://developers.figma.com/docs/plugins/api/node-properties/#setrangetextdecorationstyle) , [setRangeTextDecorationOffset()](https://developers.figma.com/docs/plugins/api/node-properties/#setrangetextdecorationoffset) , [setRangeTextDecorationThickness()](https://developers.figma.com/docs/plugins/api/node-properties/#setrangetextdecorationthickness) , [setRangeTextDecorationColor()](https://developers.figma.com/docs/plugins/api/node-properties/#setrangetextdecorationcolor) , and [setRangeTextDecorationSkipInk()](https://developers.figma.com/docs/plugins/api/node-properties/#setrangetextdecorationskipink) . **New**: Figma now supports per-paragraph fields. The following changes were made to support getting and setting indent and spacing per paragraph: * Added support for [paragraphSpacing](https://developers.figma.com/docs/plugins/api/node-properties/#paragraphspacing) , [paragraphIndent](https://developers.figma.com/docs/plugins/api/node-properties/#paragraphindent) , and [listSpacing](https://developers.figma.com/docs/plugins/api/node-properties/#listspacing) in [getStyledTextSegments()](https://developers.figma.com/docs/plugins/api/properties/TextNode-getstyledtextsegments/) * Added ranged getters [getRangeParagraphSpacing()](https://developers.figma.com/docs/plugins/api/node-properties/#getrangeparagraphspacing) , [getRangeParagraphIndent()](https://developers.figma.com/docs/plugins/api/node-properties/#getrangeparagraphindent) , and [getRangeListSpacing()](https://developers.figma.com/docs/plugins/api/node-properties/#getrangelistspacing) . * Added ranged setters [setRangeParagraphSpacing()](https://developers.figma.com/docs/plugins/api/node-properties/#setrangeparagraphspacing) , [setRangeParagraphIndent()](https://developers.figma.com/docs/plugins/api/node-properties/#setrangeparagraphindent) , and [setRangeListSpacing()](https://developers.figma.com/docs/plugins/api/node-properties/#setrangelistspacing) . * [paragraphSpacing](https://developers.figma.com/docs/plugins/api/node-properties/#paragraphspacing) and [paragraphIndent](https://developers.figma.com/docs/plugins/api/node-properties/#paragraphindent) are now supported on [boundVariables](https://developers.figma.com/docs/plugins/api/node-properties/#boundvariables) **New**: We’ve made updates to our Plugin and REST APIs so you can build more powerful plugins that increase efficiency and create more dynamic user experiences. * **Annotations and measurements**: Create and edit annotations and measurements from Dev Mode through the Plugin API. Generate bulk annotations, format annotations according to a style or template, add context or links from other tools to annotations, and more. Learn more about [annotations](https://developers.figma.com/docs/plugins/api/Annotation/) and [measurements](https://developers.figma.com/docs/plugins/api/Measurement/) . * **Rich text formatting for component description**: Build plugins that can read and edit the full rich-text version of the component description, giving users the same level of detail as Figma's UI. [Learn more](https://developers.figma.com/docs/plugins/working-with-rich-text/) * **Advanced prototyping interactions**: Access all prototyping reactions through the Plugin and REST APIs to bring Figma prototypes to life in other interaction tools. [Learn more](https://developers.figma.com/docs/plugins/api/Reaction/) **New**: The Plugin API now contains support for page dividers: * Create a page divider node appended to the document node's list of children using [createPageDivider](https://developers.figma.com/docs/plugins/api/properties/figma-createpagedivider/) . * Change the [name](https://developers.figma.com/docs/plugins/api/properties/nodes-name/) of an empty [PageNode](https://developers.figma.com/docs/plugins/api/PageNode/) to a page divider name to turn the node into a page divider. * Read a page node's [isPageDivider](https://developers.figma.com/docs/plugins/api/PageNode/#ispagedivider/) property to determine whether the node is a page divider. This version of the plugin-typings package was skipped. New * Component properties ([componentPropertyDefinitions](https://developers.figma.com/docs/plugins/api/ComponentPropertyDefinitions/) , [componentProperties](https://developers.figma.com/docs/plugins/api/ComponentProperties/) ) can now have bound variables for their value! Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Archive | Developer Docs [Skip to main content](https://developers.figma.com/docs/widgets/updates/archive/#__docusaurus_skipToContent_fallback) ### 2025[​](https://developers.figma.com/docs/widgets/updates/archive/#2025 "Direct link to 2025") * [June 13 - Version 1, Update 12](https://developers.figma.com/docs/widgets/updates/2025/06/13/) ### 2024[​](https://developers.figma.com/docs/widgets/updates/archive/#2024 "Direct link to 2024") * [September 16 - Version 1.9.2](https://developers.figma.com/docs/widgets/updates/2024/09/16/) * [September 27 - Updates for 2024-09-27](https://developers.figma.com/docs/widgets/updates/2024/09/27/) * [December 19 - Updates for 2024-12-19](https://developers.figma.com/docs/widgets/updates/2024/12/19/) ### 2023[​](https://developers.figma.com/docs/widgets/updates/archive/#2023 "Direct link to 2023") * [May 10 - Version 1, Update 7](https://developers.figma.com/docs/widgets/updates/2023/05/10/) * [August 10 - Version 1, Update 8](https://developers.figma.com/docs/widgets/updates/2023/08/10/) * [September 21 - Version 1, Update 9](https://developers.figma.com/docs/widgets/updates/2023/09/21/) * [September 26 - Version 1.9.1](https://developers.figma.com/docs/widgets/updates/2023/09/26/) ### 2022[​](https://developers.figma.com/docs/widgets/updates/archive/#2022 "Direct link to 2022") * [April 6 - Version 1, Update 2](https://developers.figma.com/docs/widgets/updates/2022/04/06/) * [April 28 - Version 1, Update 3](https://developers.figma.com/docs/widgets/updates/2022/04/28/) * [May 18 - Version 1, Update 4](https://developers.figma.com/docs/widgets/updates/2022/05/18/) * [July 13 - Version 1, Update 5](https://developers.figma.com/docs/widgets/updates/2022/07/13/) * [October 10 - Version 1, Update 6](https://developers.figma.com/docs/widgets/updates/2022/10/10/) ### 2021[​](https://developers.figma.com/docs/widgets/updates/archive/#2021 "Direct link to 2021") * [December 8 - Version 1, Update 1](https://developers.figma.com/docs/widgets/updates/2021/12/08/) Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Updates | Developer Docs [Skip to main content](https://developers.figma.com/docs/plugins/updates/page/4/#__docusaurus_skipToContent_fallback) ### New[​](https://developers.figma.com/docs/plugins/updates/page/4/#new "Direct link to New") [VariableScopes](https://developers.figma.com/docs/plugins/api/VariableScope/) now have support for typography variables: * `STRING` variable scopes: `FONT_FAMILY`, `FONT_STYLE`, `TEXT_CONTENT` * `FLOAT` variable scopes: `FONT_SIZE`, `LINE_HEIGHT`, `LETTER_SPACING`, `PARAGRAPH_SPACING`, `PARAGRAPH_INDENT` ### New[​](https://developers.figma.com/docs/plugins/updates/page/4/#new "Direct link to New") * Prototyping reactions now support [actions](https://developers.figma.com/docs/plugins/api/Action/) of type ['SET\_VARIABLE\_MODE'](https://developers.figma.com/docs/plugins/api/Action/#set_variable_mode-action) , which sets the page-level mode for the specified collection. ### New[​](https://developers.figma.com/docs/plugins/updates/page/4/#new "Direct link to New") * [Paint.ColorStop](https://developers.figma.com/docs/plugins/api/Paint/#colorstop) now has a new field `boundVariables` that contains a `color` field and denotes whether a variable is bound to a gradient color stop. ### Updates:[​](https://developers.figma.com/docs/plugins/updates/page/4/#updates "Direct link to Updates:") * Fix plugin typings bug where `figma.constants.colors` does not exist. This object, which remains exactly the same in the API, defines color palettes. We currently support the official FigJam colors, which can be found on this [Figma Learn](https://help.figma.com/hc/en-us/articles/1500004291341-Apply-colors-in-FigJam) page. * Added type `ColorPalettes` to hold all the available `ColorPalette` objects With the launch of typography variables, the plugin API now supports getting and setting bound variables for text properties like font family, font style, font weight, and more. Please refer to the [Working with Variables](https://developers.figma.com/docs/plugins/working-with-variables/#typography-variables) guide for how to use the variables API to control typography in Figma files. **New:** * [`node.getRangeBoundVariable`](https://developers.figma.com/docs/plugins/api/node-properties/#getrangeboundvariable) and [`node.setRangeBoundVariable`](https://developers.figma.com/docs/plugins/api/node-properties/#setrangeboundvariable) for getting and setting bound variables on text ranges. **Updated:** * [`node.boundVariables`](https://developers.figma.com/docs/plugins/api/node-properties/#boundvariables) now includes bindable text fields. * [`node.setBoundVariable`](https://developers.figma.com/docs/plugins/api/node-properties/#setboundvariable) can bind variables to text fields for the full text range in a text node. * The above changes also apply to [`TextStyle`](https://developers.figma.com/docs/plugins/api/TextStyle/) . * Styled text segments from [`node.getStyledTextSegments`](https://developers.figma.com/docs/plugins/api/properties/TextNode-getstyledtextsegments/) now include bound variables for text fields to let you easily identify bindings across segments of text in a text node. ### New[​](https://developers.figma.com/docs/plugins/updates/page/4/#new "Direct link to New") * Private beta only: [Annotation.properties](https://developers.figma.com/docs/plugins/api/Annotation/) can now contain a new value - `fontStyle`. * Adds a missing `openTypeFeatures` entry to the list of properties that may be reported in documentchange or nodechange events. [See NodeChangeProperty](https://developers.figma.com/docs/plugins/api/NodeChangeProperty/) . * Fix invalid manifest examples for `networkAccess` in the plugin and widget docs. ### New[​](https://developers.figma.com/docs/plugins/updates/page/4/#new "Direct link to New") * [DocumentNode.findWidgetNodesByWidgetId](https://developers.figma.com/docs/plugins/api/properties/DocumentNode-findwidgetnodesbywidgetid/) was previously undocumented, and has since been added to the documentation and type definitions. APIs for dynamic page loading[​](https://developers.figma.com/docs/plugins/updates/page/4/#apis-for-dynamic-page-loading "Direct link to APIs for dynamic page loading") ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Over the past few months, Figma has been rolling out dynamic page loading, which allows documents to load pages on demand, rather than all at once. For backward compatibility, Figma loads all pages in the document before attempting to run an extension (a plugin or widget), which can sometimes result in a noticeable delay. We're pleased to announce a new set of APIs that allow extensions to work safely with dynamic page loading, and avoid triggering the loading delay. Alongside these new APIs, we are deprecating several existing methods and properties. This will help to ensure that new extensions will be compatible with dynamic page loading by default. To mark an extension as compatible with dynamic page loading, add `"documentAccess": "dynamic-page"` to `manifest.json`. Extensions with this manifest field will not encounter loading delays, but they'll be unable to access any of the deprecated methods and properties listed below. New extensions will include this manifest field by default. To learn more about updating your extension, see our [comprehensive migration guide](https://developers.figma.com/docs/plugins/migrating-to-dynamic-loading/) . For TypeScript users, we've also provided an [ESLint plugin](https://github.com/figma/eslint-plugin-figma-plugins) that can help identify and automatically fix callsites that need to be updated. ### Timeline[​](https://developers.figma.com/docs/plugins/updates/page/4/#timeline "Direct link to Timeline") As of February 21st, dynamic page loading APIs are generally available (GA). You can update **existing extensions** and create **new extensions** using the dynamic page loading APIs and the manifest field `"documentAccess": "dynamic-page"`. Starting in April, the manifest field `"documentAccess": "dynamic-page"` will be required for **all widgets**, and **all new plugins**. ### Net-new methods[​](https://developers.figma.com/docs/plugins/updates/page/4/#net-new-methods "Direct link to Net-new methods") * [figma.loadAllPagesAsync()](https://developers.figma.com/docs/plugins/api/figma/#loadallpagesasync) * [figma.variables.createVariableAliasByIdAsync()](https://developers.figma.com/docs/plugins/api/figma-variables/#createvariablealiasbyidasync) * [PageNode.loadAsync()](https://developers.figma.com/docs/plugins/api/PageNode/#loadasync) ### Deprecations and replacements[​](https://developers.figma.com/docs/plugins/updates/page/4/#deprecations-and-replacements "Direct link to Deprecations and replacements") Several methods and properties have been deprecated in favor of `async` replacements: * Use [`figma.getFileThumbnailNodeAsync()`](https://developers.figma.com/docs/plugins/api/figma/#getfilethumbnailnodeasync) instead of [`figma.getFileThumbnailNode()`](https://developers.figma.com/docs/plugins/api/figma/#getfilethumbnailnode) . * Use [`figma.getLocalEffectStylesAsync()`](https://developers.figma.com/docs/plugins/api/figma/#getlocaleffectstylesasync) instead of [`figma.getLocalEffectStyles()`](https://developers.figma.com/docs/plugins/api/figma/#getlocaleffectstyles) . * Use [`figma.getLocalGridStylesAsync()`](https://developers.figma.com/docs/plugins/api/figma/#getlocalgridstylesasync) instead of [`figma.getLocalGridStyles()`](https://developers.figma.com/docs/plugins/api/figma/#getlocalgridstyles) . * Use [`figma.getLocalPaintStylesAsync()`](https://developers.figma.com/docs/plugins/api/figma/#getlocalpaintstylesasync) instead of [`figma.getLocalPaintStyles()`](https://developers.figma.com/docs/plugins/api/figma/#getlocalpaintstyles) . * Use [`figma.getLocalTextStylesAsync()`](https://developers.figma.com/docs/plugins/api/figma/#getlocaltextstylesasync) instead of [`figma.getLocalTextStyles()`](https://developers.figma.com/docs/plugins/api/figma/#getlocaltextstyles) . * Use [`figma.getNodeByIdAsync()`](https://developers.figma.com/docs/plugins/api/figma/#getnodebyidasync) instead of [`figma.getNodeById()`](https://developers.figma.com/docs/plugins/api/figma/#getnodebyid) . * Use [`figma.getStyleByIdAsync()`](https://developers.figma.com/docs/plugins/api/figma/#getstylebyidasync) instead of [`figma.getStyleById()`](https://developers.figma.com/docs/plugins/api/figma/#getstylebyid) . * Use [`figma.variables.getLocalVariableCollectionsAsync()`](https://developers.figma.com/docs/plugins/api/figma-variables/#getlocalvariablecollectionsasync) instead of [`figma.variables.getLocalVariableCollections()`](https://developers.figma.com/docs/plugins/api/figma-variables/#getlocalvariablecollections) . * Use [`figma.variables.getLocalVariablesAsync()`](https://developers.figma.com/docs/plugins/api/figma-variables/#getlocalvariablesasync) instead of [`figma.variables.getLocalVariables()`](https://developers.figma.com/docs/plugins/api/figma-variables/#getlocalvariables) . * Use [`figma.variables.getVariableByIdAsync()`](https://developers.figma.com/docs/plugins/api/figma-variables/#getvariablebyidasync) instead of [`figma.variables.getVariableById()`](https://developers.figma.com/docs/plugins/api/figma-variables/#getvariablebyid) . * Use [`figma.variables.getVariableCollectionByIdAsync()`](https://developers.figma.com/docs/plugins/api/figma-variables/#getvariablecollectionbyidasync) instead of [`figma.variables.getVariableCollectionById()`](https://developers.figma.com/docs/plugins/api/figma-variables/#getvariablecollectionbyid) . * Use [`setRangeFillStyleIdAsync()`](https://developers.figma.com/docs/plugins/api/node-properties/#setrangefillstyleidasync) instead of [`setRangeFillStyleId()`](https://developers.figma.com/docs/plugins/api/node-properties/#setrangefillstyleid) . * Use [`setRangeTextStyleIdAsync()`](https://developers.figma.com/docs/plugins/api/node-properties/#setrangetextstyleidasync) instead of [`setRangeTextStyleId()`](https://developers.figma.com/docs/plugins/api/node-properties/#setrangetextstyleid) . In some specific cases, reading node properties has been deprecated in favor of an `async` getter: * Use [`ComponentNode.getInstancesAsync()`](https://developers.figma.com/docs/plugins/api/ComponentNode/#getinstancesasync) instead of [`ComponentNode.instances`](https://developers.figma.com/docs/plugins/api/ComponentNode/#instances) . * Use [`getStyleConsumersAsync()`](https://developers.figma.com/docs/plugins/api/BaseStyle/#getstyleconsumersasync) instead of the [`consumers`](https://developers.figma.com/docs/plugins/api/BaseStyle/#consumers) . * Use [`InstanceNode.getMainComponentAsync()`](https://developers.figma.com/docs/plugins/api/InstanceNode/#getmaincomponentasync) instead of [`InstanceNode.mainComponent`](https://developers.figma.com/docs/plugins/api/InstanceNode/#maincomponent) . In some specific cases, assigning values directly to node properties has been deprecated in favor of an `async` setter: * Use [`figma.setCurrentPageAsync()`](https://developers.figma.com/docs/plugins/api/figma/#setcurrentpageasync) instead of assigning to [`figma.currentPage`](https://developers.figma.com/docs/plugins/api/figma/#currentpage) . * Use [`setEffectStyleIdAsync()`](https://developers.figma.com/docs/plugins/api/node-properties/#seteffectstyleidasync) instead of assigning to [`effectStyleId`](https://developers.figma.com/docs/plugins/api/node-properties/#effectstyleid) . * Use [`setFillStyleIdAsync()`](https://developers.figma.com/docs/plugins/api/node-properties/#setfillstyleidasync) instead of assigning to [`backgroundStyleId`](https://developers.figma.com/docs/plugins/api/node-properties/#backgroundstyleid) . * Use [`setFillStyleIdAsync()`](https://developers.figma.com/docs/plugins/api/node-properties/#setfillstyleidasync) instead of assigning to [`fillStyleId`](https://developers.figma.com/docs/plugins/api/node-properties/#fillstyleid) . * Use [`setGridStyleIdAsync()`](https://developers.figma.com/docs/plugins/api/node-properties/#setgridstyleidasync) instead of assigning to [`gridStyleId`](https://developers.figma.com/docs/plugins/api/node-properties/#gridstyleid) . * Use [`setReactionsAsync()`](https://developers.figma.com/docs/plugins/api/node-properties/#setreactionsasync) instead of assigning to [`reactions`](https://developers.figma.com/docs/plugins/api/node-properties/#reactions) . * Use [`setStrokeStyleIdAsync()`](https://developers.figma.com/docs/plugins/api/node-properties/#setstrokestyleidasync) instead of assigning to [`strokeStyleId`](https://developers.figma.com/docs/plugins/api/node-properties/#strokestyleid) . * Use [`setVectorNetworkAsync()`](https://developers.figma.com/docs/plugins/api/node-properties/#setvectornetworkasync) instead of assigning to [`vectorNetwork`](https://developers.figma.com/docs/plugins/api/node-properties/#vectornetwork) . * Use [`TextNode.setTextStyleIdAsync()`](https://developers.figma.com/docs/plugins/api/TextNode/#settextstyleidasync) instead of assigning to [`TextNode.textStyleId`](https://developers.figma.com/docs/plugins/api/TextNode/#textstyleid) . If an extension's manifest contains `"documentAccess": "dynamic-page"`, accessing any of the deprecated items listed above will throw an exception. ### Method/property usage changes[​](https://developers.figma.com/docs/plugins/updates/page/4/#methodproperty-usage-changes "Direct link to Method/property usage changes") If an extension's manifest contains `"documentAccess": "dynamic-page"`, calling any of the following methods will throw an exception unless you first call [figma.loadAllPagesAsync()](https://developers.figma.com/docs/plugins/api/figma/#loadallpagesasync) : * [`DocumentNode.findAll()`](https://developers.figma.com/docs/plugins/api/DocumentNode/#findall) * [`DocumentNode.findAllWithCriteria()`](https://developers.figma.com/docs/plugins/api/DocumentNode/#findallwithcriteria) * [`DocumentNode.findOne()`](https://developers.figma.com/docs/plugins/api/DocumentNode/#findone) * [`DocumentNode.findWidgetNodesByWidgetId()`](https://developers.figma.com/docs/plugins/api/DocumentNode/#findwidgetnodesbywidgetid) For the methods listed below, passing a string ID is now deprecated in favor of passing objects that the IDs refer to. If an extension's manifest contains `"documentAccess": "dynamic-page"`, passing an ID will throw an exception. * [`figma.variables.createVariable()`](https://developers.figma.com/docs/plugins/api/figma-variables/#createvariable) - Pass a [`VariableCollection`](https://developers.figma.com/docs/plugins/api/VariableCollection/) object instead of a collection ID. * [`clearExplicitVariableModeForCollection()`](https://developers.figma.com/docs/plugins/api/node-properties/#clearexplicitvariablemodeforcollection) (present on multiple node types) - Pass a [`VariableCollection`](https://developers.figma.com/docs/plugins/api/VariableCollection/) object instead of a collection ID. * [`setExplicitVariableModeForCollection()`](https://developers.figma.com/docs/plugins/api/node-properties/#setexplicitvariablemodeforcollection) (present on multiple node types) - Pass a [`VariableCollection`](https://developers.figma.com/docs/plugins/api/VariableCollection/) object instead of a collection ID. * [`setBoundVariable()`](https://developers.figma.com/docs/plugins/api/node-properties/#setboundvariable) (present on multiple node types) - Pass a [`Variable`](https://developers.figma.com/docs/plugins/api/Variable/) object instead of a variable ID. If an extension's manifest contains `"documentAccess": "dynamic-page"`, some properties and methods of [`PageNode`](https://developers.figma.com/docs/plugins/api/PageNode/) will throw an exception unless you explicitly load the page first using [`PageNode.loadAsync()`](https://developers.figma.com/docs/plugins/api/PageNode/#loadasync) . These include: * [`PageNode.appendChild()`](https://developers.figma.com/docs/plugins/api/PageNode/#appendchild) * [`PageNode.exportAsync`](https://developers.figma.com/docs/plugins/api/PageNode/#exportasync) * [`PageNode.findAll()`](https://developers.figma.com/docs/plugins/api/PageNode/#findall) * [`PageNode.findAllWithCriteria()`](https://developers.figma.com/docs/plugins/api/PageNode/#findallwithcriteria) * [`PageNode.findChild()`](https://developers.figma.com/docs/plugins/api/PageNode/#findchild) * [`PageNode.findChildren()`](https://developers.figma.com/docs/plugins/api/PageNode/#findchildren) * [`PageNode.findOne()`](https://developers.figma.com/docs/plugins/api/PageNode/#findone) * [`PageNode.findWidgetNodesByWidgetId()`](https://developers.figma.com/docs/plugins/api/PageNode/#findwidgetnodesbywidgetid) * [`PageNode.insertChild()`](https://developers.figma.com/docs/plugins/api/PageNode/#insertchild) ### Changes to events[​](https://developers.figma.com/docs/plugins/updates/page/4/#changes-to-events "Direct link to Changes to events") * If an extension's manifest contains `"documentAccess": "dynamic-page"`, the [`documentchange`](https://developers.figma.com/docs/plugins/api/properties/figma-on/#documentchange) event will not be available unless you first call [`figma.loadAllPagesAsync()`](https://developers.figma.com/docs/plugins/api/figma/#loadallpagesasync) . * Where possible, prefer using the [`nodechange`](https://developers.figma.com/docs/plugins/api/PageNode/#on) and [`stylechange`](https://developers.figma.com/docs/plugins/api/properties/figma-on/#stylechange) events, which do not require triggering a full-document load. **New**: * Add a [`figma.createComponentFromNode`](https://developers.figma.com/docs/plugins/api/properties/figma-createcomponentfromnode/) function to create a component from an existing node, preserving all of its properties and children. **New**: * Measurements can be added to pin distances between nodes in Dev Mode. See [Measurement](https://developers.figma.com/docs/plugins/api/Measurement/) . * Private beta only: annotations can be set on nodes to leave notes and pin properties in Dev Mode. See [Annotation](https://developers.figma.com/docs/plugins/api/Annotation/) . More details on the public beta release of these APIs will be announced soon. Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Updates | Developer Docs [Skip to main content](https://developers.figma.com/docs/widgets/updates/#__docusaurus_skipToContent_fallback) **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`](https://developers.figma.com/docs/widgets/api/type-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](https://developers.figma.com/docs/plugins/updates/2024/02/21/version-1-update-87/#apis-for-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](https://developers.figma.com/docs/plugins/migrating-to-dynamic-loading/) . 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](https://developers.figma.com/docs/widgets/api/properties/widget-colormaptooptions/) , which takes in a [ColorPalette](https://developers.figma.com/docs/plugins/api/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](https://developers.figma.com/docs/widgets/widget-manifest/#networkaccess) . 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](https://developers.figma.com/docs/widgets/api/component-AutoLayout/) component has a couple of property changes: * The [spacing](https://developers.figma.com/docs/widgets/api/component-AutoLayout/#spacing) property now accepts a [LayoutGap](https://developers.figma.com/docs/widgets/api/type-LayoutGap/) object, which allows you to specify a horizontal or vertical gap. * A new [wrap](https://developers.figma.com/docs/widgets/api/component-AutoLayout/#wrap) property allows you to enable wrapping. * The [Text](https://developers.figma.com/docs/widgets/api/component-Text/) component has a new [truncate](https://developers.figma.com/docs/widgets/api/component-Text/#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)](https://developer.mozilla.org/en-US/docs/Web/HTTP/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](https://developers.figma.com/docs/widgets/how-widgets-run/) * [Making Network Requests](https://developers.figma.com/docs/widgets/making-network-requests/) * [Widget Manifest](https://developers.figma.com/docs/widgets/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`](https://developers.figma.com/docs/widgets/widget-manifest/) file. * There are two new property menu options for [`usePropertyMenu`](https://developers.figma.com/docs/widgets/api/properties/widget-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`](https://developers.figma.com/docs/widgets/api/component-Span/) component that lets you style inline ranges of text inside of a [`Text`](https://developers.figma.com/docs/widgets/api/component-Text/) component. Span example Hello{' '} World d Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Updates | Developer Docs [Skip to main content](https://developers.figma.com/docs/plugins/updates/page/7/#__docusaurus_skipToContent_fallback) New: * Added method [`figma.payments.getPluginPaymentTokenAsync`](https://developers.figma.com/docs/plugins/api/figma-payments/#getpluginpaymenttokenasync) to generate secure payment tokens for use in the [Payments REST API](https://developers.figma.com/docs/rest-api/payments/) . New: * [node.exportAsync](https://developers.figma.com/docs/plugins/api/properties/nodes-exportasync/) can now export directly to an SVG string, e.g. `vector.exportAsync({ format: 'SVG_STRING' })`. * Add `'PLAINTEXT'` to [code block languages](https://developers.figma.com/docs/plugins/api/CodeBlockNode/#codelanguage) We now have plugin support for the text improvements launched with Little Big Updates! New: * [leadingTrim](https://developers.figma.com/docs/plugins/api/TextNode/#leadingtrim) text property. * [hangingPunctuation](https://developers.figma.com/docs/plugins/api/TextNode/#hangingpunctuation) to hang punctuation outside of text box. * [hangingList](https://developers.figma.com/docs/plugins/api/TextNode/#hanginglist) to hang ordered list counters and unordered list bullets outside of text box. We're introducing plugin support for tables in FigJam! New: * [TableNode](https://developers.figma.com/docs/plugins/api/TableNode/) type. Create a TableNode with [createTable](https://developers.figma.com/docs/plugins/api/properties/figma-createtable/) Following up on the [new video functionality](https://help.figma.com/hc/en-us/articles/8878274530455#Prototype_with_video) recently added for prototyping, we have added some updates to our video plugin APIs, which include: * New `ON_MEDIA_HIT` and `ON_MEDIA_END` [prototyping triggers](https://developers.figma.com/docs/plugins/api/Trigger/) that fire when a video hits a certain timestamp and ends, respectively * Added support for [prototyping actions](https://developers.figma.com/docs/plugins/api/Action/) on the same Frame node as an existing [prototyping trigger](https://developers.figma.com/docs/plugins/api/Trigger/) * New `MUTE`, `UNMUTE`, and `TOGGLE_MUTE_UNMUTE` prototyping actions [prototyping actions](https://developers.figma.com/docs/plugins/api/Action/) * [`figma.createVideoAsync`](https://developers.figma.com/docs/plugins/api/properties/figma-createvideoasync/) now supports .MOV and .WebM videos up to 100MB in size. As part of our launch to allow creators to sell resources directly on Figma Community, we're releasing a [Payments API](https://developers.figma.com/docs/plugins/api/figma-payments/) . This API will allow you to create custom time or usage-based free trials for plugins and widgets. You can use this API to: * Read metadata about a user’s payment status and usage of your resource * Kick off a checkout flow so a user can pay for your resource For more information on requiring payment in your plugins and widgets, please read [this guide](https://developers.figma.com/docs/plugins/requiring-payment/) . New: * [componentPropertyReferences](https://developers.figma.com/docs/plugins/api/node-properties/#componentpropertyreferences) now also apply to instance sublayers. For applicable instance sublayers, these will match the corresponding layer on the instance's main component. New: * New method [createImageAsync](https://developers.figma.com/docs/plugins/api/properties/figma-createimageasync/) to create an image from a url string. * Add new field [consumers](https://developers.figma.com/docs/plugins/api/BaseStyle/#consumers) to `BaseStyle`, which refers to the field where the style is applied. Updates to [fetch](https://developers.figma.com/docs/plugins/api/properties/global-fetch/) : * Add `headers` property to fetch request. * Add `json` method to fetch response. * `body` can now take a string. In tandem with our launch of spell check in Figma and FigJam, we are adding support for text review plugins! A text review plugin is a plugin that can extend or replace the native spell check functionality to do things like grammar checking and brand guideline checking, or even check spelling in languages Figma doesn't support. And something unique about text review plugins compared to other plugins is that they start automatically anytime a user starts editing text in a document. This comes with a few new APIs: * [`figma.on('textreview')`](https://developers.figma.com/docs/plugins/api/properties/figma-on/#textreview) listeners to suggest corrections while a user types * The [`figma.textreview`](https://developers.figma.com/docs/plugins/api/figma-textreview/) object that has methods to manage if the plugin is enabled for text review by the user. For more information on writing a text review plugin see [our guide](https://developers.figma.com/docs/plugins/textreview-plugins/) . Other enhancements: * Add [`absoluteBoundingBox`](https://developers.figma.com/docs/plugins/api/node-properties/#absoluteboundingbox) property to `SectionNode`, `StickyNode`, `ShapeWithTextNode`, `CodeBlockNode`, `ConnectorNode`, `EmbedNode`, `LinkUnfurlNode`, `MediaNode`, and `WidgetNode` New: * Added support for variant properties in [`addComponentProperty`](https://developers.figma.com/docs/plugins/api/node-properties/#addcomponentproperty) * Added a global [`fetch`](https://developers.figma.com/docs/plugins/api/properties/global-fetch/) async function which closely mimics the browser API * Node `strokeWeight` can [now return `figma.mixed`](https://developers.figma.com/docs/plugins/api/node-properties/#strokeweight) Fixed: * [HyperlinkTarget](https://developers.figma.com/docs/plugins/api/HyperlinkTarget/) now works with more than just regular frames when using type `NODE`. For example, you can link to `SECTION`, `SYMBOL` and `INSTANCE` nodes too. The existing restriction where you can't link to a sublayer of an instance still applies. Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Updates | Developer Docs [Skip to main content](https://developers.figma.com/docs/plugins/updates/page/9/#__docusaurus_skipToContent_fallback) New: * Added new `CIRCLE_FILLED` option to the [`ConnectorStrokeCap`](https://developers.figma.com/docs/plugins/api/ConnectorStrokeCap/) type. New: * New [`.stuckNodes`](https://developers.figma.com/docs/plugins/api/StickyNode/#stucknodes) and [`.stuckTo`](https://developers.figma.com/docs/plugins/api/StampNode/#stuckto) properties to read the nodes that are stuck on the reference node as well as the node current stuck to. * `.stuckNodes` is available on all `SceneNode` * `.stuckTo` is only available on “stickable” nodes (eg. [`StampNode`](https://developers.figma.com/docs/plugins/api/StampNode/) , [`WidgetNode`](https://developers.figma.com/docs/plugins/api/WidgetNode/) , [`HighlightNode`](https://developers.figma.com/docs/plugins/api/HighlightNode/) ) * Added typings for [`HighlightNode`](https://developers.figma.com/docs/plugins/api/HighlightNode/) and [`WashiTapeNode`](https://developers.figma.com/docs/plugins/api/WashiTapeNode/) . New: * [`VectorRegion`](https://developers.figma.com/docs/plugins/api/VectorNetwork/#vectorregion) s inside a `VectorNetwork` now have new `fills` and `fillStyleId` properties to let you get and set unique fills for each region in a vector network. New: * Added [`node.getStyledTextSegments`](https://developers.figma.com/docs/plugins/api/properties/TextNode-getstyledtextsegments/) for text nodes to make it much faster and easier to get text properties which may have mixed values, along with which characters these values apply to. Compared to retrieving text properties character-by-character, this new function can be 10x to 500x faster. * Drop events in [`figma.on`](https://developers.figma.com/docs/plugins/api/properties/figma-on/#drop) are now officially supported (was previously a [proposed API](https://developers.figma.com/docs/plugins/proposed-api/) ). This new API allows you to register a callback for drop events, which will trigger when objects outside Figma (such as elements from other browser windows, or files from the local filesystem) are dropped onto the canvas. * Added [`prototypeBackgrounds`](https://developers.figma.com/docs/plugins/api/PageNode/#prototypebackgrounds) property to PageNode for configuring the background color of the prototype. * Added [`figma.getFileThumbnailNode()`](https://developers.figma.com/docs/plugins/api/figma/#getfilethumbnailnode) and [`figma.setFileThumbnailNodeAsync(node)`](https://developers.figma.com/docs/plugins/api/figma/#setfilethumbnailnodeasync) to get and set the thumbnail node for the current file. * Added [`figma.base64Encode`](https://developers.figma.com/docs/plugins/api/figma/#base64encode) and [`figma.base64Decode`](https://developers.figma.com/docs/plugins/api/figma/#base64decode) to convert between base64-encoded strings and `Uint8Array`s New: * Added [`figma.skipInvisibleInstanceChildren`](https://developers.figma.com/docs/plugins/api/properties/figma-skipinvisibleinstancechildren/) to make all node properties and methods skip over invisible nodes (and their descendants) inside instances. This can make operations like document traversal much faster. * Added [`node.findAllWithCriteria`](https://developers.figma.com/docs/plugins/api/properties/nodes-findallwithcriteria/) for much faster document traversal when searching by node types. The return value is narrowly typed to match the provided types, which makes it much easier to use node-type-specific properties. For example, `node.findAllWithCriteria({ types: ['TEXT'] })` will return `TextNode[]` instead of the more generic `SceneNode[]` from [`findAll`](https://developers.figma.com/docs/plugins/api/properties/nodes-findall/) . * Added ability to enumerate plugin-data stored on a node: * [`node.getPluginDataKeys()`](https://developers.figma.com/docs/plugins/api/RectangleNode/#getplugindatakeys) Allows enumeration of plugin-data stored on a node * [`node.getSharedPluginDataKeys(namespace)`](https://developers.figma.com/docs/plugins/api/RectangleNode/#getsharedplugindatakeys) Allows enumeration of shared plugin-data stored on a node in a given namespace * Style objects now support all plugin-data functionality * New functionality for the [`clientStorage`](https://developers.figma.com/docs/plugins/api/figma-clientStorage/) API * [`deleteAsync`](https://developers.figma.com/docs/plugins/api/figma-clientStorage/#deleteasync) allows deleting stored data * [`keysAsync`](https://developers.figma.com/docs/plugins/api/figma-clientStorage/#keysasync) allows enumerating all stored data * [`node.getRelaunchData`](https://developers.figma.com/docs/plugins/api/RectangleNode/#getrelaunchdata) allows reading what relaunch data was stored using [`node.setRelaunchData`](https://developers.figma.com/docs/plugins/api/RectangleNode/#setrelaunchdata) New: * Updated [`WidgetNode.cloneWidget`](https://developers.figma.com/docs/plugins/api/properties/WidgetNode-clonewidget/) to support overriding synced maps. * Added [`WidgetNode.widgetId`](https://developers.figma.com/docs/plugins/api/WidgetNode/#widgetid) to provide a way to tell if a widget node belongs to your widget. * Added [`figma.pluginId`](https://developers.figma.com/docs/plugins/api/figma/#pluginid) and [`figma.widgetId`](https://developers.figma.com/docs/plugins/api/figma/#widgetid) for Plugins and Widgets respectively to get the value of the `manifest.json` "id" field at runtime. This is useful when paired with various WidgetNode apis as well as working with [non-null origin iframes](https://developers.figma.com/docs/plugins/creating-ui/#non-null-origin-iframes) . * Updated [`figma.showUI`](https://developers.figma.com/docs/plugins/api/properties/figma-showui/) to allow iframes to be positioned within the canvas at a specified x/y coordinate. If the position specified is outside of the user's viewport, the iframe will be moved so that it remains in the user's viewport. * Added [`createLinkPreviewAsync`](https://developers.figma.com/docs/plugins/api/properties/figma-createlinkpreviewasync/) which allows Plugin authors to create a link preview from the provided URL. * Added [`EmbedNode`](https://developers.figma.com/docs/plugins/api/EmbedNode/) and [`LinkUnfurlNode`](https://developers.figma.com/docs/plugins/api/LinkUnfurlNode/) which represent link previews * Add support for drop events in [`figma.on`](https://developers.figma.com/docs/plugins/api/properties/figma-on/#drop) as a [proposed API](https://developers.figma.com/docs/plugins/proposed-api/) . Drop events will trigger when objects outside Figma (such as elements from other browser windows, or files from the local filesystem) are dropped onto the canvas. > NOTE: These APIs is only available in FigJam New: * Added `getPluginData`, `setPluginData` and other pluginData related methods on [`WidgetNode`](https://developers.figma.com/docs/plugins/api/WidgetNode/) * Added `exportSettings` and `exportAsync` on [`WidgetNode`](https://developers.figma.com/docs/plugins/api/WidgetNode/) * Added [`CodeBlockNode`](https://developers.figma.com/docs/plugins/api/CodeBlockNode/) type. Create a code block with [`figma.createCodeBlock`](https://developers.figma.com/docs/plugins/api/figma/#createcodeblock) New: * Added `absoluteRenderBounds` property for nodes to calculate the actual bounds of a node accounting for drop shadows, thick strokes, and anything else that may fall outside the node's regular bounding box defined in `x`, `y`, `width`, and `height`. * Added `fillGeometry` and `strokeGeometry` properties for nodes with shapes ([VectorNode](https://developers.figma.com/docs/plugins/api/VectorNode/) , [PolygonNode](https://developers.figma.com/docs/plugins/api/PolygonNode/) , etc...) to expose paths for object fills and strokes. Bug Fixes: * Fix bug in [figma.showUI](https://developers.figma.com/docs/plugins/api/properties/figma-showui/) that allowed plugins to open very small modals hiding the plugin icon and close button. The new minimum dimensions for the plugin UI is 70x0. New: * Added `figma.currentUser` and `figma.activeUsers`, which can be viewed in [figma api](https://developers.figma.com/docs/plugins/api/figma/) * Added [WidgetNode](https://developers.figma.com/docs/plugins/api/WidgetNode/) , which represents a widget in FigJam * Added `position` option to [showUI](https://developers.figma.com/docs/plugins/api/properties/figma-showui/) New: * Added [saveVersionHistoryAsync()](https://developers.figma.com/docs/plugins/api/figma/#saveversionhistoryasync) , which allows your plugin to manually add a checkpoint to the version history Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Updates | Developer Docs [Skip to main content](https://developers.figma.com/docs/widgets/updates/page/2/#__docusaurus_skipToContent_fallback) * We added a new [`positioning`](https://developers.figma.com/docs/widgets/api/component-Frame/#positioning) to support absolutely positioned [AutoLayout](https://developers.figma.com/docs/widgets/api/component-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`](https://developers.figma.com/docs/widgets/api/type-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`](https://developers.figma.com/docs/plugins/api/WidgetNode/) . For more information see: [Plugin API Version 1, Update 46](https://developers.figma.com/docs/plugins/updates/2022/05/04/version-1-update-46/) . * We've extended the [``](https://developers.figma.com/docs/widgets/api/component-Line/) component with a [`strokeCap`](https://developers.figma.com/docs/widgets/api/component-Line/#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`](https://developers.figma.com/docs/widgets/api/component-AutoLayout/#strokedashpattern) prop. This will give components a dashed stroke with the dash/gap lengths passed in. * We've added [`showShadowBehindNode`](https://developers.figma.com/docs/widgets/api/type-Effect/#showshadowbehindnode) to the [`DropShadowEffect`](https://developers.figma.com/docs/widgets/api/type-Effect/#dropshadoweffect) type, which controls whether drop shadows will be visible behind transparent layers. Bug fixes: * Fixed a bug where the `spread` prop in [`ShadowEffect`](https://developers.figma.com/docs/widgets/api/type-Effect/#spread) wasn't being mapped to the resulting shadow on the canvas. * We’re introducing a new [`` component](https://developers.figma.com/docs/widgets/text-editing/) that lets users edit text directly in your widget. * We’re introducing 2 new hooks [`useStickable`](https://developers.figma.com/docs/widgets/api/properties/widget-usestickable/) and [`useStickableHost`](https://developers.figma.com/docs/widgets/api/properties/widget-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](https://developers.figma.com/docs/widgets/undo-redo/) . * Image URLs passed to [``](https://developers.figma.com/docs/widgets/api/component-Image/) no longer require CORs headers, any image URL just works! * Widgets now support [JSX fragments](https://developers.figma.com/docs/widgets/api/component-Fragment/) ! You'll need to update your [tsconfig.json](https://developers.figma.com/docs/widgets/api/typings/) to specify the new `jsxFragmentFactory`. * [``](https://developers.figma.com/docs/widgets/api/component-Ellipse/) now supports an [`arcData` prop](https://developers.figma.com/docs/widgets/api/component-Ellipse/#arcdata) 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 [``](https://developers.figma.com/docs/widgets/api/component-Line/) component for drawing basic lines inside a widget. * [``](https://developers.figma.com/docs/widgets/api/component-Frame/) children now support [x/y constraints](https://developers.figma.com/docs/widgets/api/component-Frame/#x) 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](https://developers.figma.com/docs/widgets/api/properties/widget-usesyncedstate/#lazy-initial-state) 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](https://developers.figma.com/docs/plugins/updates/2022/04/06/version-1-update-44/) 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](https://developers.figma.com/docs/widgets/api/properties/widget-usepropertymenu/) : | itemType | description | | --- | --- | | [`"separator"`](https://developers.figma.com/docs/widgets/api/type-PropertyMenu/#widgetpropertymenuseparatoritem) | A non-interactive element that can be used to organize different parts of the property menu. | | [`"color-selector"`](https://developers.figma.com/docs/widgets/api/type-PropertyMenu/#widgetpropertymenucoloritem) | A colorpicker menu item that allows users to select from a list of colors. | | [`"dropdown"`](https://developers.figma.com/docs/widgets/api/type-PropertyMenu/#widgetpropertymenudropdownitem) | 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](https://developers.figma.com/docs/widgets/handling-user-events/#click-listeners) . This is useful for knowing where exactly a user clicked on your widget. * [`useSyncedState`](https://developers.figma.com/docs/widgets/api/properties/widget-usesyncedstate/) now supports [lazy initial state](https://developers.figma.com/docs/widgets/api/properties/widget-usesyncedstate/#lazy-initial-state) and [functional updates](https://developers.figma.com/docs/widgets/api/properties/widget-usesyncedstate/#functional-updates) . This is equivalent to how setState behaves in React. * [`fill`](https://developers.figma.com/docs/widgets/api/component-AutoLayout/#fill) and [`stroke`](https://developers.figma.com/docs/widgets/api/component-AutoLayout/#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`](https://developers.figma.com/docs/widgets/api/component-Text/) . * We improved the [`Paint`](https://developers.figma.com/docs/widgets/api/type-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`](https://developers.figma.com/docs/plugins/api/WidgetNode/) . For more information see: [Plugin API Version 1, Update 39](https://developers.figma.com/docs/plugins/updates/2021/11/11/version-1-update-39/) . Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Updates | Developer Docs [Skip to main content](https://developers.figma.com/docs/plugins/updates/page/8/#__docusaurus_skipToContent_fallback) New * Added [`VideoPaint`](https://developers.figma.com/docs/plugins/api/Paint/#videopaint) type for adding video fills to nodes. * Added [`figma.createVideoAsync`](https://developers.figma.com/docs/plugins/api/properties/figma-createvideoasync/) to create a [`Video`](https://developers.figma.com/docs/plugins/api/Video/) handle from an array of bytes. * Added [resetVideoPosition](https://developers.figma.com/docs/plugins/api/Action/) property to Prototyping Actions. * Added [UPDATE\_MEDIA\_RUNTIME](https://developers.figma.com/docs/plugins/api/Action/#update_media_runtime-action) action type for pausing, playing, and toggling a video's playback state This release adds support for four new APIs: * [`InstanceNode.overrides`](https://developers.figma.com/docs/plugins/api/InstanceNode/#overrides) returns a list of overrides on an instance. * [`InstanceNode.resetOverrides`](https://developers.figma.com/docs/plugins/api/InstanceNode/#resetoverrides) resets all of the overrides on an instance. * [`editComponentProperty`](https://developers.figma.com/docs/plugins/api/node-properties/#editcomponentproperty) for component set nodes now supports renaming variant properties. * new `documentchange` option in `figma.on` [`documentchange`](https://developers.figma.com/docs/plugins/api/properties/figma-on/#documentchange) will trigger when a node or style change is made to the currently open file. The callback will be passed with a DocumentChangeEvent with the below interface: interface DocumentChangeEvent { documentChanges: DocumentChange[]} Example: figma.on("documentchange", (event) => { for (const change of event.documentChanges) { console.log("document changes: ", change.id, change.origin, change.type); // Node changes also have change.node, style changes have change.style } }) This release adds support for two new APIs: * `figma.createNodeFromJSXAsync` * `ComponentNode.instances` ### `figma.createNodeFromJSXAsync`[​](https://developers.figma.com/docs/plugins/updates/page/8/#figmacreatenodefromjsxasync "Direct link to figmacreatenodefromjsxasync") [`figma.createNodeFromJSXAsync`](https://developers.figma.com/docs/plugins/api/properties/figma-createnodefromjsxasync/) lets you create nodes using the same JSX API that widgets use. This is a declarative, HTML-like API that should be more ergonomic when using the plugin API to create deeply nested node structures. Here is a quick example: const { Image, AutoLayout } = figma.widgetconst node = await figma.createNodeFromJSXAsync( ,) You can pair `figma.createNodeFromJSXAsync` with our [Widget Code Generator plugin](https://www.figma.com/community/plugin/1096460041736534298/Widget-Code-Generator) to to turn designs from Figma files into code you can embed into your plugin. Note that using this API requires setting up your build system to compile JSX. You can learn more about this by following along with [the documentation here](https://developers.figma.com/docs/plugins/api/properties/figma-createnodefromjsxasync/) . ### `ComponentNode.instances`[​](https://developers.figma.com/docs/plugins/updates/page/8/#componentnodeinstances "Direct link to componentnodeinstances") [`ComponentNode.instances`](https://developers.figma.com/docs/plugins/api/ComponentNode/#instances) returns a list of instance nodes in the file for a given main component node. This release adds support for the [component properties beta](https://help.figma.com/hc/en-us/articles/4406787442711#component-properties) features and adds the the ability to read the fontWeight of text nodes. ### Component Properties[​](https://developers.figma.com/docs/plugins/updates/page/8/#component-properties "Direct link to Component Properties") Exposed Instances * [`isExposedInstance`](https://developers.figma.com/docs/plugins/api/InstanceNode/#isexposedinstance) : indicates whether this `InstanceNode` has been marked as exposed to its containing `ComponentNode` or `ComponentSetNode` * [`exposedInstances`](https://developers.figma.com/docs/plugins/api/InstanceNode/#exposedinstances) : all nested instances that have been exposed to this `InstanceNode`'s level Preferred Values * [`componentPropertyDefinitions`](https://developers.figma.com/docs/plugins/api/ComponentSetNode/#componentpropertydefinitions) : updated to return [`InstanceSwapPreferredValue`](https://developers.figma.com/docs/plugins/api/InstanceSwapPreferredValue/) `[]` for `'INSTANCE_SWAP'` component property definitions * [`addComponentProperty`](https://developers.figma.com/docs/plugins/api/ComponentSetNode/#addcomponentproperty) : updated to accept [`InstanceSwapPreferredValue`](https://developers.figma.com/docs/plugins/api/InstanceSwapPreferredValue/) `[]` when adding an `'INSTANCE_SWAP'` component property * [`editComponentProperty`](https://developers.figma.com/docs/plugins/api/ComponentSetNode/#editcomponentproperty) : updated to accept [`InstanceSwapPreferredValue`](https://developers.figma.com/docs/plugins/api/InstanceSwapPreferredValue/) `[]` when editing an `'INSTANCE_SWAP'` component property ### Font Weight[​](https://developers.figma.com/docs/plugins/updates/page/8/#font-weight "Direct link to Font Weight") * [`fontWeight`](https://developers.figma.com/docs/plugins/api/TextNode/#fontweight) : The weight of the font (e.g. 400 for "Regular", 700 for "Bold"). This property is readonly and cannot be set directly. * [`getRangeFontWeight`](https://developers.figma.com/docs/plugins/api/TextSublayer/#getrangefontweight) : gets the fontWeight from characters in range start (inclusive) to end (exclusive). New: * You can now add a button with a custom action to the notifications created by [`notify`](https://developers.figma.com/docs/plugins/api/properties/figma-notify/) . You can also add an onDequeue function that runs when the notification is removed. This function has a string parameter that represents the reason why the notification was removed. ### New[​](https://developers.figma.com/docs/plugins/updates/page/8/#new "Direct link to New") * You can now retrieve the author of a [`StampNode`](https://developers.figma.com/docs/plugins/api/StampNode/) , with [`getAuthorAsync`](https://developers.figma.com/docs/plugins/api/StampNode/#getauthorasync) * `BASH` is now a supported [`codeLanguage`](https://developers.figma.com/docs/plugins/api/CodeBlockNode/#codelanguage) for [`CodeBlockNode`](https://developers.figma.com/docs/plugins/api/CodeBlockNode/) * A new [`absoluteBoundingBox`](https://developers.figma.com/docs/plugins/api/node-properties/#absoluteboundingbox) property has been added to several nodes * A new [`attachedConnectors`](https://developers.figma.com/docs/plugins/api/node-properties/#attachedconnectors) property has been added to nodes that can have connectors ### Bug fixes[​](https://developers.figma.com/docs/plugins/updates/page/8/#bug-fixes "Direct link to Bug fixes") Previously, [`stuckNodes`](https://developers.figma.com/docs/plugins/api/properties/nodes-stucknodes/) were not marked `readonly` in the typings. It was a runtime error to try to set this property, and the typings now reflect this. ### Breaking interface rename[​](https://developers.figma.com/docs/plugins/updates/page/8/#breaking-interface-rename "Direct link to Breaking interface rename") `LayerSublayerNode` has been renamed to `LabelSublayerNode`. The previous name was a typo. This release adds support for the [component properties](https://help.figma.com/hc/en-us/articles/5579474826519-Create-and-use-component-properties) feature with new properties and functions on each of the following node types: ComponentSetNode * [`componentPropertyDefinitions`](https://developers.figma.com/docs/plugins/api/ComponentSetNode/#componentpropertydefinitions) * [`addComponentProperty`](https://developers.figma.com/docs/plugins/api/ComponentSetNode/#addcomponentproperty) * [`editComponentProperty`](https://developers.figma.com/docs/plugins/api/ComponentSetNode/#editcomponentproperty) * [`deleteComponentProperty`](https://developers.figma.com/docs/plugins/api/ComponentSetNode/#deletecomponentproperty) ComponentNode (non-variants only) * [`componentPropertyDefinitions`](https://developers.figma.com/docs/plugins/api/ComponentNode/#componentpropertydefinitions) * [`addComponentProperty`](https://developers.figma.com/docs/plugins/api/ComponentNode/#addcomponentproperty) * [`editComponentProperty`](https://developers.figma.com/docs/plugins/api/ComponentNode/#editcomponentproperty) * [`deleteComponentProperty`](https://developers.figma.com/docs/plugins/api/ComponentNode/#deletecomponentproperty) SceneNode (must be a component sublayer and not nested within an instance node) * [`componentPropertyReferences`](https://developers.figma.com/docs/plugins/api/ComponentNode/#componentpropertyreferences) InstanceNode * [`componentProperties`](https://developers.figma.com/docs/plugins/api/InstanceNode/#componentproperties) The [`setProperties`](https://developers.figma.com/docs/plugins/api/InstanceNode/#setproperties) function on `InstanceNode` was also updated to work with component properties. The [`variantGroupProperties`](https://developers.figma.com/docs/plugins/api/ComponentSetNode/#variantgroupproperties) property on `ComponentSetNode` is now deprecated. It will continue to the return the variant group properties but it is recommended to use the new [`componentPropertyDefinitions`](https://developers.figma.com/docs/plugins/api/ComponentSetNode/#componentpropertydefinitions) property. The [`variantProperties`](https://developers.figma.com/docs/plugins/api/InstanceNode/#variantproperties) property will continue to be supported on `ComponentNode` but is now deprecated on `InstanceNode`s. It will continue to return the variant properties on an instance but it is now recommended to the use the new [`componentProperties`](https://developers.figma.com/docs/plugins/api/InstanceNode/#componentproperties) property. This release adds support for the [individual strokes](https://help.figma.com/hc/en-us/articles/360049283914-Apply-and-adjust-stroke-properties#individual) feature with new properties for each side of a rectangle or frame-like node: * [`strokeTopWeight`](https://developers.figma.com/docs/plugins/api/node-properties/#stroketopweight) * [`strokeBottomWeight`](https://developers.figma.com/docs/plugins/api/node-properties/#strokebottomweight) * [`strokeLeftWeight`](https://developers.figma.com/docs/plugins/api/node-properties/#strokeleftweight) * [`strokeRightWeight`](https://developers.figma.com/docs/plugins/api/node-properties/#strokerightweight) Assigning a value to the [`strokeWeight`](https://developers.figma.com/docs/plugins/api/node-properties/#strokeweight) property will apply the same weight to all four sides. caution ⚠️ `strokeWeight` may return a stale value if the node is using individual stroke weights. In the near future, we will be changing this to return [`figma.mixed`](https://developers.figma.com/docs/plugins/api/properties/figma-mixed/) but are leaving it as an inaccurate number for now. If you want accurate stroke widths, please use the new properties above going forward. New: * Support for individual strokes * Added [`figma.ungroup`](https://developers.figma.com/docs/plugins/api/properties/figma-ungroup/) for ungrouping nodes, which is roughly equivalent to Ctrl-Shift-G/⌘⇧G in the editor. * Added new autolayout properties: * [`layoutPositioning`](https://developers.figma.com/docs/plugins/api/properties/nodes-layoutpositioning/) : Determines whether a layer's size and position should be determined by auto-layout settings or manually adjustable * [`strokesIncludedInLayout`](https://developers.figma.com/docs/plugins/api/node-properties/#strokesincludedinlayout) : Determines whether strokes are included in layout calculations * [`itemReverseZIndex`](https://developers.figma.com/docs/plugins/api/node-properties/#itemreversezindex) : Determines the canvas stacking order of layers in this frame * Updated autolayout properties: * [`counterAxisAlignItems`](https://developers.figma.com/docs/plugins/api/properties/nodes-counteraxisalignitems/) : Added `"BASELINE"` option for aligning all children along the text baseline on horizontal auto-layout frames. * [`textAutoResize`](https://developers.figma.com/docs/plugins/api/properties/TextNode-textautoresize/) : Added `"TRUNCATE"` option for truncating overflowing text with an ellipse. Fixes to the plugin typings: * Add missing `rotation` property to [`ShapeWithTextNode`](https://developers.figma.com/docs/plugins/api/ShapeWithTextNode/) and [`ConnectorNode`](https://developers.figma.com/docs/plugins/api/ConnectorNode/) * Fix `opacity` and `blendMode` properties incorrectly marked as optional and readonly in [`CodeBlockNode`](https://developers.figma.com/docs/plugins/api/CodeBlockNode/) , [`ConnectorNode`](https://developers.figma.com/docs/plugins/api/ConnectorNode/) , [`ShapeWithTextNode`](https://developers.figma.com/docs/plugins/api/ShapeWithTextNode/) , and [`StickyNode`](https://developers.figma.com/docs/plugins/api/StickyNode/) . * Add missing `fills` and `fillStyleId` properties to [`TextSublayer`](https://developers.figma.com/docs/plugins/api/TextSublayer/) New: * New `themeColors` option in [`figma.showUI()`](https://developers.figma.com/docs/plugins/api/properties/figma-showui/) to allow plugin UIs to [support light and dark themes](https://developers.figma.com/docs/plugins/css-variables/) New: * Added new API method [`setWidgetSyncedState`](https://developers.figma.com/docs/plugins/api/properties/WidgetNode-setwidgetsyncedstate/) on widget nodes * Added new API method [`findWidgetNodesByWidgetId`](https://developers.figma.com/docs/plugins/api/properties/nodes-findwidgetnodesbywidgetid/) to find all widget nodes by a specified `node.widgetId` Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Updates | Developer Docs [Skip to main content](https://developers.figma.com/docs/plugins/updates/page/5/#__docusaurus_skipToContent_fallback) * `null` is now supported for the `variable` field in [setBoundVariableForPaint](https://developers.figma.com/docs/plugins/working-with-variables/#setboundvariableforpaint) , [setBoundVariableForEffect](https://developers.figma.com/docs/plugins/working-with-variables/#setboundvariableforeffect) , and [setBoundVariableForLayoutGrid](https://developers.figma.com/docs/plugins/working-with-variables/#setboundvariableforlayoutgrid) . Passing in `null` will detach the bound variables. * For plugins that can run in VSCode, we now recommend replacing `alert()` and `confirm()` dialogs in the plugin UI with custom UI, since VS Code blocks native dialogs. The [Working in Dev Mode](https://developers.figma.com/docs/plugins/working-in-dev-mode/#dev-mode-plugins-in-visual-studio-code) page is updated accordingly. Updates: * Plugins can now view and set explicit modes for each variable collection on [PageNodes](https://developers.figma.com/docs/plugins/api/PageNode/) . * The [BaseStyle](https://developers.figma.com/docs/plugins/api/BaseStyle/) type is now defined as a union of all possible derived style interfaces, such as [PaintStyle](https://developers.figma.com/docs/plugins/api/PaintStyle/) and [GridStyle](https://developers.figma.com/docs/plugins/api/GridStyle/) . This allows you to use [type narrowing](https://www.typescriptlang.org/docs/handbook/2/narrowing.html) on the the `type` property to go from an instance of `BaseStyle` to a child style type. * Updated the color token values in the [CSS Variables and Theming page](https://developers.figma.com/docs/plugins/css-variables/) for the “Figma Design: Light” and “Figma Design: Dark” modes to reflect recent formatting changes to token values injected into the plugin iframe (rgba() values were changed to #rrggbbaa format). * Variables can now be bound to Effect and Layout Grid styles. On a selection, variables bound to a given style are populated in `boundVariables` keyed by style type (`effects` or `layoutGrids`). This update includes changes to the Variables API to support binding variables to effects, layout grids, stroke weights, and layer opacity. We are also releasing support to run Dev Mode plugins in the Figma for VS Code extension. Changes to the Variables API: * `FLOAT` and `COLOR` variables can be bound to [Effects](https://developers.figma.com/docs/plugins/api/Effect/) via the [`setBoundVariablesForEffect()`](https://developers.figma.com/docs/plugins/api/figma-variables/#setboundvariableforeffect) helper. * `FLOAT` variables can be bound to [LayoutGrids](https://developers.figma.com/docs/plugins/api/LayoutGrid/) via the [`setBoundVariablesForLayoutGrid()`](https://developers.figma.com/docs/plugins/api/figma-variables/#setboundvariableforlayoutgrid) helper. * New [VariableBindableNodeField](https://developers.figma.com/docs/plugins/api/VariableBindableNodeField/) types, `FLOAT` variables can be bound to layer opacity, stroke weights, and individual stroke weights. * New [VariableScope](https://developers.figma.com/docs/plugins/api/VariableScope/) types for scoping variables to layer opacity, stroke weights, and effects. Dev Mode plugins can now run in the Figma for VS Code extension with some minor manifest and code changes: * [manifest.json](https://developers.figma.com/docs/plugins/manifest/#capabilities) changes - added new `vscode` capability * [figma.vscode](https://developers.figma.com/docs/plugins/api/figma/#vscode) - this new namespace allows the plugin to determine whether it's running in the VS Code Extension or not. * [figma.openExternal](https://developers.figma.com/docs/plugins/api/properties/figma-openexternal/) - this API enables opening a URL externally and is necessary to use in the VS Code Extension. * See all of the details in [Dev Mode Plugins in VS Code](https://developers.figma.com/docs/plugins/working-in-dev-mode/#dev-mode-plugins-in-visual-studio-code) Fixes: * [`fillGeometry`](https://developers.figma.com/docs/plugins/api/node-properties/#fillgeometry) and [`strokeGeometry`](https://developers.figma.com/docs/plugins/api/node-properties/#strokegeometry) properties are correctly marked as `readonly` **New**: * We are introducing `NEGATE` as a Prototyping ExpressionFunction type! **New**: * Plugins are now able to explicitly unbind variables from nodes. See [setBoundVariable](https://developers.figma.com/docs/plugins/api/RectangleNode/#setboundvariable) . * `variableIds` are now returned in a similar order to the Figma Design UI. See [VariableCollection#variableIds](https://developers.figma.com/docs/plugins/api/VariableCollection/#variableids) * Adds ability to set and query pluginData on [Variable](https://developers.figma.com/docs/plugins/api/Variable/) and [Variable Collection](https://developers.figma.com/docs/plugins/api/VariableCollection/) nodes. * Adds `textRangeFills` to the `boundVariables` structure. This will be populated on text nodes which have color variables bound to substrings. * Plugins/widgets that touch straight connectors and set endpoint magnets other than CENTER or NONE will now error in development. Please update your code to use the CENTER or NONE magnets for straight connectors before 2024. See [Version 1, Update 79](https://developers.figma.com/docs/plugins/updates/2023/10/04/version-1-update-79/) for more details. * Added support for the [devStatus](https://developers.figma.com/docs/plugins/api/node-properties/#devstatus) field on [Frames](https://developers.figma.com/docs/plugins/api/FrameNode/) , [Components](https://developers.figma.com/docs/plugins/api/ComponentNode/) , [Component Sets](https://developers.figma.com/docs/plugins/api/ComponentSetNode/) , and [Instances](https://developers.figma.com/docs/plugins/api/InstanceNode/) . The Plugin API runtime has been updated to ensure proper usage of [`figma.showUI`](https://developers.figma.com/docs/plugins/api/properties/figma-showui/) . It is unsafe to call `figma.showUI` within an event handler for the [`figma.codegen.on("generate")`](https://developers.figma.com/docs/plugins/api/properties/figma-codegen-on/) event. In development, `figma.showUI` will now **throw an error** when called as a result of a `figma.codegen.on("generate")` If you need to trigger code inside an iframe as the result of a generate callback, you should instead move the call to `showUI` outside of the event handler and use [`figma.ui.postMessage`](https://developers.figma.com/docs/plugins/api/properties/figma-ui-postmessage/) to communicate with the iframe from within the callback. This will ensure that your plugin can to handle concurrent `generate` events. Here's a [code example](https://developers.figma.com/docs/plugins/codegen-plugins/#using-figmashowui-for-code-generation) for how to do this. We're introducing an improved way to attach [straight connectors](https://developers.figma.com/docs/plugins/api/ConnectorNode/#connectorlinetype) to nodes in FigJam with a new [CENTER magnet](https://developers.figma.com/docs/plugins/api/ConnectorEndpoint/) . Starting in 2024, straight connectors will only be able to attach to CENTER and NONE magnets. The magnets for elbowed connectors will remain unchanged. **Notice of breaking change:** caution To support CENTER magnets as the improved way for [straight connectors](https://developers.figma.com/docs/plugins/api/ConnectorNode/#connectorlinetype) to attach to nodes, we are making a **breaking change** for plugins that set straight connector [endpoint magnets](https://developers.figma.com/docs/plugins/api/ConnectorEndpoint/) to AUTO, TOP, LEFT, BOTTOM, or RIGHT. Who is affected: Anyone with a plugin/widget that touches straight connectors and sets an endpoint magnet to AUTO, TOP, LEFT, BOTTOM, or RIGHT. What you must do: Find and update the code that sets the endpoints of straight connectors to use the CENTER or NONE magnet. What will happen now: * In-development plugins/widgets will see a non-blocking warning if a magnet other than CENTER or NONE is set for a straight connector. What will happen starting October 25, 2023: * In-development plugins/widgets will always throw an error if a magnet other than CENTER or NONE is set for a straight connector. What will happen in 2024: * Published plugins/widgets will always throw an error if a magnet other than CENTER or NONE is set for a straight connector. **New** * Add better documentation for resolving variable values. See [resolveForConsumer](https://developers.figma.com/docs/plugins/api/Variable/#resolveforconsumer) and [resolvedVariableNodes](https://developers.figma.com/docs/plugins/api/properties/nodes-resolvedvariablemodes/) * Add support for localhost in the manifest networkAccess allowedDomains field. See [manifest networkAccess docs](https://developers.figma.com/docs/plugins/manifest/#networkaccess) . * Add the [maskType](https://developers.figma.com/docs/plugins/api/MaskType/) property. For nodes that are used as masks (where `node.isMask == true`), `maskType` can be used to get/modify the masking type used (alpha, vector, or luminance) for the mask operation. **New**: * Add [detachedInfo](https://developers.figma.com/docs/plugins/api/DetachedInfo/) to detached instances to indicate if a node is detached from the main component, and to identify its original main component. * Add [figma.constants.colors](https://developers.figma.com/docs/plugins/api/properties/figma-constants-colors/) , which maps color palette names to [ColorPalette](https://developers.figma.com/docs/plugins/api/ColorPalette/) . We provide `figJamBase` and `figJamBaseLight`, a set of official FigJam colors. * Each [`Reaction`](https://developers.figma.com/docs/plugins/api/Reaction/) object has an `actions` array replacing the existing `action` property for executing [multiple actions](https://help.figma.com/hc/en-us/articles/15253220891799) on the same trigger * The [`Action`](https://developers.figma.com/docs/plugins/api/Action/) object supports two new action types: * [`"SET_VARIABLE"`](https://developers.figma.com/docs/plugins/api/Action/#set_variable-action) for [modifying the value of a variable](https://help.figma.com/hc/en-us/articles/14506587589399) based on a static value, another variable, or an expression * [`"CONDITIONAL"`](https://developers.figma.com/docs/plugins/api/Action/#conditional-action) for checking if a condition is met before performing an action * For a general guide on using the new action types, see the updated guide for the [Action](https://developers.figma.com/docs/plugins/api/Action/) object. See the [`reactions`](https://developers.figma.com/docs/plugins/api/properties/nodes-reactions/) property page for more details and code samples. **Notice of breaking change:** caution To support multiple actions per trigger in the [`Reaction`](https://developers.figma.com/docs/plugins/api/Reaction/) object, we are making a **breaking change** for plugins that set the `reactions` property. Who is affected: Anyone with a plugin/widget with code that sets the `reactions` property. What you must do: Check and update your code to use the new `actions` property in each `Reaction` object. What will happen now: * In-development plugins/widgets that set `reactions` with only the `action` object without the new `actions` array will always throw an error. This is to prevent data loss on nodes that already have reactions with multiple actions. * Code that sets `reactions` with both `action` and `actions` are fine. `actions` will take precedence and `action` will be ignored. What will happen starting November 9: * Published plugins/widgets will always throw an error if the `actions` array is not present when setting `reactions`. This update fixes a bug with the optional `networkAccess` key in the plugin manifest. Previously, we had an error where we would treat local worker scripts as well as `blob:` URLs as external resources. If you were affected by this, you can now update your `networkAccess` field. New: * Figma will now return [inferred variables](https://developers.figma.com/docs/plugins/api/properties/nodes-inferredvariables/) when there are variables in the file that match the raw values used in your design. * Add [openTypeFeatures](https://developers.figma.com/docs/plugins/api/properties/TextNode-opentypefeatures/) property for text nodes to expose OpenType features that have been explicitly enabled or disabled. Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Updates | Developer Docs [Skip to main content](https://developers.figma.com/docs/plugins/updates/page/6/#__docusaurus_skipToContent_fallback) The [Variable object](https://developers.figma.com/docs/plugins/api/Variable/) has been extended with with the ability to read and define a variable's code syntax field. Code syntax allows you to represent design variables in code using custom, syntactically correct variable names to support a seamless handoff experience. It can be configured for different contexts, including CSS, SwiftUI, and Compose. A variable's code syntax will appear in [Dev Mode](https://help.figma.com/hc/en-us/articles/15023124644247) 's code snippets when inspecting elements using the variable. New: * [Variable.codeSyntax](https://developers.figma.com/docs/plugins/api/Variable/#codesyntax) describes the current code syntax of a variable. * [Variable.setVariableCodeSyntax](https://developers.figma.com/docs/plugins/api/properties/Variable-setvariablecodesyntax/) and [Variable.removeVariableCodeSyntax](https://developers.figma.com/docs/plugins/api/Variable/#removevariablecodesyntax) let you modify the the `codeSyntax` field. This update contains a small change for users of the Variables API public beta. When getting or assigning elements to the [Variable.scopes](https://developers.figma.com/docs/plugins/api/properties/Variable-scopes/) array, please update your code to use `'STROKE_COLOR'` instead of `'STROKE'`. The meaning is the same. The value `'STROKE'` is deprecated and will no longer be supported in our type definitions. For a full list of possible values, see [VariableScope](https://developers.figma.com/docs/plugins/api/VariableScope/) . [Color management](https://help.figma.com/hc/en-us/articles/360039825114) is now supported within Figma! This version introduces properties for the color profiles of documents and exports. New: * Read-only access to the [document's color profile](https://developers.figma.com/docs/plugins/api/DocumentNode/#documentcolorprofile) . * Read/write access to [colorProfile](https://developers.figma.com/docs/plugins/api/ExportSettings/#colorprofile) for [ExportSettings](https://developers.figma.com/docs/plugins/api/ExportSettings/) . This version introduces utility functions that allow you to set color properties using a variety of familiar encodings, including CSS hex strings and `rgb()`/`hsl()`\-style function strings. The new functions include: * [figma.util.rgb()](https://developers.figma.com/docs/plugins/api/properties/figma-util-rgb/) : converts a color encoding into an [RGB](https://developers.figma.com/docs/plugins/api/RGB/) object. * [figma.util.rgba()](https://developers.figma.com/docs/plugins/api/properties/figma-util-rgba/) : converts a color encoding into an [RGBA](https://developers.figma.com/docs/plugins/api/RGB/) object. * [figma.util.solidPaint()](https://developers.figma.com/docs/plugins/api/properties/figma-util-solidpaint/) : converts a color encoding into a [SolidPaint](https://developers.figma.com/docs/plugins/api/Paint/#solidpaint) object. Examples: const paint = { type: 'SOLID', color: figma.util.rgb('#FF0')}const layoutGrid = { pattern: 'GRID', sectionSize: 1, color: figma.util.rgba('rgb(25% 25% 25%)')} You can alias these functions for more concise code: const rgb = figma.util.rgbconst rgba = figma.util.rgbaconst paint = { type: 'SOLID', color: rgb('#FF0')}const layoutGrid = { pattern: 'GRID', sectionSize: 1, color: rgba('rgb(25% 25% 25%)')} A common use case is to set a node fill. Use the `figma.util.solidPaint()` function when you want to update the color of a fill while preserving other properties of the fill object: if (node.fills[0].type === 'SOLID') { node.fills = [ // Merge the original fill with a new color and opacity figma.util.solidPaint("#FF00FF88", node.fills[0]) ]} Other changes in this version: * Add new assignable values for [ShapeWithTextNode.shapeTypes](https://developers.figma.com/docs/plugins/api/ShapeWithTextNode/#shapetype) : `TRAPEZOID`, `PREDEFINED_PROCESS`, `SHIELD`, `DOCUMENT_SINGLE`, `DOCUMENT_MULTIPLE`, `MANUAL_INPUT`, `HEXAGON`, `CHEVRON`, `PENTAGON`, `OCTAGON`, `STAR`, `PLUS`, `ARROW_LEFT`, `ARROW_RIGHT`, `SUMMING_JUNCTION`, `OR`, `SPEECH_BUBBLE`, `INTERNAL_STORAGE` New: * [`node.findAllWithCriteria`](https://developers.figma.com/docs/plugins/api/properties/nodes-findallwithcriteria/) now supports searching by pluginData as well as sharedPluginData. This should make it much more performant if you're trying to find all nodes that have pluginData / sharedPluginData. * Add `hiddenFromPublishing` as a property on [`Variable`](https://developers.figma.com/docs/plugins/api/Variable/) and [`VariableCollection`](https://developers.figma.com/docs/plugins/api/VariableCollection/#hiddenfrompublishing) . * Add `getPublishStatusAsync()` as a method on [`Variable`](https://developers.figma.com/docs/plugins/api/Variable/#getpublishstatusasync) and [`VariableCollection`](https://developers.figma.com/docs/plugins/api/VariableCollection/#getpublishstatusasync) which returns a promise. * Add `sectionContentsHidden` as a property on [`SectionNode`](https://developers.figma.com/docs/plugins/api/SectionNode/#sectioncontentshidden) . New: * `StickyNode` interface now has an [`isWideWidth`](https://developers.figma.com/docs/plugins/api/StickyNode/#iswidewidth) property, indicating whether the sticky note uses a [wide rectangular shape](https://help.figma.com/hc/en-us/articles/1500004414322-Sticky-notes-in-FigJam#Size) , or the regular square shape. Coinciding with the roll-out of AutoLayout v5 in Figma, we're excited to bring you plugin support for these new enhancements! This update includes various new properties to our Plugin API which will allow for more precise control of layout and positioning parameters using AutoLayout v5. New: * Nodes that support `width` and `height` now include optional properties like `minWidth`, `maxWidth`, `minHeight`, and `maxHeight`. * `LayoutMixin` interface has been supplemented with `'layoutSizingHorizontal'` and `layoutSizingVertical` properties supporting `'FIXED'`, `'HUG'`, and `'FILL'` values. This means that most nodes that accept children and can be made the child of an auto layout node support these properties. * `FrameNode`s with auto layout enabled now support `layoutWrap`, `counterAxisAlignContent`, and `counterAxisSpacing`. * `TextNode` interface has been expanded to include `textTruncation` and `maxLines`. Coinciding with the launch of Figma design's new [Dev Mode](https://help.figma.com/hc/en-us/articles/15023124644247) , and Figma's launch of variables, this update adds a number of new APIs and methods for plugins to extend Dev Mode and interact with variables! [Variables](https://help.figma.com/hc/en-us/articles/15339657135383) in Figma design store reusable values that can be applied to all kinds of design properties and prototyping actions. They help save time and effort when building designs, managing design systems, and creating complex prototyping flows. And Dev Mode is a mode in Figma design files that is dedicated to giving front-end developers everything they need to navigate design files and implement designs into code. Plugins in Dev Mode can be used for inspection and code generation. **Inspection:** Plugins can take over the Inspect panel in Dev Mode and pull in relevant context and information from other tools or APIs. **Code generation:** Plugins can customize code generation using languages and frontend frameworks that Figma doesn’t support natively, and Figma will handle things like syntax highlighting for these plugins out of the box. For a general overview of how to build plugins for Dev Mode, check out the new [Working in Dev Mode](https://developers.figma.com/docs/plugins/working-in-dev-mode/) guide. **New:** * [`figma.editorType`](https://developers.figma.com/docs/plugins/api/figma/#editortype) can now return `dev`, when a plugin is running in Dev Mode. * [`figma.getSelectionColors()`](https://developers.figma.com/docs/plugins/api/figma/#getselectioncolors) will tell you all of the colors and paint styles in the user’s current selection. * [`node.isAsset`](https://developers.figma.com/docs/plugins/api/node-properties/#isasset) tells you if Figma detects that a node is an icon or image. * [`node.getCSSAsync()`](https://developers.figma.com/docs/plugins/api/node-properties/#getcssasync) will give you the CSS that Figma generates for that node. * [`node.getDevResourcesAsync()`](https://developers.figma.com/docs/plugins/api/properties/nodes-getdevresourcesasync/) , [`node.addDevResourceAsync()`](https://developers.figma.com/docs/plugins/api/properties/nodes-adddevresourceasync/) , [`node.editDevResourceAsync()`](https://developers.figma.com/docs/plugins/api/properties/nodes-editdevresourceasync/) , and [`node.deleteDevResourceAsync()`](https://developers.figma.com/docs/plugins/api/properties/nodes-deletedevresourceasync/) methods for interacting with [Dev resources](https://help.figma.com/hc/en-us/articles/15023124644247#Add_external_links_and_resources_for_developers) . * [`manifest.capabilities`](https://developers.figma.com/docs/plugins/manifest/#capabilities) can now include `"inspect"` when you want your plugin to run in the Plugins panel in Dev Mode, or `"codegen"` when you want to build a plugin for code generation, which runs in the Code section of the Inspect panel in Dev Mode. * `figma.mode` can now return `"inspect"` when your plugin runs in the Plugins panel in Dev Mode, or `"codegen"` when your plugin runs in the Code section of the Inspect panel in Dev Mode. * [`manifest.codegenLanguages`](https://developers.figma.com/docs/plugins/manifest/#codegenlanguages) , which specifies the languages your plugin supports for code generation. * [`manifest.codegenPreferences`](https://developers.figma.com/docs/plugins/manifest/#codegenpreferences) , allows plugins for code generation to define custom commands that show up in the native language dropdown in Dev Mode. In these commands, you can run plugin code, including the ability to open an iFrame using the new `figma.codegen.preferences` method. This is helpful for allowing users to customize the generated code from your plugin. * [`node.inferredAutoLayout`](https://developers.figma.com/docs/plugins/api/node-properties/#inferredautolayout) will let you get estimated auto layout properties on a `FrameNode` and its children, even if they do not use auto layout. If you are building a plugin for code generation, this will help you generate better code. * A bunch of other methods and events specific to [plugins for code generation](https://developers.figma.com/docs/plugins/codegen-plugins/) . * [`node.exportAsync()`](https://developers.figma.com/docs/plugins/api/properties/nodes-exportasync/) now accepts `format: "JSON_REST_V1"`, which returns the same REST formatted JSON for a node as the [Figma REST API](https://developers.figma.com/docs/rest-api/) . **Variables:** Plugins can create, modify, and bind variables to various node properties and styles. For a general guide on the features that variables can unlock in your design files, see the new [Working with variables](https://developers.figma.com/docs/plugins/working-with-variables/) guide. **New:** * [`figma.variables`](https://developers.figma.com/docs/plugins/api/figma-variables/) defines several functions to create and manipulate local variables. * [`SceneNode.boundVariables`](https://developers.figma.com/docs/plugins/api/RectangleNode/#boundvariables) enumerates the variables bound on a given `Scene node`. * [`SceneNode.setBoundVariable`](https://developers.figma.com/docs/plugins/api/RectangleNode/#setboundvariable) can set a bound variable on various node properties. * [`SceneNode.explicitVariableModes`](https://developers.figma.com/docs/plugins/api/RectangleNode/#explicitvariablemodes) enumerates the explicit (non-inherited) variable modes for a given node. * [`SolidPaint.boundVariables`](https://developers.figma.com/docs/plugins/api/Paint/#boundvariables) enumerates the variables bound on a given `SolidPaint`. * [`ComponentProperties.boundVariables`](https://developers.figma.com/docs/plugins/api/ComponentProperties/) enumerates the variables controlling component properties on an `InstanceNode`. **Team library API:** Plugins can now query the available library variable collections and variables via the Plugin API. See [figma.teamLibrary](https://developers.figma.com/docs/plugins/api/figma-teamlibrary/) for more info. **New:** * [`figma.teamLibrary`](https://developers.figma.com/docs/plugins/api/figma-teamlibrary/) defines several functions to query your library assets and files * [`manifest.permissions`](https://developers.figma.com/docs/plugins/manifest/#permissions) now includes a permission to control the `figma.teamLibrary` Plugin API. This update adds two parameters for the ["NODE" prototyping `Action`](https://developers.figma.com/docs/plugins/api/Action/#node-action) : * `resetScrollPosition`: Whether to reset the scroll position of any scrollable elements. The parameter only applies if the current node and the destination have the same layout. * `resetInteractiveComponents`: Whether to reset the state of any interactive components. The parameter only applies if the destination has interactive components. Use the parameters to manage the scroll behavior and component state of nodes in your prototype. The `resetScrollPosition` parameter replaces `preserveScrollPosition`, which remains supported only for backwards compatibility. Instead of `preserveScrollPosition`, if you want to preserve the current scroll position in the prototype, set `resetScrollPosition` to `false`. For more information about the parameters and state management for prototypes, see: * ["NODE" Action](https://developers.figma.com/docs/plugins/api/Action/#node-action) * [State management for prototypes](https://help.figma.com/hc/en-us/articles/14397859494295) This update introduces the optional `networkAccess` key to the plugin manifest. Add the `networkAccess` to your plugin's `manifest.json` file to specify the domains that your plugin is permitted to access. When `networkAccess` is applied, if your plugin makes a network request to a domain that is not specified in the list of permitted domains, that request is blocked. For example: { "name": "MyPlugin", "id": "737805260747778092", "api": "1.0.0", "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 plugin, the list of domains that you specify for `networkAccess` is displayed on your plugin's Community page. This information is also visible for org admins when plugins are reviewed for approval. To try this out: 1. In the `manifest.json` file for your plugin, add the following: "networkAccess": { "allowedDomains": ["none"]} `none` is a special keyword for `allowedDomains` that prevents any network access from your plugin. 2. In Figma, create a new Figma or FigJam file and add your plugin. Try to use the plugin as normal. 3. Check the developer console. If your plugin makes network requests, such as calls to an API or fetching images, Figma blocks the requests and throws [content-security policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) errors. 4. To fix the CSP errors, in your plugin manifest, replace `["none"]` with the domains that your plugin needs to access. For more information about network access, see: * [How Plugins Run](https://developers.figma.com/docs/plugins/how-plugins-run/) * [Making Network Requests](https://developers.figma.com/docs/plugins/making-network-requests/) * [Plugin Manifest](https://developers.figma.com/docs/plugins/manifest/) Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Search the documentation | Developer Docs [Skip to main content](https://developers.figma.com/search/#__docusaurus_skipToContent_fallback) Search the documentation ======================== [](https://www.algolia.com/) Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Configuring your project | Developer Docs [Skip to main content](https://developers.figma.com/docs/code-connect/api/config-file/#__docusaurus_skipToContent_fallback) On this page Code Connect can be configured with a `figma.config.json` file, which must be located in your project root (e.g. alongside the `package.json` or `.xcodeproj` file). Every platform supports some common configuration options, in addition to any platform-specific options. Common configuration options[​](https://developers.figma.com/docs/code-connect/api/config-file/#common-configuration-options "Direct link to Common configuration options") ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### `include` and `exclude`[​](https://developers.figma.com/docs/code-connect/api/config-file/#include-and-exclude "Direct link to include-and-exclude") `include` and `exclude` are lists of globs for where to parse Code Connect files, and for where to search for your component code when using the [interactive setup](https://developers.figma.com/docs/code-connect/quickstart-guide/#use-the-interactive-setup) . `include` and `exclude` paths must be relative to the location of the config file. { "codeConnect": { "include": [], "exclude": ["test/**", "docs/**", "build/**"] }} ### `parser`[​](https://developers.figma.com/docs/code-connect/api/config-file/#parser "Direct link to parser") Code Connect tries to determine your project type by looking at the root of your project directory: * If a `package.json` containing `react` is found, your project is detected as React * If a `package.json` is found and doesn't contain `react`, your project is detected as HTML * If a file matching `Package.swift` or `*.xcodeproj` is found, your project is detected as Swift * If a file matching `build.gradle.kts` is found, your project is detected as Jetpack Compose If your project framework isn't detected correctly, you can override the project type by using the `parser` key in your `figma.config.json` file. Valid values are `react`, `html`, `swift` and `compose`. { "codeConnect": { "parser": "react" }} ### `label`[​](https://developers.figma.com/docs/code-connect/api/config-file/#label "Direct link to label") `label` lets you specify the label that appears in Figma for your Code Connect snippets. The label defaults to your project type, such as `React`. Setting a different label for the snippets in Dev Mode can be useful, such as for showing different versions of the code. For [HTML projects](https://developers.figma.com/docs/code-connect/html/) , Code Connect sets the default label based on HTML-based frameworks detected in the first ancestor `package.json` of the working directory which matches one of the following: * If a `package.json` containing `angular` is found, the label is set to `Angular` * If a `package.json` containing `vue` is found, the label is set to `Vue` * Otherwise, the label is set to `Web Components` ### `interactiveSetupFigmaFileUrl`[​](https://developers.figma.com/docs/code-connect/api/config-file/#interactivesetupfigmafileurl "Direct link to interactivesetupfigmafileurl") `interactiveSetupFigmaFileUrl` allows you to specify the Figma file to use during the [interactive setup](https://developers.figma.com/docs/code-connect/quickstart-guide/#use-the-interactive-setup) . When present in your `figma.config.json` file, this URL will automatically be used as the Figma file URL for connecting components. If you already have a `figma.config.json` file, you can add this option to the existing file. { "codeConnect": { "interactiveSetupFigmaFileUrl": "https://www.figma.com/design/abc123/my-design-system" }} ### `documentUrlSubstitutions`[​](https://developers.figma.com/docs/code-connect/api/config-file/#documenturlsubstitutions "Direct link to documenturlsubstitutions") `documentUrlSubstitutions` allows you to specify a set of substitutions that are run on the `figmaNode` URLs when parsing or publishing documents. This lets you use multiple `figma.config.json` files to publish Code Connect snippets for different Figma files without having to modify every Code Connect file. For example, you could use substitutions to set up a testing version of your Code Connect components. Substitutions are specified as an object, where the key is the string to be replaced, and the value is the string to replace that with. Consider this example: { "codeConnect": { "documentUrlSubstitutions": { "https://figma.com/design/1234abcd/File-1": "https://figma.com/design/5678dcba/File-2" } }} The substitution in the previous example changes Figma node URLs like `https://figma.com/design/1234abcd/File-1/?node-id=12:345` to `https://figma.com/design/5678dbca/File-2/?node-id=12:345`. React-specific project configuration[​](https://developers.figma.com/docs/code-connect/api/config-file/#react-specific-project-configuration "Direct link to React-specific project configuration") ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- { "codeConnect": { "parser": "react", "include": [], "exclude": ["test/**", "docs/**", "build/**"], "importPaths": { "src/components/*": "@ui/components" }, "paths": { "@ui/components/*": ["src/components/*"] } }} ### `importPaths`[​](https://developers.figma.com/docs/code-connect/api/config-file/#importpaths "Direct link to importpaths") `importPaths` lets you override the relative paths that are used to import code components in your Code Connect files. Specifying an import path is useful when you want users of your design system to import components from a specific package, rather than from a directory relative to your Code Connect files. The paths must be local. Paths are specified in the `importPaths` object, where the key is the path you want to match and override, and the value is the path to use instead. For example, assume you have a code component, `Button.tsx` in `./src/components/` (relative to your project root). In the same directory is a corresponding Code Connect file, `Button.figma.tsx`, which looks like this: import { Button } from './'figma.connect(Button, 'https://...') For the `Button` import, you want to override the relative path (`./`) and specify a different path to import from. In your `figma.config.json` file, you add the following: { "codeConnect": { "importPaths": { "src/components/*": "@ui/components" } }} In `importPaths`, the `src/components/*` key uses the `*` wildcard to include all code components in that directory along with `Button.tsx`. The value is set to `@ui/components`. The next time you use the Code Connect CLI to manage your files, the Code Connect file for `Button` is updated: import { Button } from '@ui/components' ### `paths`[​](https://developers.figma.com/docs/code-connect/api/config-file/#paths "Direct link to paths") If you're using path aliases in your TypeScript project configuration, you must set `paths` in `figma.config.json` so Code Connect knows how to resolve your imports. The `paths` object in your Code Connect config file should match the `paths` object used in your project's tsconfig.json. ### `imports`[​](https://developers.figma.com/docs/code-connect/api/config-file/#imports "Direct link to imports") You can override the generated import statements for a connected component by passing an array of `imports`. This might be useful if the automatic resolution does not work well for your use case. figma.connect(Button, "https://...", { imports: ["import { Button } from '@lib'"]}) SwiftUI-specific project configuration[​](https://developers.figma.com/docs/code-connect/api/config-file/#swiftui-specific-project-configuration "Direct link to SwiftUI-specific project configuration") ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- "codeConnect": { "include": [...], "exclude": [...], "xcodeprojPath": "MyProject.xcodeproj", "swiftPackagePath": "../path/to/my/Package.swift", "sourcePackagesPath": "/Users/{username}/Development/{project}/DerivedData/{project}/SourcePackages", "importMapping": { "packages/design-system/*": "DesignSystem" }} ### `xcodeprojPath`[​](https://developers.figma.com/docs/code-connect/api/config-file/#xcodeprojpath "Direct link to xcodeprojpath") The `xcodeprojPath` configuration option allows you to specify the `.xcodeproj` file associated with your project. Alternatively, if using `Package.swift` file, you can also specify the `swiftPackagePath`. Code Connect requires this file (or `Package.swift`) in order to locate the Code Connect package and build the language support binary. Code Connect defaults to using the first `.xcodeproj` file it finds, which should work for most projects, but if you encounter errors and have more than one `.xcodeproj` file, you can use this option to point Code Connect to the correct one. ### `sourcePackagesPath`[​](https://developers.figma.com/docs/code-connect/api/config-file/#sourcepackagespath "Direct link to sourcepackagespath") The `sourcePackagesPath` configuration option specifies the location of the project's Source Packages directory. If not provided, it defaults to Xcode's standard location (`/Users/{username}/Library/Developer/Xcode/DerivedData/{project}/SourcePackages` or `{project}/DerivedData/{project}/SourcePackages`), except when using `Package.swift`. This setting is optional. ### `importMapping`[​](https://developers.figma.com/docs/code-connect/api/config-file/#importmapping "Direct link to importmapping") The `importMapping` configuration option is used to ensure Code Connect can correctly locate your imports as well as display the correct imports within Dev Mode. * [Common configuration options](https://developers.figma.com/docs/code-connect/api/config-file/#common-configuration-options) * [`include` and `exclude`](https://developers.figma.com/docs/code-connect/api/config-file/#include-and-exclude) * [`parser`](https://developers.figma.com/docs/code-connect/api/config-file/#parser) * [`label`](https://developers.figma.com/docs/code-connect/api/config-file/#label) * [`interactiveSetupFigmaFileUrl`](https://developers.figma.com/docs/code-connect/api/config-file/#interactivesetupfigmafileurl) * [`documentUrlSubstitutions`](https://developers.figma.com/docs/code-connect/api/config-file/#documenturlsubstitutions) * [React-specific project configuration](https://developers.figma.com/docs/code-connect/api/config-file/#react-specific-project-configuration) * [`importPaths`](https://developers.figma.com/docs/code-connect/api/config-file/#importpaths) * [`paths`](https://developers.figma.com/docs/code-connect/api/config-file/#paths) * [`imports`](https://developers.figma.com/docs/code-connect/api/config-file/#imports) * [SwiftUI-specific project configuration](https://developers.figma.com/docs/code-connect/api/config-file/#swiftui-specific-project-configuration) * [`xcodeprojPath`](https://developers.figma.com/docs/code-connect/api/config-file/#xcodeprojpath) * [`sourcePackagesPath`](https://developers.figma.com/docs/code-connect/api/config-file/#sourcepackagespath) * [`importMapping`](https://developers.figma.com/docs/code-connect/api/config-file/#importmapping) Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Connect to your GitHub repository | Developer Docs [Skip to main content](https://developers.figma.com/docs/code-connect/code-connect-ui-github/#__docusaurus_skipToContent_fallback) On this page Connecting your GitHub repository to Figma allows the Code Connect UI to access your codebase, simplifying and speeding up component mapping while providing extra context about those mappings. info GitHub Enterprise Server (GHES) is not supported. Initiate the connection[​](https://developers.figma.com/docs/code-connect/code-connect-ui-github/#initiate-the-connection "Direct link to Initiate the connection") -------------------------------------------------------------------------------------------------------------------------------------------------------------------- 1. Open the **Code Connect UI** in your Figma library file. 2. Click the **Settings** icon. 3. Select **Connect to GitHub**. Log into the GitHub account that has access to the repository you want to connect. 4. When prompted, grant access to either: * **All repositories** in your account. * **Specific repositories** that contain the components for your design system. Authorize access[​](https://developers.figma.com/docs/code-connect/code-connect-ui-github/#authorize-access "Direct link to Authorize access") ----------------------------------------------------------------------------------------------------------------------------------------------- The next step depends on your role in the Github organization you're trying to authorize: * **If you have admin permissions** 1. Select **Install and Authorize** to grant Figma access. 2. Confirm which repositories Figma can access. * **If you don’t have admin permissions** 1. Select **Request access**. 2. This sends a request to the organization administrator, who must approve access before you can continue. info For an overview of the permissions requested when authorizing with Github please visit [**GitHub App permissions overview →**](https://developers.figma.com/docs/code-connect/github-permissions/) Connect to a repository[​](https://developers.figma.com/docs/code-connect/code-connect-ui-github/#connect-to-a-repository "Direct link to Connect to a repository") -------------------------------------------------------------------------------------------------------------------------------------------------------------------- 1. Once authorization is complete, select **one repository** to connect to the Figma library file. Only one repository can be connected per library file. 2. Choose the **directories** within that repository that contain your UI components. 3. These directories will now be available in Code Connect. * [Initiate the connection](https://developers.figma.com/docs/code-connect/code-connect-ui-github/#initiate-the-connection) * [Authorize access](https://developers.figma.com/docs/code-connect/code-connect-ui-github/#authorize-access) * [Connect to a repository](https://developers.figma.com/docs/code-connect/code-connect-ui-github/#connect-to-a-repository) Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # Continuous Integration | Developer Docs [Skip to main content](https://developers.figma.com/docs/code-connect/ci-cd/#__docusaurus_skipToContent_fallback) The easiest way to get started using Code Connect is by using the CLI locally. However, once you have set up your first connected components, you can integrate Code Connect with your CI/CD environment to simplify maintenance and to ensure component connections are always up to date. Using GitHub actions, you can specify that you want to publish new files when any PR is merged to the main branch. We recommend only running this on pull requests that are relevant to Code Connect to minimize impact on other pull requests. on: push: paths: - src/components/**/*.figma.tsx branches: - mainjobs: code-connect: name: Code Connect runs-on: ubuntu-latest steps: - run: npx figma connect publish --exit-on-unreadable-files Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # GitHub App Permissions Overview | Developer Docs [Skip to main content](https://developers.figma.com/docs/code-connect/github-permissions/#__docusaurus_skipToContent_fallback) On this page GitHub App Permissions Overview[​](https://developers.figma.com/docs/code-connect/github-permissions/#github-app-permissions-overview "Direct link to GitHub App Permissions Overview") ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- This document outlines the specific GitHub permissions our app requests and explains why each permission is necessary for Code Connect to function properly. We follow the principle of least privilege, requesting only the minimum permissions required. All permissions are transparently explained below, with clear reasoning for each access level. Read-only permissions[​](https://developers.figma.com/docs/code-connect/github-permissions/#read-only-permissions "Direct link to Read-only permissions") ---------------------------------------------------------------------------------------------------------------------------------------------------------- | **Permission** | **Usage** | **Current status** | | --- | --- | --- | | **Code** | Required for Code Connect functionality. Reads file names to offer autocompletion and, when a file is selected, reads file contents to suggest component names (when possible) and display its source code. | ✅ Used by Code Connect | | **Deployments** | Future-oriented permission. | 🔄 Used by in-development feature | | **Metadata** | Provides access to basic repository information required during setup and configuration. | ✅ Used for setup | Read/write permissions[​](https://developers.figma.com/docs/code-connect/github-permissions/#readwrite-permissions "Direct link to Read/write permissions") ------------------------------------------------------------------------------------------------------------------------------------------------------------ | **Permission** | **Usage** | **Current status** | | --- | --- | --- | | **Checks** | Enables creation and updating of status checks in pull requests to report mapping and validation results directly in GitHub’s PR interface. | 🔄 Used by in-development feature | | **Commit statuses** | Allows reading existing commit statuses and creating new ones; used to reflect whether repository mappings are valid or require attention. | 🔄 Used by in-development feature | | **Pull requests** | Read PR details, changed files, and metadata; add comments with mapping results and support PR-related automation. | 🔄 Used by in-development feature | * [GitHub App Permissions Overview](https://developers.figma.com/docs/code-connect/github-permissions/#github-app-permissions-overview) * [Read-only permissions](https://developers.figma.com/docs/code-connect/github-permissions/#read-only-permissions) * [Read/write permissions](https://developers.figma.com/docs/code-connect/github-permissions/#readwrite-permissions) Was this page helpful? [Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021) [No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021) * * * * [Community Forum](https://forum.figma.com/) * [Discord Server](https://discord.gg/xzQhe2Vcvx) * [GitHub Samples](https://github.com/figma/widget-samples) --- # CSS Variables and Theming | Developer Docs [Skip to main content](https://developers.figma.com/docs/plugins/css-variables/#__docusaurus_skipToContent_fallback) On this page In order to support light and dark themes in your plugin, you will need to update your call to `figma.showUI()` and replace applicable, hard-coded color values in your plugin CSS with the CSS variables shown here. API Details[​](https://developers.figma.com/docs/plugins/css-variables/#api-details "Direct link to API Details") ------------------------------------------------------------------------------------------------------------------ For your plugin UI to get access to the CSS variables, you will need to call `figma.showUI()` with the new themeColors option: figma.showUI(__html__, { themeColors: true, /* other options */ }) This will lead to the following changes to the plugin `