Molochou
← All notes

What a plugin panel teaches about density

A Figma plugin panel is about 320 pixels wide. It sits inside an application somebody else designed, next to the document the person actually opened the computer to work on. It has no header image, no hero, no room for a paragraph explaining itself.

Designing one is the most useful exercise I know, because every habit that survives on a wide page dies there in about a minute.

What goes first

Padding goes first. Not to nothing, but to the amount that separates rather than decorates. On a landing page generous spacing reads as confidence. In a 320 pixel panel it reads as three visible rows where there should be eight, and eight is the difference between scanning a list and scrolling one.

Then explanatory text. A panel that describes itself is a panel that has failed to be obvious. The description is not wrong, it is just occupying the space where the answer should be.

Then decorative hierarchy. Two type sizes and one weight difference will carry a list of findings. Four sizes will not carry it better, they will just make the panel look like a website.

What has to stay

Three things, and they are the same three every time.

The finding itself, in the fewest words that are still specific. Not "spacing issue" but the layer, the offending value, and the nearest legal one. A person reading a linter wants to know what to change, and every word that is not that is in the way.

The count. Somebody scanning wants to know whether this is a ten minute job or an afternoon before they read a single row.

The empty state. In a tool that reports problems, empty is the good outcome, and it is the state most likely to be drawn last and worst. It should feel like a result, not like a screen that failed to load.

Why it transfers

Nothing here is about plugins. A panel is just a page with the excuses removed.

Every choice you defend by saying it needs room is a choice you have not tested against the possibility that it does not belong. Draw the feature at 320 pixels first. What survives is the product. What you add back afterwards, on a wider screen, you will at least be adding on purpose.