Make widgets for the Figma Community

Related Videos

• 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 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

• 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)
• Publish widgets to the Figma Community

  Before you start

  Who can use this feature

  Supported on any team or plan

  You must be an approved creator to publish paid widgets to the Community. Learn more about selling resources on Community → 

  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.

  About publishing paid widgets

  If you’re an approved creator, you can publish your widgets as paid and sell them directly from the Community. Learn more about selling resources on the Community →

  When publishing a paid widget, keep in mind:

  • The creator who first publishes the widget will be the designated payee. Once the designated payee is set, it cannot be changed.
  • You can customize a free trial period for paid widgets so users can try your widget before they purchase it. For more information see the Payments API documentation. 
  • After a widget has been published as paid, it cannot be converted to free at a later date.
  • Paid widgets cannot be unpublished but may be delisted. Learn more about delisted widgets →

  Important: After you are approved to sell on Community, you must activate your Stripe account before you can publish paid resources.

  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. 

  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. If you are approved to sell on the Community and have activated your Stripe account, you can enable the Pricing toggle to configure a price for the widget. Keep in mind:
     • Widgets can be sold as one-time payments with a minimum price of $2.00.
     • Prices are in USD and must be whole numbers.
     • You can change the price at any time.

  Note: The Pricing settings are disabled if you attempt to publish a paid widget that is in a team or organization folder. Move the widget to your drafts to enable the Pricing settings.

  4. 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.

  5. Check your widget's network access. To see the scope of network access that your widget has, go to Advanced > Widget Info.
     Your widget's network access is indicated by one of the following labels:

     • Unknown network access: Network access isn’t defined in your widget's manifest.json.
     • Unrestricted network access: Your widget can access any domain.
     • Restricted network access: Your widget can access only a specific set of domains.
     • No access to network: Your widget cannot access any domains.

     Click the label to get additional details.
     
     If there are errors in your manifest.json, the errors are identified. Correct the errors before publishing your widget.
     
     If your widget is labeled Unknown network access, you can specify network access in your plugin manifest to change the label.

  6. 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.
  7. 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

• 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 of private organization widgets

  Owners of private organization widgets 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.

  Note: You cannot transfer ownership of widgets published outside of an organization.

  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.

  Note: Paid widgets cannot be unpublished but can be delisted. Learn more about delisted paid resources →

  We recommend warning your users of your plans to unpublish the widget. For example, you can add a note to the widget description or your personal website with the date you will upublish 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 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.

  

  Sell plugin source code

  Note: Ownership of paid plugins cannot be transferred.

  If you’re interested in selling the source code and ownership of plugins you’ve built, do 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

• 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.

• 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 →

• Publish plugins to the Figma Community

  Before you start

  Who can use this feature

  Supported on any team or plan.

  You must be an approved creator to publish paid plugins to the Community. Learn more about selling resources on Community → 

  You must use the Figma desktop app on macOS or Windows to develop plugins. Download the Figma Desktop app →

  This article covers just one step in the plugin development process. Find everything you'll need to make plugins for Figma and FigJam on the Figma Developers site →

  When you're ready to share your plugin you can submit your plugin to the Figma Community. This allows other users to install and run your plugins.

  You'll need to do the following before you can publish a plugin:

  • Download the Figma Desktop app →
  • Register a plugin for development →
  • Enable two-factor authentication →

  Note: You need to have two-factor authentication enabled to publish plugins, including publishing updates to existing plugins.

  Before you publish

  Plugin review process

  Before Figma lists a plugin in the Figma Community, it needs to go through our review process. Figma doesn't review any plugins you choose to share privately within an organization. Learn more about Figma's Plugin Review Guidelines →

  When you first submit a plugin for review, Figma will move the plugin to the Published section with an In review badge.

  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.

  Once approved, Figma will add a Published badge next to your plugin. If Figma rejects your plugin, you can address any feedback and submit again.

  Noticed a mistake? You can still push updates to your plugin during the review process. Learn how to manage plugins as a developer →

  About publishing paid plugins

  Creators who meet our eligibility requirements can apply to sell plugins on Community. Learn more about selling resources on Community →

  When publishing a paid file, keep in mind:

  • The creator who first publishes the plugin will be the designated payee. Once the designated payee is set, it cannot be changed.
  • You can choose to publish the plugin using one-time payments or a monthly subscription. This cannot be changed after publishing.
  • You can choose to offer a yearly discount (between 1 and 95%) for plugins published using a subscription. Users who purchase a yearly subscription to the plugin are locked into the price set at time of purchase for one year. You can toggle this setting as often as needed. This allows you to offer discounts at different times throughout the year. 
  • Plugins published with a subscription come with a 7 day free trial by default. You can customize the free trial period for paid plugins so users can try your plugin before they purchase it. For more information see the Payments API documentation →
  • After a plugin has been published as paid, it cannot be converted to free at a later date.
  • Paid plugins cannot be unpublished but may be delisted. Learn more about delisted paid resources →

  Note: After you are approved to sell on Community, you must activate your Stripe account before you can publish paid resources.

  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 plugin'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 plugin's page and the plugin will appear on each creator's Community profile.

  Prepare plugin information

  Every plugin will have its own page in the Figma Community. This allows other members of the to find and install your plugin.

  

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

  • Choose a name for your plugin. This can be something descriptive or a little creative. Users can search for your plugin using this name, but you also have tags to add relevant keywords.
  • Write a tagline to describe what your plugin 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 plugin 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 plugin 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 plugin. This can be especially useful for plugins that are meant to be used over specific layers. Learn more about playground files →
  • Write a description of your plugin. Use this field to explain what the plugin does, how to use it, and a sales pitch. If your plugin requires a subscription, we recommended mentioning this first. You can format your description using some basic text formatting.
  • Add up to 12 keywords or tags to classify your File. We support alphanumeric characters (a-z and 1-9), but no special characters or punctuation. Max 25 characters per tag.
  • As a plugin creator, it's your responsibility to provide support for your plugins. You'll need to provide an email address, website, or help center for your support contact.

  Publish your plugin

  When you're ready to share your plugin with the Figma Community, you can submit it for review. You can only submit plugins from the Figma desktop app.

  Note: Licenses for published plugins vary depending on if the plugin is free or paid. Learn more about the Figma Community copyright and licensing →

  Warning! Any attempts to exploit the Figma Plugins API will result in immediate removal. This will also ban you from publishing plugins in the future.

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

  1. Open the file browser in the Figma desktop app.
  2. Click on your name in the top-left to open your account and select the Plugins tab to view the plugins you have In development.
  3. Click on the plugin you'd like to publish and select Publish from the options.

     In FigJam, you can publish your plugin through the Plugins modal. Find your plugin under the Development tab, click next to the plugin and select Publish.

  4. Give your plugin a Name and Tagline.
  5. Upload an Icon and Cover art.
  6. If available, choose a Playground file →.
  7. Add a Description of the plugin to set your plugin apart. Figma supports the following formatting:
     • Bold
     • Italic
     • Strikethrough
     • Header 1
     • Header 2
     • Bulleted list
     • Numbered list
     • Add hyperlink
     • Inline code
     • Code block
  8. Add any Tags and a Support contact.
  9. If you are approved to sell on the Community and have activated your Stripe account, you can enable the Pricing toggle to configure a price for the plugin. Keep in mind:
     • Plugins can be sold as one-time payments or subscription with a minimum price of $2.00.
     • Prices are in USD and must be whole numbers.
     • You can change the price for plugins using one-time payments at any time. When the price of a subscription is updated, it can take up to one hour for the new price to display on the Community. 
     • The price for plugins using monthly subscriptions may only be increased once every 30 days and cannot be increased more than 50% at a time.
     • For plugins sold using a subscription, you can choose to offer a yearly subscription at a discount. To do this, enable the Give yearly discount toggle and enter a percentage between 1 and 95. You can toggle this setting as often as needed. Existing yearly subscriptions will continue even if the Give yearly discount toggle is disabled.

  Note: The Pricing settings are disabled if you attempt to publish a paid plugin that is in a team or organization folder. Move the plugin to your drafts to enable the Pricing settings.

  10. Use the Creators field to add any other contributors to the plugin. 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.
      
      

      Note: If you're an admin of a team or organization, you will have two fields available for Creators. The first field allows you to select the team or organization profile you want to publish to, the second to search for existing creators. Learn who can publish files and plugins →

  11. Check your plugin’s network access. To see the scope of network access that your plugin has, go to Advanced > Plugin Info.
      Your plugin’s network access is indicated by one of the following labels:

      • Unknown network access: Network access isn’t defined in your plugin’s manifest.json.
      • Unrestricted network access: Your plugin can access any domain.
      • Restricted network access: Your plugin can access only a specific set of domains.
      • No access to network: Your plugin cannot access any domains.

      Click the label to get additional details.
      
      If there are errors in your manifest.json, the errors are identified. Correct the errors before publishing your plugin.
      
      If your plugin is labeled Unknown network access, you can specify network access in your plugin manifest to change the label.

  12. Choose where to publish the plugin using the Publish to setting [Figma Organizations only]
      • Select Organization to share the plugin privately within your organization.
      • Select Community to publish the plugin and share it with to the Figma Community.
  13. Choose whether fellow Figma Community members can comment on your files and plugins. Comments in the Community are turned on by default, but you can turn off community comments at any time.
  14. Click Publish to submit your plugin for review.

  Publish an update

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

  Share your plugin

  Figma gives your published plugin its own listing in the Figma Community, this allows other Figma users to find and install your plugins.

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

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