I’m trying to determine if Figma can replace Framer in terms of advanced UI prototyping but struggling a bit with the concept of Widgets. In Framer, I can code custom (React) components complete with event listeners like onClick, onHover, etc. I found that Figma supports “widgets” which are kinda similar. I copied the example Counter Widget to see how it works and found out it actually only works in on the Canvas. Any click events, e.g. to update the widget’s count state, are blocked in Prototype mode? I can’t understand why, that kind of defeats the whole point of being able to code custom components, especially given that it does work on the canvas. Am I missing something here?
Solved
Interactive widgets in prototype
Best answer by tank666
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!
Introduction | Widget API
Widgets are additional tools for working in/with files, not design elements.
This topic has been closed for comments
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!
Introduction | Widget API
Widgets are additional tools for working in/with files, not design elements.
Thanks! So how would I code custom components like this? Or is it simply not possible?
This is impossible. With code, you can only create plugins and widgets.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.