'%3E%3Crect x='-4.10352' y='0.1875' width='171.875' height='171.875' rx='85.9375' fill='%230C5238'/%3E%3Crect x='82.5566' y='-9.2085' width='133.93' height='133.93' rx='22.7014' transform='rotate(45 82.5566 -9.2085)' fill='%23F79CFF'/%3E%3Crect x='144.375' y='23.677' width='123.75' height='123.75' rx='61.875' transform='rotate(90 144.375 23.677)' fill='%23FF6D38'/%3E%3Crect x='106.562' y='26.198' width='119.396' height='48.125' rx='24.0625' transform='rotate(90 106.562 26.198)' fill='%23252525'/%3E%3Crect x='106.562' y='62.8645' width='48.125' height='48.125' transform='rotate(90 106.562 62.8645)' fill='%2312A720'/%3E%3Cpath d='M106.553 86.927L99.5232 103.942L82.5526 110.99L65.5819 103.942L58.5524 86.927L65.5819 69.9122L82.5526 62.8645L99.5233 69.9122L106.553 86.927Z' fill='%23FFFF00'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3971_7584'%3E%3Crect width='165' height='92.8125' fill='white' transform='translate(0 0.1875)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A)
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:
- Setup your development environment →
- Create a widget for development →
- Publish widgets to the Figma Community →
- Manage widgets as a developer →
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 →
Sell widget source code
Note: Ownership of paid widgets cannot be transferred.
If you’re interested in selling the source code and ownership of widget you’ve built, do the following:
- The buyer and seller must submit a request through our contact form to facilitate the sale. Select Community plugins, widgets, and files and Using or buying a resource from the dropdowns, then provide details of your request in the Description box.
- The seller must confirm that they are authorizing the sale.
- 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.