Figma Widgets: Live Apps on Your Canvas
Figma Widgets are like mini-apps living on your canvas that everyone interacts with at once, unlike single-user plugins. Use them for collaborative tools like live polls or data tables.
Why it exists
To provide persistent, collaborative tools directly on the Figma canvas. Plugins are single-user and ephemeral; widgets are multi-user and part of the document itself, enabling shared, stateful interactions for things like voting or project planning.
The mental model
A widget is a React component for your Figma canvas. You write TypeScript and JSX to define an interactive object that everyone in the file can see and use simultaneously. It's a shared tool living on the board, not a personal script running in a modal.
How it works
You build a widget using Figma's API, which is based on TypeScript and JSX. You define its UI using a combination of components that map to Figma layers like frames, text, and shapes. The widget function renders these components inside a dedicated object on the canvas. It can also access the Plugin API to fetch external data or modify other parts of the file.
When to use it
Use widgets for tools that require real-time collaboration and a persistent state on the canvas. Good examples include: gathering team feedback with a live poll, displaying data from an external source in an interactive table, or managing tasks on a shared project timeline.
When not to use it
For single-user, temporary tasks, a plugin is a better choice. If the tool doesn't need to be a visible, persistent object on the canvas for everyone to see and interact with, a widget adds unnecessary complexity. For example, a script that just renames layers for one user is a plugin, not a widget.
One canonical example
A common footgun is poor performance in large files. By default, a widget loads the entire document when it runs, which can cause a 20-30 second delay. To fix this, you must add "documentAccess": "dynamic-page" to the widget's manifest file. This tells Figma to only load the specific pages the widget needs on-demand, preventing the initial freeze and making the experience much faster for users.
Interview question
What is the primary reason to choose a Figma Widget over a Figma Plugin for a design task?
- a.Widgets can access the Figma Plugin API to modify document elements.
- b.Widgets offer better performance and faster loading times in large files.
- c.Widgets enable real-time, multi-user interaction with a persistent tool directly on the canvas.Correct
- d.Widgets are developed using a modern tech stack like React and TypeScript, unlike plugins.
Why? this is the answer
The card states widgets are for "multi-user and part of the document itself, enabling shared, stateful interactions," making real-time collaboration with a persistent tool their core advantage. While performance is mentioned, it's a potential issue requiring a specific fix, not an inherent primary advantage over plugins.
Just read this? Test yourself on what you have been reading.
Read the original → developers.figma.com
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on figma — each one lists the topics its interview covers.
See open roles