Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us https://bit.ly/apply-prototypr

Follow publication

Member-only story

What are Figma widgets, and why are they useful?

Edward Chechique
Prototypr
Published in
5 min readAug 10, 2022

--

Figma design widgets

In June 2022, Figma added the option to add widgets to our files.

Figmjam had this option, and now Figma does, but what are Figma widgets? How do they differ from plugins? Where can you find them? How do you create them? and What can you do with them?

Here’s everything

What are Figma widgets?

A widget is like a small piece of app or a small tool inside Figma that lets you add some extra features to your file.

What are the differences between widgets and plugins?

  • Widgets work inside the page, unlike plugins that work from a modal.
  • When you add them to one page, you have to add them to the other page, unlike plugins that you can launch from anywhere.
  • You don’t have to install the widgets; add them directly to the file.
  • The widgets seem to have limited functionality than plugins, but that’s not always the case since plugins can also have limitations.

How to add a widget in Figma?

Add widgets to your Figma file by clicking the resources icon (command + I) and clicking on the widgets tab. Then search for the widget you want and click add.

How to add a widget in Figma

What are the benefits of using widgets?

You can work directly from the widget instead of going to another tool; some work instead of plugins.

For example, you can use the Calculator widget by Mirko Santangelo to calculate things on the page without leaving Figma.

How to create a custom widget?

You can make widgets for Figma, Figjam, or both and publish the widgets to the community. It can be useful for teams that want to develop any widget to their specific need or a designer that wants to contribute to the Figma community.

--

--

Published in Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us https://bit.ly/apply-prototypr

Written by Edward Chechique

Product Designer, Specializing in Complex Products and Design Systems | Figma Expert | Mentorship | Writing about Product Design: www.linkedin.com/in/edwche

Write a response