Playground files for widgets and plugins

Related Videos

• Widget Code Generator by Figma
  🚧  Widget Code Generator is currently in open beta

  Beta features can change during the beta period. You may experience bugs or performance issues during this time. Learn more about beta features →

  Before you start

  Who can use this feature

  Supported on any team or plan.

  This plugin is for Figma design only. You must use the Figma Desktop app to develop widgets.

  Download the Figma Desktop app ->

  The Widget Code Generator plugin for Figma design allows you to design FigJam widgets and easily translate your designs into code. This Figma plugin generates code that you can copy and use to create a widget interface. In order to add functionality to your widget, you’ll need to edit the generated code. Learn how to build widgets →

  In order to use generated code from the plugin, you need to:

  • Setup your widget development environment. Check out the setup guide here →
  • Install the Widget Code Generator from the Figma Community. Learn how to find and install plugins →

  Run the plugin

  Once you have Widget Code Generator installed, you can run it a few different ways:

  • Right-click on the canvas > Plugins > Select Widget Code Generator
  • From the desktop app, open the Plugins menu at the top then select Widget Code Generator

  After selecting the plugin, the Widget Code Generator modal will pop up.

  

  Generate code

  The Widget Code Generator can only generate code one layer at a time, including all of the children in the layer tree. Select an individual layer while the plugin is running to see the generated code in the modal.

  

  If changes are being made to a layer, the generated code won’t automatically update. After making changes to a layer, hit the ‘Refresh’ button to get the most updated code for your component.

  

  Note

  When preparing to generate code for your design, make sure that you are only using characters A-Z and 0-9 in your layer names and that none of your components have reserved names that are used for Figma component types(ie. frame, rectangle).

  Instance nodes

  When you generate code for a design containing an Instance node, the code for all layers of that instance will not be included. Instead, a tag representing the instance will be shown. This reduces duplication when you use several instances of the same component, and makes your generated code more readable. If your design includes several instances of a component named MyComponent, the generated code will look like this:

  export function MyDesign() {
    return <Frame>
    	<MyComponent/>
  	<MyComponent/>
  	<MyComponent/>
   </Frame>
  }
  

  If you copy-paste this into your editor and try to run it, it will not compile because MyComponent will be undefined.

  To fix this, select MyComponent in Figma and generate code for that instance. To go to the main component, right-click on the individual layer then select Go to main component. You can also click on the Go to main component link that appears in the warning message at the top of the modal. 

  

  Create inputs

  Since there’s no way to mark a component as an Input in Figma, the Design→Code plugin can’t generate <Input/> tags.

  If your widget design contains an input:

  1. Design the input field using the Text layer type.
  2. Generate code for the text layer using the plugin.
  3. Locate the opening and closing Text tags for that node and replace them with Input.
  4. Add props for onTextEditEnd, placeholder and value to make your input functional.

  Render images

  To render an image in a widget, the image must be externally hosted or passed in as a data URI. Since we don’t know where your image will come from, we can’t generate complete code for an Image tag. Instead, you will receive something like:

  <Image src="<Add image URL here>"/>
  

  Complete the code with the correct image source and it will be visible in your widget!

  What’s not supported

  The following features are supported in Figma design, but aren’t supported in Widgets yet and therefore cannot be generated:

  • Masks
  • Local fonts you’ve uploaded to Figma (not Google fonts)
  • Multiple text styles in one node (plugin will generate the first style)
  • Layer names with characters outside of A-Z and 0-9
  • Nodes with a width or height of less than 1px will be rounded up to 1px
  • Gradient strokes (supported in widgets but the plugin currently doesn’t generate code for it)
• Create a widget for development

  Before you start

  Who can use this feature

  Supported on any team or plan

  You must use the Figma desktop app to create and publish widgets. The Figma desktop app is only available for Mac and Windows. Download the Figma desktop app →

  This article covers one step in the widget development process. Learn how to make widgets for Figma →

  Find all the information you need to get started writing widgets on the Figma widget developers page.

  This article covers how to create a new widget in FigJam, and is only one step in the widget development process.

  The widget development process:

  1. Setup your development environment →
  2. Create a widget for development (current article)
  3. Publish widgets to the Figma Community →
  4. Manage widgets as a developer →

  Check out our Widget Developer docs for a complete guide on making widgets for the Figma Community.

  Create a widget

  Create a widget to begin developing and testing it in FigJam. There are two methods for creating a widget:

  • Widget templates ↓
  • Import a manifest ↓

  Widget templates

  If you use templates to register a widget, Figma will create a manifest.json file on your computer, along with other files and information you'll need to build the widget.

  • code.ts: the code for the widget in TypeScript
  • code.js: the compiled Java Script from code.ts
  • package.json: which describes the widget and includes things like build scripts
  • tsconfig.json: which configures the TypeScript development
  • README.md

  Warning

  Do not delete your widget's manifest and other code files from your computer. Figma does not store the code in its database. Deleting the source code from your computer will result in a widget error and remove it from FigJam.

  If you create a widget from a FigJam file, you can choose a widget template to create your widget for development.

  1. Open a file on the Figma desktop app.
  2. Open the Create widget modal.
     • Right-click the board or canvas> Widgets > Development > New widget.
     • Or open the file menu > Widgets > Development > New widget.
  3. In the Create widget modal, give your widget a name and select a product to develop for:
     • Figma design + FigJam: Create a universal widget that works for both products.
     • Figma design: Select this to create a widget for Figma design only.
     • FigJam: Select this to create a widget for FigJam only.
  4. In the Create widget modal, give your widget a name and select a template:
     • Empty: A blank slate where you can build your widget from the ground up.
     • Simple widget: Use this template to build a widget that users can directly click on to perform actions. The simplest way to get started.
     • With iFrame & browser APIs: Use this template if you want users to interact with your widget in an iFrame window, which also provides access to browser and third-party APIs.
  5. Click Save as.
  6. Figma will prompt you to enter a name and select a location on your computer to store your widget's source code. Click Save to confirm the download.

  You can now access your widget from Widgets > Development in your file. You'll see your widget's name appear in this menu.

  Import the widget from a manifest

  If you're building the widget from scratch, you can import your manifest to create your widget.

  1. Open a file on the Figma desktop app.
  2. To import a manifest, do one of the following:
     • Right-click the board or canvas > Widgets > Development > Import widget from manifest
     • You can also open the file menu > Widgets > Development > Import widget from manifest
     • Or use quick actions > Import widget from manifest
  3. Select a manifest file from your computer, then click Open to confirm the import.

  You can now access your widget from Widgets > Development in your file. You'll see your widget's name appear in this menu.

  View the widget's code

  To view where a widget's source code is located:

  Figma design

  1. Open a Figma file on the Figma desktop app.
  2. Click and select the Widgets tab. Once you have a widget in development, you’ll be able to see the Development section in the dropdown menu.
  3. Click next to the widget and select Reveal in Finder.

  FigJam

  1. Open a FigJam file on the Figma desktop app.
  2. Click and select the Widgets tab. Once you have a widget in development, you'll be able to see the Development section.
  3. Click next to the widget and select Reveal in Finder.

  

  Figma will open the folder with the manifest file selected.

  Insert your development widget

  You can insert your widget into a FigJam file while it's in development to test your widget. 

  1. Figma design

     1. Click and select the Widgets tab. Find your widget under the Development section.
     2. To insert your widget, do one of the following:
        • Click or drag the widget into the canvas
        • Use the right-click menu or file menu > Widgets > Development > Select the widget
        • Use quick actions and search for the widget by name.

     FigJam

     1. Click and select the Widgets tab. Find your widget under the Development section.
     2. To insert your widget, do one of the following:
        • Click or drag the widget into the board
        • You can also use the right-click menu or file menu > Widgets > Development > Select the widget
        • Or use quick actions and search for the widget by name.

     Once you've finished building your widget, share it with the Figma Community so others can install and use it! Learn how to publish your widget to the Figma Community →

     Back: Widgets developer guide Next: Publish a widget

• Manage widgets as a developer

  Before you start

  Who can use this feature

  Supported on any team or plan

  You must use the Figma desktop app to create and publish widgets. The Figma desktop app is only available for Mac and Windows. Download the Figma desktop app →

  This article covers how to create a new widget in FigJam, and is only one step in the widget development process.

  The widget development process:

  1. Setup your development environment →
  2. Create a widget for development →
  3. Publish widgets to the Figma Community →
  4. Manage widgets as a developer (Current article)

  Check out our Widget Developer docs for a complete guide on making widgets for FigJam.

  Update a widget

  Publish a new release

  Note

  Only the original widget publisher can publish updates to a widget. You can still list other contributors to the widget as creators, but they won't be able to publish any changes.

  Once Figma approves your widget, you no longer need to submit your widget for further review. This means you can publish any updates immediately.

  When you publish an update, Figma will update the widget for every user. Users who have already installed your widget will only have access to the latest version of your widget.

  It's not possible for users to revert to a previous version of the widget. If you need to roll back any changes, you can republish an earlier version of the widget.

  The process for submitting an update is the same as the original publishing process. You can update any information about your widget, including the name, description, tags, creators, and any artwork.

  1. Open a file on the Figma desktop app.
  2. Click in the top-left corner, then go to Widgets > Development > Manage widgets in development.
  3. Click next to the widget and select Publish new release.
  4. Use the Publish widget modal to update widget information as needed.
     • Use the toggle in the Update section to publish a new version and increment the version number, or stay with the current one. Keeping the current version is useful when no code changes were made and only the resource’s metadata is being updated.
     • Use the Version notes field to include any changes you've made or bugs you're addressing with this version.
     • Update any other fields as needed.
  5. Click Publish new version to complete the process. Figma will update the widget for everyone that has it installed.

  Edit widget page

  A widget page helps users understand what your widget does and allows them to install it for use. Creators, contributors, and publishers of a widget can edit the details of the widget's page at any time without having to publish an update. 

  1. Open the widget's page.
  2. Click Edit this page in the right-hand column.
  3. An Update widget modal will appear. Update the desired fields, and click Save changes when you're finished.

  Manage permissions

  Invite additional publishers

  Once your widget is published to the Figma Community, you can invite others to help publish updates to your widget.

  Learn how to invite additional publishers →

  Transfer ownership

  Owners can transfer ownership to any one who has permission to publish a resource. Organization admins can also transfer ownership of private widgets to another organization member.

  1. Open a Figma design or FigJam file on the Figma desktop app.
  2. Open the permissions modal:
     1. Click and select the Widgets tab.
     2. Open the dropdown menu and select Development.
     3. Click next to your widget and select Manage permissions.
  3. Click the dropdown next to a publisher’s name.
  4. Select Owner. The former owner will have their permissions changed to Can update.

  Remove a widget

  If you're a developer of a widget, you can remove a widget at any stage of the development process.

  Published

  If your widget is published to the Figma Community, unpublishing your widget will remove it for anyone who has installed it. Users who've installed your widget won't receive a notification if it's been unpublished.

  We recommend warning your users of your plans to unpublish the widget. For example, you can update your listing or third-party sites with the date you will unpublish the widget.

  1. Open a file on the Figma desktop app.
  2. Click in the top-left corner, then go to Widgets > Development > Manage widgets in development.
  3. Click next to the widget you want to unpublish and select Unpublish from the options.

  The widget will be removed from the Figma Community and users will no longer be able to use the widget or view the listing. The widget will remain in development on your account.

  Caution

  When removing a widget from the Community, likes and installs will be retained, but any details—such as title, tagline, description, and so on—will be lost.

  In development

  If you decide to cease development of a widget, or want to start from scratch, you can remove the widget. This will delete the widget from Figma, but you can still access the manifest from your computer.

  1. Open a file on the Figma desktop app.
  2. Click in the top-left corner, then go to Widgets > Development > Manage widgets in development.
  3. Click next to the widget you want to remove and select Remove from the options.

  Caution

  It's not possible to restore a deleted widget. Deleting a widget will also remove any likes and installs you have acquired, even if you publish the same widget in the future.

  Provide support

  Figma does not provide support for third-party applications. As the widget's developer, it's your responsibility to assist your widget users with technical issues.

  You need to add a Support contact when you submit your widget for approval. This can be an email address users can contact or a link to a website or help center.

  

  1.  

  Back: Publish widgets

• Make widgets for the Figma Community

  Before you start

  Who can use this feature

  Supported on any team or plan

  You must use the Figma desktop app to create and publish widgets. The Figma desktop app is only available for Mac and Windows. Download the Figma desktop app →

  Widgets are custom objects you can add to your Figma design and FigJam files. They allow you to level up your sessions with new tools, data from external applications, or new ways to play.

  Widgets live on the Figma editor or FigJam board for everyone to see and interact with. You can add as many widgets as you want, and reposition them like any other object. Use widgets to add functionality to your file, such as:

  • Import CSVs to create tables, or to transform the data into interactive visualizations.
  • Place polls and voting counters to gather insight from your company on a product idea.
  • Build a project timeline with other teammates in a calendar widget.
  • Create pre-styled mind maps and organization charts quickly.
  • Take a break and play connect four or chess with a teammate.

  Make widgets for Figma and FigJam

  This article outlines the widget development process from beginning to end.

  The widget development process includes:

  1. Setup your development environment →
  2. Create a widget for development →
  3. Publish widgets to the Figma Community →
  4. Manage widgets as a developer →

  Check out our Widget Developer docs for a complete guide on making widgets for Figma and FigJam.

  Requirements

  • Widgets must be developed and published from the Figma desktop app. The desktop app is only available on MacOS or Windows. Download and install the Figma desktop app →
  • Widgets are written in JavaScript and uses Figma's plugin API. We recommend using JSX and TypeScript. JSX is more ergonomic for building out how the widget looks, and TypeScript makes it easier to convert JSX to regular JavaScript. Learn more about JSX and Typescript →

  We recommend building widgets using TypeScript in Visual Studio Code. If you're not familiar with TypeScript, you can still build widgets with Javascript.

  Buy and sell widgets

  While you can’t buy and sell widgets through the Figma Community or facilitate the sale of widget licenses, you can sell the source code and ownership to widgets you've built by doing the following:

  1. The buyer and seller must reach out to the Support team at support@figma.com to facilitate the sale. For example, the seller emails Support with the buyer cc'd or vice versa.
  2. The seller must confirm that they are authorizing the sale.
  3. The buyer confirms they will abide by our Terms of Service after the sale.

  Once this process is complete, the Support team transfers ownership of the widget between parties.

  Keep in mind that once a widget has been published, the publisher cannot materially change the purpose or nature of the widget. In order to do so, a new widget must be published and reviewed again.

  Next: Create a widget

• Publish widgets to the Figma Community

  Before you start

  Who can use this feature

  Supported on any team or plan

  You must use the Figma desktop app to create and publish widgets. The Figma desktop app is only available for Mac and Windows. Download the Figma desktop app →

  This article covers how to create a new widget in FigJam, and is only one step in the widget development process.

  The widget development process:

  1. Setup your development environment →
  2. Create a widget for development →
  3. Publish widgets to the Figma Community (Current article)
  4. Manage widgets as a developer →

  Check out our Widget Developer docs for a complete guide on making widgets for FigJam.

  Developing an internal tool for your team?

  Learn how to create private organization widgets →

  You must have the Figma desktop app installed to make widgets. We recommend building widgets using TypeScript in Visual Studio Code. If you're not familiar with TypeScript, you can still build widgets with Javascript.

  When you're ready to share your widget, you can publish it to the Figma Community. This allows other users to install and insert your widget into Figma design and FigJam files.

  Every widget must go through a review process the first time it gets published to the Figma Community. Once the widget is approved, it'll be available in the Figma Community for users to install and use.

  You won't need to go through the review process for any future updates.

  Note

  You need to have two-factor authentication enabled to publish widgets, including publishing updates to existing widgets. You won't need to use two-factor authentication if you sign in to Figma via SAML SSO or Google SSO.

  Before you publish

  Widget review process

  When a widget is published for the first time, it goes through Figma's review process and must be approved to be listed in Figma Community. Learn more about Figma's plugin and widget review guidelines →

  Figma will contact you via your Figma account email to notify you of our decision. Our goal is to reach a decision within 5-10 business days. If Figma rejects the widget, you can address any feedback and submit again.

  Noticed a mistake in your widget? You can still publish updates to your widget during the review process.

  Creators and contributors

  Publishers can choose to list any other creators as part of the publishing process. This is a great way to recognize any contributions to the widget's development. To qualify as a creator, the contributor will need to have a Figma Community profile.

  Figma will send a notification to anyone added as a creator, which the creator must accept or decline the request. Accepted contributors will appear on the widget's page and the widget will appear on each creator's Community profile.

  Prepare widget information

  Like plugins, every widget will have its own page in the Figma Community. This allows other members of the Community to find and install your widget.

  You'll need to provide some information for your widget listing. We recommend getting this set up before you start the publishing process.

  • Choose a name for your widget. This can be something descriptive or a little creative. Users can search for your widget using this name, but you also have tags to add relevant keywords.
  • Write a tagline to describe what your widget does in a few words. Taglines are used to determine search results when searching resources in the Community. Taglines also appear in browsing and search results instead of the description. Max 50 characters per tagline.
  • Create an icon to represent your widget in the Community and in files. The recommended dimensions are 128 x 128. If you upload a larger image, it will be scaled to fit as long as the icon has a 1:1 aspect ratio.
  • Create some cover art for the top of your widget page. The recommended dimensions are 1920 x 960 (safe area: 1600 x 960). If you upload a larger image, it will be scaled to fit as long as the icon has a 2:1 aspect ratio.
  • Include a playground file, if available. Playground files provide context on how to use your widget. This can be especially useful for widgets that are meant to be used over specific layers. Learn more about playground files →
  • Write a description of your widget. Use this field to explain what the widget does, how to use it, and a sales pitch. If your widget requires a subscription, we recommended mentioning this first. You can format your description using some basic text formatting.
    • Bold
    • Italic
    • Strikethrough
    • Header 1
    • Bulleted list
    • Numbered list
    • Add hyperlink
    • Inline code
    • Code block
  • Add up to 12 keywords or tags to classify your widget. We support alphanumeric characters (a-z and 1-9), but no special characters or punctuation. Max 25 characters per tag.
  • As a widget creator, it's your responsibility to provide support for your widgets. You'll need to provide an email address, website, or help center for your support contact.
  • Widget creators and contributors need their own Community Profile to be listed on the widget listing. Learn how to create a Community Profile →

  Monetization

  You cannot display advertisements to users within files, or as part of a widget's UI. However, there are no restrictions around creating websites or profiles for your widget.

  There isn't currently a way to monetize widgets in Figma Community itself. If you require a paid subscription, you can direct users to a third-party site from your widget description, or build your own monetization solution within your widget. Figma Community Guidelines →

  Publish your widget

  Widgets go through the same publishing flow the first time it is published and every time it gets updated.

  When a widget is published for the first time, it must be reviewed and approved by Figma to be listed in the Community. Learn more about the widgets review process ↓

  You can only publish widgets from the Figma desktop app.

  Warning

  Any attempts to exploit the Figma widget API will result in immediate removal. This will also ban you from publishing widgets in the future.

  This includes but is not limited to: Providing false information, plagiarism, deceitful manipulation of user files, and theft of data.

  To publish a widget to the Figma Community:

  1. Open a Figma design or FigJam file on the Figma desktop app.
  2. Click in the top-left corner, then go to Widgets > Development > Manage widgets in development.
  3. Click next to the widget and select Publish.

  A Publish widget modal appears, where you'll be prompted to fill out information about your widget.

  1. Use the first section to add a thumbnail for your widget. The thumbnail will appear in the Figma Community and in widget search results. To add a thumbnail:
     1. Select the widget object on your FigJam board and Copy as PNG.
        • Mac: ⇧ Shift ⌘ Command C
        • Windows: Control C
        • Right-click widget > Copy as PNG
     2. Select the thumbnail area and paste.
        • Mac: ⌘ Command V
        • Windows: Control V 
  2. Upload assets and complete the information for Icon, Name, Description, cover art, tags, support contact.
  3. Use the Creators field to add any other contributors to the widget. They will need to have an existing Figma Community profile. Type a person's name or handle in the field to search for their profile, and click to select. They’ll need to accept the invitation for their name to be displayed on the resource page.
  4. Choose whether fellow Figma Community members can comment on your widgets. Comments in the Community are turned on by default, but you can turn off community comments at any time.
  5. Click Publish to submit your widget for review.

  Publish an update

  Publish updates to your widget if you've made changes to the code or fixed a bug. You can also edit the details of your widget page at any time without publishing a new update. Learn how publish updates to your widget →

  Share your widget

  Published widgets have their own listing in the Figma Community, which allows other Figma users to find and install them.

  Every widget has a unique URL that you can copy and share with others. Find the widget URL in the Share section of a widget listing. It will look something like this: https://www.figma.com/community/widget/uniqueidentifier

  If you have more than one widget, you may want to share your creator profile instead. Learn more about Community profiles →

   

  Congratulations, you've published a widget! Next, learn how to manage widgets as a developer.

  Back: Create a widget Next: Manage widgets

• Plugin parameters

  Plugin parameters

  Developers can create plugins with parameters which allow plugins to accept user input from the quick actions menu. Adding parameters to your plugin means you don't need to build a custom UI. It also provides a streamlined experience for users of the plugin, who can run a plugin directly from the quick actions menu. Learn more about quick actions →

  Example:

  This plugin creates a shape on the canvas. It has no UI and can only be run via the quick actions menu (Mac) ⌘+/ (Windows) Ctrl+/. A user can select a shape type for the Shape parameter, then input number values for the Width and Height parameters to define the shape's dimensions.

  

  Check out these plugins powered by your keyboard →

  Make plugins with parameters

  Anyone can develop a plugin with parameters. If you're new to developing plugins, learn how to make plugins for the Figma Community.

  Figma's developer platform provides a detailed setup guide for the plugin API. If you're ready to start building, read the developer documentation →

  Use plugins with parameters

  Anyone can install and run a plugin and use its parameters.

  Users on the Organization plan can publish plugins with parameters to their Organization privately.

  Learn how to run plugins →

  Publish plugins with parameters

  New plugins that are parameter-only

  Plugins that only use parameters (those without a user interface outside of quick actions) can be published to the community and will be approved according to our plugin review guidelines.

  Learn more about publishing plugins to the Figma Community →

• Make plugins for the Figma Community

  Before you start

  Who can use this feature

  Users on any plan can develop plugins for the Figma Community.

  You can only register and publish plugins from the Figma Desktop App to develop plugins. The Desktop App is only available for macOS and Windows.

  Plugins are third-party scripts or applications that extend the functionality of Figma design and FigJam files.

  You can use plugins to customize your experience, or create more efficient workflows.

  Plugins interact with Figma via a dedicated Plugin API.

  We built the Plugin API around a set of fixed controlled endpoints. This ensures your plugins won't break when Figma releases new features and updates.

  • The Figma Plugins API gives both you read and write access to Files.
  • Plugins can also use external Web APIs such as the Google Maps API. This allows you to create plugins that can view, modify and create objects or layers.
  • Plugins can perform one or more "User Actions". User Actions are usually short-lived and are always manually invoked by the user. They can run immediately, or may require input from the user before applying any changes.
  • Only one plugin can be active at a time. Plugins that run in the background - or respond to changes in a File - aren't currently supported.

  Make plugins for Figma and FigJam

  This article outlines the plugin development process in Figma. We designed this as a supplementary resource to our developer documentation.

  1. Create a plugin for development
  2. Build and test your Plugin (Visit the Figma Plugin Developer site)
  3. Publish a plugin to the Figma Community
  4. Manage plugins as a developer

  Check out our Figma Plugin Developer site for a complete guide on making plugins for Figma and FigJam

  You must have the Figma Desktop app installed to make plugins. We recommend building plugins using TypeScript in Visual Studio Code. If you're not familiar with TypeScript, you can still build a plugin with Javascript.

  Figma Plugin Examples

  Here's some examples of existing Figma plugins:

  • Content Buddy: allows you to find text within your designs and replace it with the actual copy.
  • Themer: allows you to swap between published styles from your libraries, in bulk.
  • Content Reel: helps you to bring data into your designs. Including text strings, avatars and icons.
  • Map Maker: allows you to insert customized maps into any shape layer.
  • Figmotion: allows you to animate objects within a Frame, without having to leave Figma.
  • Stark: checks the contrast of a selected layer against WCAG 2.1 guidelines.

  

  Buy and sell plugins

  While you can’t buy and sell plugins through the Figma Community or facilitate the sale of plugin licenses, you can sell the source code and ownership to plugins you've built by doing the following:

  1. The buyer and seller must reach out to the Support team at support@figma.com to facilitate the sale. For example, the seller emails Support with the buyer cc'd or vice versa.
  2. The seller must confirm that they are authorizing the sale.
  3. The buyer confirms they will abide by our Terms of Service after the sale.

  Once this process is complete, the Support team transfers ownership of the plugin between parties.

  Keep in mind that once a plugin has been published, the publisher cannot materially change the purpose or nature of the plugin. In order to do so, a new plugin must be published and reviewed again.

  Next: Create a plugin

• Plugin and widget review guidelines

  Caution: This is an evolving document, so its contents may change over time. If you have any questions or concerns around our review guidelines, please reach out to reviews@figma.com.

  Figma is incredibly excited to support plugins and widgets for our community.

  Developers like you help our community discover new ways to design and explore Figma and FigJam. We can't wait to see what you've created.

  Before a plugin or widget can be listed in Figma's Community directory, it needs to go through our review process.

  To make the submission process as smooth and seamless as possible, we have created a set of guidelines. These outline what is required to make it through the approval process.

  Before you submit

  When you are ready to submit, please make sure you have done the following:

  • Tested your app extensively for crashes and bugs.
  • Ensured your plugin or widget description and image(s) are complete and accurate. Profanity in the name or description of your plugin or widget is not accepted.
  • Established a way for users to contact you for support. It's your responsibility to provide support for your plugin and widget users. You can provide them with an email address, or a link to a website or help center.

  What to expect

  Our goal is to reach a decision ASAP, ideally within 5-10 business days. We will contact you via your Figma account email to notify you of our decision.

  If your plugin has been rejected, we'll send you an email to clarify and provide a brief explanation. You may submit your plugin again for review after addressing any feedback.

  Warning: Any attempts to exploit the plugin or widget API (provide false information, plagiarism, deceitful manipulation of user files, or theft of data) will result in immediate removal. You will also be banned from publishing future plugins or widgets to the community.

  Review guidelines

  1. Safety
  2. Business
  3. Usability
  4. Legal

  1. Safety

  We want our users to feel confident that installing Figma plugins and widgets is safe and non-offensive.

  We will not allow any plugins or widgets that are aimed to be malicious or damaging to our users or their work.

  Authors may not share their Figma account or password information with other users or otherwise license, sell, transfer, or assign plugins or widgets.

  1. Objectionable Content
     1. Content that is offensive, insensitive, upsetting, or intended to disgust is not permitted.
  2. Official API Usage
     1. Plugins and widgets can only leverage official plugin APIs or widget APIs and cannot require users to install separate packages that manipulate Figma on the Web or the Desktop App.
  3. Developer Contact Information
     1. Authors must be individuals on a Figma plan (Starter, Pro, Organization) or companies on the Figma Organization plan. Attempts to artificially represent a plugin or widget author as a company may result in your plugin or widget being rejected
     2. Please ensure that your contact information is reliable for users in the event they have any questions, support issues, or feedback.

  2. Business

  Our hope is that Figma plugins are made available and accessible to the entire Figma Community, regardless of their ability to pay for services.

  While we do not offer functionality that supports payments through Figma, we do allow developers to use a third party to facilitate monetizing your plugin.

  1. Monetization Policy
     1. We allow plugins and widgets to direct users to a third party to allow for monetization. We reserve the right to reject plugins and widgets that attempt to monetize in poor taste.
  2. Advertising Policy
     1. Plugins and widgets may not display ads to Figma users. Please do not insert advertisements into design files or present ads in the plugin UI or widget UI.

  3. Usability

  We want all of the plugins and widgets available to our community to be useful and valuable. If your plugin or widget is trivial or intended to be creepy or uncomfortable, we may not approve it.

  1. Plugin Completeness
     1. Please make sure your plugin or widget is completed, functions as intended, and does not include temporary content. We will reject plugins and widgets that crash or have obvious bugs.
     2. Please do not use developer error messages to communicate with end-users.
  2. Complete and Accurate Metadata
     1. It should be clear to users that the plugin or widget they are installing does what they expected it to do. Please include an accurate description, screenshot, or previews so that the users will not be surprised by any hidden functionality.
  3. Design
     1. We highly recommend matching your plugin or widget to Figma's UI so we can create a seamless experience for our users.
     2. If there are any concerns with usability, or any other negative externalities, we may reject the plugin or widget.
  4. Performance
     1. If your plugin or widget negatively impacts the overall performance or experience within Figma, we may reject it. An example of this would be a long-running background process.
     2. Your plugin or widget should deliver the appropriate notifications if the user is offline and your plugin or widget cannot perform offline.
     3. Plugins and widgets that stop working or offer a low quality experience may be removed at any time.

  4. Legal

  Plugins and widgets are expected to comply with the law and Figma’s policies. It is ultimately your responsibility to make sure that your plugin or widget is not doing anything illegal. You should consult with a lawyer if you are unsure about something.

  Please do not rely on these guidelines to make sure you are in compliance with the law.

  1. Intellectual Property
     1. Ensure that your plugins and widgets only use content that you created or have a license to use. Your plugin or widget may be removed if you use content without permission.
  2. Gaming, Gambling, Lotteries
     1. No gambling or sweepstake-related usage is permitted.
  3. Brand guidelines
     1. Ensure that your plugins and widgets adhere to the Figma Brand Guidelines. Failing to do so may result in rejection or removal.

  Note: If you have any questions or concerns around our review guidelines, please reach out to reviews@figma.com.

• Create a plugin for development

  Before you start

  Who can use this feature

  Supported on any team or plan

  You must use the Figma desktop app to create and publish plugins. The Figma desktop app is only available for Mac and Windows. Download the Figma desktop app →

  This article covers one step in the plugin development process. Learn how to make plugins for Figma →

  Find all the information you need to get started writing plugins on the Figma plugin developers page.

  You will need to create a plugin before you can start developing it. You must use the Figma desktop app to develop a plugin.

  Plugin templates

  When you create a plugin, Figma will create a new plugin manifest on your computer. This includes the folders, templates, and information you'll need to build your plugin.

  You can choose a plugin template when you create your plugin for development.

  • Empty: A blank slate where you can build your plugin from the ground up.
  • Run once: This is a template for a plugin that runs on the canvas, without any further interaction from the user. Use this template if you don't need to build any UI.
  • With UI's and Browser API's: Use this template if you want to create a plugin with an interactive UI. Or, if you want to use browser APIs as part of your plugin.

  

  Create a plugin

  1. Open the Figma desktop app
  2. Open the account menu in the top-right corner.
  3. Select Plugins to open your plugin management modal
  4. Under In Development, click  .
     • Select New Plugin to create a plugin using a plugin template
     • Select Import new plugin from manifest if you already have your source code created on your computer. 
  5. Follow the prompts provided to create your widget.
  6. Once you've created your plugin, you'll find it listed under the In Development section of your plugin management modal.
     • You can also find your plugin under the Development tab within the Plugins modal in FigJam.

  Once you have the Development tab available in the Plugins modal, you can click on in the top right corner to create a new plugin. Click next to a plugin to Publish or select Reveal in Finder to view plugin code.

  

  Want to open your manifest from Figma? Click on the plugin and select Reveal in Finder.