Skip to main content
Stephanie_Smith
November 12, 2021

Add the ability to wrap text around objects

  • November 12, 2021
  • 54 replies
  • 26430 views

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?

54 replies

Martin_Garnett
New Member
April 12, 2022
  • …within a <p> tag.
diff
June 20, 2022

Here is the solution in a hack way.

  1. Make a horizontal direction Auto layout with the icon and text.
  2. Set the “spacing between items” to a negative number (if the icon width is 18pt, then set -18);
  3. Set the “top-left alignment”
  4. Set the text’s paragraph indent. (the number large than the icon’s width)
  5. Set the text’s horizontal resizing as FILL;

Live Demo: https://www.figma.com/file/kpSdnifZsq0WTANs4c8Ieg/Wrap-Text-Around-Objects?node-id=0%3A1

Joe_Garlick
Active Member
September 15, 2022

Another use case is for flowing text around images for an editorial style layout. I’d love to be able to have this working inside auto-layout compositions for detailed responsive web design work.

And the ability to put text inside any shape, like InDesign/Illustrator.

Eric_Hepperle_Designs
September 30, 2022

This is the use case I’m looking for. I wonder if Adobe will add these features after the buyout?

Nat13
December 7, 2022

I really hope Adobe work on this. I really need it 🙂

Lucas_Speyer
January 23, 2023

This would be a nice feature

Eric_Leckband
March 15, 2023

This is what we are looking to implement in our Figma components so they behave as the coded assets. Outside of using an icon font (not an option at this time unfortunately) is there a work around or suggestion or even better an idea on enhancement date?

Erling
March 27, 2023

+1 for this feature! I need it for anchoring icons, interactive components and emojis anywhere in the text.

Here’s how Adobe InDesign does it - for inspiration (far from perfect, but it is really flexible).

In the video:

  1. I cut the element I want inside the text to my clipboard (ctrl + x)
  2. I move the keyboard cursor to where I want to anchor the element and paste it in (ctrl + v)
  3. I can then move the element wherever I want in the text
  4. I can also change the text wrapping shape and wrapping padding. The padding can also be a negative value.
Gilmar_Lira
July 29, 2023

I owe you a beer! 🍻

Andrew_Harrisan
October 3, 2023

There’s been a couple of posts regarding the ability to wrap text around a shape or component as part of the auto layout feature.

Another way to do this would be for Figma Product to add the ability to indent lines by an inputed pixel value in a paragraph text block (x number of lines - top, middle or bottom aligned), allowing for text to flow around a straight sided shape.