Notes Figma Widget

OVERVIEW

Notes is a Figma widget that helps streamline design hand-offs by enabling easy annotations for better team collaboration.

CREATED BY

Sarah Kennedy

YEAR

2023

THE PRODUCT

The Notes widget is a free resource available on the the Figma community. It can be used to annotate designs for clear hand-off between designers, developers, and other team members.

See the Process ↓

THE PROBLEM

A Communication gap between Developers & Designers.

The Notes widget was a solution that emerged among our team at Jiffy. Developers expressed confusion when design changes were made to Figma artboards after hand-off. Often these changes were missed because developers did not notice them and designers failed to clearly communicate those changes.

The Comments feature was helpful, but scattered comments often caused confusion and included irrelevant discussions for developers.

DESIGNING A SOLUTION

The Notes Component

We needed a way to inform developers of what changes were made, when the changes happened, and who to contact when they had questions about these changes.

Our first solution was a Figma component. It was a simple note that used pointers to annotate design changes. It also featured a spot to manually type your name and date. Booleans and variants were used to change states of the component.

CREATING THE WIDGET

Taking it one step further

After implementing the Notes component at Jiffy, developers found it improved communication with the Product team, though manually updating fields like the date and name was still tedious.

I searched for a plugin or widget that might insert names and dates automatically, but found nothing. That’s when I decided I would create one myself.

With the support of Figma’s resources and tutorials and some rusty coding knowledge from my university days, the Notes widget came to life!

I created different states to distinguish various design changes commonly discussed between Product and Developers:

🎉 New: Indicates new designs added.

❗️Changes: Notifies developers of changes to designs after hand-off.

⚙️ Conditions: Identifies where designs are dependent on specific conditions/criteria.

♻️ Update: Points out where updates have been made to old or existing designs.

📝 Notes: General notes

See how it works!

WHERE IS IT NOW?

The little widget that could

I decided to share the widget as a free resource on the Figma community. To my surprise, it started gaining traction among Figma users within just a few weeks.

In 2023, I was honored to have the Notes widget selected as one of just 10 spots to be showcased at Figma’s annual Config Conference.

Want to try it out? Check it out in the Figma Community.

Try the Notes Widget