Skip to main content
Agni Kaster
New Member
April 23, 2026
Question

How to accomplish inline-block text behaviour??

  • April 23, 2026
  • 1 reply
  • 146 views

I have a component for form options that on some occasions needs a tooltip. The problem is that if you set the text layer to Hug, the text will not wrap for narrow content areas. And if set to Fill, it pushes the icon component. I really just want it to function like html <p> My text label <span>[icon]<span></p>

Because of this issue, designers need to detach the core component just to add a tooltip (and the they use the incorrect icon size and style). Or they are just slapping the icon and moving it over the component just so it ‘looks’ like its at the end of the paragraph. 

This is frustrating me to no end. Figma is supposed to be a tool to create web interfaces, yet the most basic of web features, inline-block text isn’t possible to accomplish. Is there a hack?

 

1 reply

AlicePackard
Power Member
April 24, 2026

You might be interested in this old solution! 

 

Challenge #2 looks like it matches what you're describing.

I write about building excellent Figma components on my blog: https://alicepackarddesign.com/blog