Nishad Patne

Projects / ToolTips

Completed

ToolTips: a Figma plugin that draws tooltips for you

1 / 4The plugin's cover art on Figma Community: "Tooltips made easy!"

Product
ToolTips, a Figma plugin
Role
Design and code
Team
Nishad P
Timeline
October 28 to 30, 2023
Status
  • Live, with 6,859 users as of October 1, 2026
  • never updated since launch
Built with
  • TypeScript
  • the Figma Plugin API
  • ChatGPT

I was drawing tooltips by hand, one layer at a time, and needed a lot of them.

So I built a plugin: select a layer, type the text, pick a direction, and ToolTips draws the tooltip for you.

01

Reach

  • 6,859users

    on Figma Community

  • 3,851views

    on Figma Community

  • 409saves

    on Figma Community

  • A user's words

    Joseph G commented, "It's super easy to add tooltips with this plugin, I wish it was this easy to do it with HTML & CSS too."

as of October 1, 2026, and it still gains users.

1 / 3The plugin's Figma Community page today.
02

Context

  • Tooltipsthe small labels that appear beside an element to explain it. In Figma, designers usually build each one by hand from a text box, a frame and a small pointer, called a nib.

  • How I built itin three days, with ChatGPT alongside my own code.

03

How it works

  • Select, type, choosepick any layer, type the tooltip text, and choose up, down, left or right. Then set the text size, the text colour and the container colour.

  • Real Figma layersit builds the tooltip from Figma's own parts: a text layer in Inter, a three-point nib with rounded corners, and an auto-layout frame with padding. The result is named after the layer it points to, and can be edited like anything drawn by hand.

  • Watches the selectionthe panel shows the name of whatever layer you select, supports 15 layer types, and warns you when nothing, or an unsupported layer, is selected.

In use (October 2026), on the chat screen of iSTART Early Mobile, a mobile app concept of mine.

1 / 3Selecting a chat bubble; the plugin picks up the layer's name
04

Images and code

Building the bubble.

The text sits inside an auto-layout frame with fixed padding and rounded corners, and the frame grows to fit the text.

const tooltipTextFrame = figma.createFrame();
tooltipTextFrame.layoutMode = "HORIZONTAL";
tooltipTextFrame.paddingBottom = 4;
tooltipTextFrame.paddingRight = 6;
tooltipTextFrame.paddingTop = 4;
tooltipTextFrame.paddingLeft = 6;
tooltipTextFrame.cornerRadius = 4;
tooltipTextFrame.primaryAxisSizingMode = "AUTO";
tooltipTextFrame.counterAxisSizingMode = "AUTO";
tooltipTextFrame.appendChild(text);

Pointing the nib.

For a downward tooltip, the nib goes first in a vertical stack, overlapping the bubble slightly, and the tooltip is placed just below the selected layer, with its left edge at the layer's centre.

case "down":
  tooltipFrame.layoutMode = "VERTICAL";
  tooltipFrame.itemSpacing = -5;
  tooltipFrame.appendChild(nib);
  tooltipFrame.appendChild(tooltipTextFrame);
  tooltipFrame.x = currentSelection.absoluteBoundingBox.x + currentSelection.width/2;
  tooltipFrame.y = currentSelection.absoluteBoundingBox.y + currentSelection.height + 15;
  break;
05

Reflection

ToolTips started purely out of necessity, and along the way it became my way of learning how Figma works and getting to know its APIs. It was also my first build with AI. There isn't much to brag about here, and it's old now, but I'm proud of it, because it turned out to be genuinely useful: people are still installing it long after my last change.