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