Create a widget for development
Widgets are supported on any team or plan. Please note that beta features can change during the beta period. Bugs and performance issues are expected.
- Widgets are available in FigJam only.
- Supported on any team or plan.
- Anyone can develop and publish widgets to the Figma Community.
- You must use the Figma desktop app to create, develop, and publish widgets. The Desktop app is only available for macOS and Windows.
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:
- Setup your development environment →
- Create a widget for development (Current article)
- Publish widgets to the Figma Community →
- Manage widgets as a developer →
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.
Create a widget
Create a widget to begin developing and testing it in FigJam. There are two methods for creating a widget:
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
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.
- Open a FigJam file on the Figma desktop app.
- Open the Create widget modal.
- Right-click the board > Widgets > Development > Select New widget.
- Open the file menu > Widgets > Development > Select New widget.
- 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.
- Click Save as.
- 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 FigJam 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.
- Open a FigJam file on the Figma desktop app.
- Right-click the board > 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...
- 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 FigJam 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:
- Open a FigJam file on the Figma desktop app.
- Open the Manage widgets modal.
- Right-click the FigJam board > Widgets > Development > Manage widgets...
- Open the file menu > Widgets > Development > Manage widgets...
- Use the quick actions menu and search Manage widgets
- Click the widget to open its manifest. Or, click next to the widget, and select Reveal in Finder from the options.
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.
- Use the right-click menu or file menu > Widgets > Development
- Click on the widget to insert it onto the board
You can also use quick actions and search your widget name.
Once you've finished building your widget, it's time to share it with the Figma Community so others can install and use it!
