Figma sticky notes for communication and documentation

An idea in creating effective communication with Designers, PMs, & Devs

Agung Asril
NBS Design
5 min readSep 14, 2021

--

Article cover, illustration by Agung Asril

A couple of months back, the design team faces challenges because of the dynamic software development where sometimes the initial plan needed to be adjusted because of the client’s request due to their business priority changes. The case was that we already designed a feature but it was pushed back and will be developed in the next sprint, not the upcoming one. Here comes the problem, the developer will develop the design based on the grooming and initial planning while the design team needed to adjust the design due to the sprint planning alteration with only a little amount of time. The most logical idea and the fastest way were to give a note on each feature which ones are being pushed back to the next sprint. What was a simple idea then, sparked another idea on how could we standardize this ‘notation’ or ‘sticky notes’ so that everyone involved could quickly understand it.

Sometime later on, we had listed what are the cases where this ‘sticky note’ could be used. Here are the cases in which we had listed our needs.

List of things that could be used with sticky notes
Illustration: discussion

Based on the list above, 11 sticky notes for different purposes were created using Figma components. Here are a few of the sticky notes that were made;

Question sticky note

Question Sticky Notes
This is used for any notes that are needed to be confirmed. The objective is that so Project Managers can also view anything that has any dependency for confirmation with the client.

Move Sprint sticky note

Move Sprint Sticky Note
For any case in which a feature will be moved to a different sprint. This sticker note can be used.

Not Implemented sticky note

Note Implemented Sticky Note
Should there be any features that have been included in a design but a decision was taken to postpone the development of that feature, this is the sticky note that will be used

New Adjustment Sticky Note

New Adjustment Sticky Note
After the design is agreed on by the clients and the developer, but then suddenly there is a need to update it because of the client’s request. This sticky note should be used to help notice any additional adjustments.

Information Sticky Note

Information Sticky Note
For any general information that’s needed, this sticky note can be used. For example to explain how the interaction of a scrolling header works.

Anatomy for the sticky note

Objective & Target Goals

Having a dedicated sticky note for communication, here are the objective and target goals:

  • Help make communication easier & effective between:
    Product Design Member → Product Design Member
    Product Design Team → Project Managers
    Product Design Team → Developers
  • Help document any changes, information, and annotations
  • Minimalize internal miscommunication
  • Standardize sticky notes in Figma

Feedback

Illustration: Getting Feedback

After the sticky notes were created, I tested them with a few project managers and developers. Here’s what they had to say…

Very helpful for documenting design changes. Especially for pages that have been iterated several times, so they can easily identify what version of the existing design.
Farhan Ramadhan, Project Manager

Previously, the notation/documentation was not standardized. With this sticky note idea, it can simplify documentation and ideally help PM in confirming or gathering requirements.
Claudia Karina Putri, Project Manager

With sticky notes, it seems that the designer's internal communication will be better. Especially when there is an adjustment design process. By using sticky notes, the lead design on a project can write down any tasks that are carried out so that there are not many comments piled up like if using figma's built-in comment feature.
Nanda Muherman, Product Designer

With sticky notes, documentation is more noticable than using comments in figma. It seems to be very helpful in internal communication.
Raymond, Web Developer

The idea is really helpful, especially when there are pages that have been revamped many times. So it’s faster to identify which design was used in the previous version. But for new adjustments, it seems that you still have to use the comment figma to mention and notify the developer.
Nicholas, Mobile Developer

What’s Next? What Could Be Improved?

The next step is to implement this on the project we’re currently working on. Testing on each case and if there are any edge cases that couldn’t be handled by any of the 11 sticky notes we’ve made and continue iterating it.

What I’ve Learned

Communication is a bridge between confusion and clarity. Anything that seems might cause misalignment between each team needed to be solved because, in my opinion, clear communication is the base foundation for teamwork. I’ve also learned to apply design methods to solve a problem in my work environment, which also indirectly (of course) sharpen my design approach in problem-solving.

--

--

Agung Asril
NBS Design

Sharing what goes through my mind, hopefully it gives insights and better understanding to you! be.net/agung_asril