There’s currently no way to wrap text around an object like an icon, spot illustration, or image.
The only solution is to manually break the copy into 2 text boxes and add the second one underneath the icon.
We had big plans for our design system to include scaled variants of components where text would need to wrap around icons and spot illustrations to save screen space. So not having this feature makes it hard to design for accessibility and see how components will scale. It’s a little tricky to get the line height right, and also means we can’t easily add scaled variants to our existing design system library. It’s also stopping us from creating a plugin where designers could stress test their designs with larger accessible fonts.
Would be great if Figma could add this as a feature.
Has anyone else had this issue? Is anyone using a plugin or workaround to help solve this?
Page 2 / 2
This seems like a slam dunk item to implement. I have to hack this in almost every project and it’s currently hacked in our desgn system.
We’ll pass this onto our team for future consideration.
This is the use-case I’m trying to solve for as well. In my case, I’m trying to pin a blinking text insertion cursor to the end of a text field that wraps.
This is a use case I struggled with today too. I want to create a component with two blocks of text that appear beside each other, with the latter wrapping underneath the first if it gets long enough. The first block of text is optional, with a boolean property to hide or show it.
The first block of text might vary in length, so using paragraph indenting would require manual overrides rather than working “automagically.”
If I have a Multi-line label I am not able to put a tooltip icon at the end of the Label
Would love to have this feature. I have multiple use cases of it with long links which wraps on small breakpoints but the icon needs to be moved manually. To do that I always to do detach the component and then it gets hard to keep track of it.
Would really like this feature for inlining icons when I design card games.
Please Figma, this would be such a useful feature. The ability to position an icon inline after the text would be fantastic. This text field component in our shared library gets used thousands of times and manually inserting glyphs is a real pain in the behind.
I think this feature request could be rephrased. I believe that textareas that are not rectangles is what we need. Sometimes those not-rectangles should float next to graphics, sometimes they should be manually adjustable, so we can flow text in any polygonal shape we want.
This is a rudimentary CSS function (via the float property) that’s been a staple of web design since the beginning (not to mention how important it is in print). It’s honestly a bit insane that after so many years Figma still doesn’t have this feature.
Here's another example of why this feature could be very useful. Let's say I have a list of benefits and there is no way to wrap the text one under the other. If I stay with one paragraph, I can't create two separate text properties, one for the title and one for the description.
Upvoting this feature request! It would allow having a cursor or other object show up correctly with a multi-line text box. Right now there is no way to have this automatically push the cursor to the next line.
Upvoting this. ideally the icon can be seen as an inline element. this way you can have icons in the middle of the text. Use cases
[icon] an inline icon at the beginning of multiline text multiline
multiline of text with an inline icon at the end icon]
multiline of text with an inline icon nicon] then more text.
The last scenario is great if you have an open-in-new-tab icon within a hyperlink in a paragraph.
Another up vote for this, insane its not in Figma.
Adding another upvote for this - nuts that it isn’t in Figma considering this is *so* easy to do in HTML!
+1 for this! Not being able to have an icon trail text makes our link component a poor representation of behavior. Same with multi-line input labels that are trailed by a “help info” icon.
+1 for this! Not being able to have an icon trail text makes our link component a poor representation of behavior. Same with multi-line input labels that are trailed by a “help info” icon.
My hacky solution for this is to have a “Tooltip positioner” element that’s Absolutely Positioned to the bottom right and then position the tooltip by adding right-padding.
Recreation of the text component from our library showing how to manually position a tooltip icon at the end of your text.
It doesn’t work with auto-layout, and it’s a lot of manual work every time you change, well, anything, but at least it prevents my fellow designers from using groups and from having to manually get the tooltip component from our Library.
PS: +1 for fixing this, Figma…
Another +1 for fixing this please. I have several hacky workarounds that never work properly for this.
Adding my +1 to the mix!
+1! Can’t believe this topic has been there for 3 years and it’s still not there.
