Introduction
Welcome to the Widget API!
Widgets are interactive objects that extend the functionality of design files and FigJam boards. Unlike plugins that run for a specific person, everyone can see and interact with the same widget. You can add as many widgets to the board as you need and even run them at the same time. This makes them great for collaboration!
Here’s a few examples of the types of widgets you can create:
- Import data to create tables or interactive visualizations
- Gather insight through live polls and voting counters
- Build timelines and manage projects with calendars
- Connect and play games in multiplayer
Not sure what you want to create? Check out these guides:
Build widgets
We've designed the Widget API around two JavaScript-based technologies: TypeScript and JSX. You'll need to have a basic understanding of JavaScript to build widgets. If you have written React before you’ll feel right at home! Required knowledge →
A widget is a function that renders components inside a dedicated widget object. You build your widget interface from a combination of components or sublayers. Then pass in properties to customize the look and feel of the widget.
When we talk about components, we’re using language from React components. These are different to the components and instances you'd use in Figma. Most of the components in the Widget API are layers you’d interact with in files—such as frames, text, and shapes. Explore Widget API reference →
Widgets are objects in files that everyone can see and use. You can choose how people can interact with your widget. You can specify a property menu, create a custom interface, or run widgets in response to click events. Customize widget interactions →
Widgets can also access the functionality of the Plugin API. This allows you to pull data from external resources, open an iFrame to show more UI, or edit other objects in a file. If you’re building a standalone widget, you may not use the Plugin API at all. Using the Plugin API →
Resources
Our QuickStart guide show you how to set up your environment and run a sample widget. You can explore our sample widgets in GitHub for more inspiration.
The API reference covers the components, hooks, and functions you’ll use build widgets. Our development guides explore concepts and outline the process for building successful widgets.
Get help with your plugin and widget related questions in the Figma Community forum. To connect with other widget and plugin developers join our community-driven Discord server.