---
title: Most popular FigJam tool for estimations
year: 2023
date: 2023-06-01
tags: []
---

# Estimate Stickers

I worked with [Liam Fiddler](https://liamfiddler.com/) to create a FigJam widget for task sizing estimations. It's currently the most popular way to do estimates on the Figma Community and the 19th most downloaded widget overall.

[Check it out on Figma](https://www.figma.com/community/widget/1211812012001490837)

<video
  alt="A mouse cursor drags estimate stickers onto FigJam, and changese their numbers and shapes."
  title="Dragging estimate stickers onto FigJam notes and changing their attributes."
  class="full-bleed"
  src="https://gzron00wavzc73b5.public.blob.vercel-storage.com/estimations.mp4"
  autoplay
  muted
  loop
  playsinline
  webkit-playsinline
  preload="metadata"
  tabindex="-1"
  aria-hidden="true"
  controlslist="nodownload noplaybackrate nofullscreen noremoteplayback"></video>

## Prototyping

We prototyped a few versions within the technical limitations of FigJam widgets and plugins, eventually landing on a widget for what we wanted.

Out of necessity I created a Figma UI library, as the public official one hadn't been updated for quite some time. We leveraged this to test a widget that felt like it was part of the tool and not a third-party extension.

![A screenshot of a suite of Figma UI components and primitives nearly organised.](/images/projects/estimations/components.avif "full-bleed The component library that replicated the Figma UI at the time. Made with trial, error, and a lot of inspect-element.")

We explored a few different mental models for how this thing should work and landed at something closer to a sticker pack — where you would carry around a box of stickers and place them as you go. It took a while to land on how that could look.

![Different, half-finished UI designs for a FigJam widget.](/images/projects/estimations/exploration.png "breakout Early explorations of the sticker-pack mental model.")

### Fun little challenges

We wanted this to feel like part of FigJam, so tried to look for alignment opportunities within the tool. A really cool example came with one of our challenges.

_When 'placing' a sticker, where should it be physically placed, and how do we imply that to a user?_

I ended up finding and leaning on a pattern used in one or two places in FigJam's toolbar — having motion break-out of a constraint imply future movement.

<video
  alt="A sticker button animates out of a button when hovered by a mouse, implying where the new sticker will be placed on the canvas."
  title="Using motion from the toolbar to hint where a new sticker will land."
  class="full-bleed"
  src="https://gzron00wavzc73b5.public.blob.vercel-storage.com/estimates-hover.mp4"
  autoplay
  muted
  loop
  playsinline
  webkit-playsinline
  preload="metadata"
  tabindex="-1"
  aria-hidden="true"
  controlslist="nodownload noplaybackrate nofullscreen noremoteplayback"></video>

It's cool in that it also gave us a logical coordinate to place the stickers themselves. `windowPosition` + `windowWidth` + `windowHeight` + `(activeRowCount * rowHeight)` let us place the stickers just off the bottom-right edge where the button animation moved towards.

## Launch

We launched it in 2023 and roughly a year later it grows about 20k active users per year, currently sitting at 47k.

The final tool allows you to stamp coloured stickers, group them, change attributes, and tally the totals.

## a11y update

We made an update pretty quickly after launch to address a11y concerns — the original stickers were just coloured circles. We added shapes as an additional attribute to help colourblind users differentiate between the different estimates.

![A screenshot of a suite of different, whacky-shaped stickers.](/images/projects/estimations/a11y-1.png "breakout Accessibility update, adding shapes to colour-based stickers.")

This was fun, tied into the FigJam brand really well with the playful shapes and had a genuine impact I was able to observe running workshops in real life with colourblind participants.

![A screenshot showing the UI used to choose between different shapes.](/images/projects/estimations/a11y-2.png "breakout Distinct sticker shapes helped colourblind participants tell estimates apart.")