What happened
We had a tag-style component that showed a short label, and in the design file it looked great. When the real data arrived, some items had no label, and those tags simply vanished from the layout.
Nothing flagged it. The component was still there in the layers panel, but the frame had shrunk to almost nothing, which made the problem hard to spot.
Why it happens
A frame set to hug contents sizes itself to its children. A text layer with no characters has no width, so the frame collapses to whatever its padding and any fixed-size siblings add up to. With no padding, that is zero width.
Figma does not treat this as an error, because the layout is behaving exactly as defined. The trouble is that designs are usually made with sample text in every field, so the empty case never gets looked at until real data exposes it.
What we do now
Where a component can receive a missing value, we set a minimum width on the frame, or decide deliberately that it should disappear and say so in the spec. Hiding an empty element on purpose is fine. The problem is when it happens by accident.
We also design an empty state next to the filled one, and test variants with blank text, long text and the largest realistic value. Developers can then match the component to a documented behavior instead of guessing.
Quick checklist
- 1Clear the text in a component instance and watch how the frame reacts.
- 2Set a minimum width or a fixed fallback if the element must stay visible.
- 3Add an explicit empty-state variant or note that it should hide.
- 4Test blank, very long and typical values before handoff.
Rule of thumb
If a component can receive an empty value, design what it looks like empty before real data does it for you.