This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

I would vote for this. However, it is not that simple as it seems.

One quick solution is to find icon font with this icon and just use it. In case you really want it your way (custom icon), and if you have a lot of mockups like this, I would advise you to create custom font specifically for this. Both solutions also help developers to implement it.

Technically doing so is not super complex in terms of HTML and CSS, but not trivial either. Inline elements are tricky. Bringing it to iOS and Android is a separate, and very lengthy topic.

Hey Constantine, thanks for your reply. I’m working for an established brand so I can’t change icons or fonts. This means an icon font or custom font is not an option, and I need to use the icons from our icon set.

We are already wrapping text within some components in the implementation, so that is not an issue. What is needed is the ability to wrap text in Figma. This would allow us to add designs for scaled up components to component sets within our design system.

The tech behind the implementation is the reason I’m so skeptical this feature will ever see light of day.

HTML/CSS had this option long long ago. Wrap is technically element with ‘float: left’ property. Now the problem is that more modern flexbox implementation goes directly against the float. So you can either have flex layouted element or floated element in CSS. And flexbox is behind our super usefull Auto Layout in Figma so… I doubt wrap is coming.

Other way to do this info icon is to have it as an inline element in HTML. Now, this is something I would love to see from Figma. However… inline elements also tend to increase the distance between lines of text. The only way to deal with it, is to define them so they have same properties and occupy same size as letters… Or convert to font if they are purely vector objects. That’s one of the reasons icon fonts are so popular and are de facto standard of good implementation.

P.S. Good example of how to deal with inline graphics on mobile is Apple SF Symbols for iOS.

I agree with you about the implementation on web, but we don’t need to implement this on web as those users tend to zoom in rather than increase the font size.

This is for iOS and Android. If you try turning on the largest Dynamic Type font size you will see it’s already common practice in a few places. I’ve attached an example. Did your concerns relate to those platforms too?

Inline elements are interesting though. If that’s a better a way we can achieve this same effect the I’m all for it.

Now that you mentioned it, this is actually one weak spot of Figma. Right now there is no easy and reliable way to use dynamic fonts and switch environments like you do in Xcode. And there is nothing that is even distantly similar to using SF Symbols in iOS. This due to a fact that SF Symbol is designed like font and can align itself to font baseline, change its line weight to be on par with label next to it etc. etc.

Apple did such an incredible job with it and SwiftUI, so once I tried I literally can’t think about anything else. As a way of describing user interfaces SwiftUI is superior. If they make it open source I believe that would be a future of design languages. And I would probably ditch Figma in favor of design oriented SwiftUI editor.

Seconding this.

FYI, a hack was found for inline elements at the end of text, during one of Mr. Biscuit’s challenges, but is very heavy to implement.

Hi all, it is possible to achieve this using Paragraph indent text property. You can combine the text in a frame with the icon. Please try it out.

Figma doesn’t actually use flex behind the scenes (or any HTML/CSS except for rendering the surrounding Figma UI) since everything in the main Figma view uses a custom canvas renderer. Thus why we don’t have things like flex-wrap which would make this easy to do. Auto-layout is custom logic made to imitate flex-box but doesn’t actually behave identically. This is why features like RTL and other highly requested CSS-like features take so long to come out, they have to be built from scratch. If Figma used HTML/CSS adding things like RTL, floats, flex-wrap, etc would be much easier.

I voted up on this for the option to add the icon to the end of the text – perhaps some way to “pin” an element to the end (or start?) of text.

I think this is similar to something like inline-block in code? With the element nested within a

.

• …within a <p> tag.

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

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.

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

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

This would be a nice feature

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?

+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.

I owe you a beer! 🍻

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.

I really need this, but with the icon on the right, when I need to have text and legend icon(s)!

Can I vote for this again, somehow? 😆

Would be so helpful to have this

With clip path you can wrap text around complex shapes on the web which I’ve done before especially to get a “magazine” style feel. It’s also helpful when creating PDFs and such as well such as 1 pagers and what not.

I know Figma isn’t built using HTML/CSS, but I mention it because Figma’s lack of that feature means I can’t really design in a way that let’s other non-Figma experts work with the design easily and swap in and out images or copy or create components. Today, I’ll make components and they can add text, swap instances, and such and create design around a framework I created. Unfortunately, in this case, they can’t and its hacky work arounds as described in the comments elsewhere on the forum.

+1 and voted!