Hello,
it would be nice to have the option to insert floating components inside text (like Emojis).
Use case would be for signs or infos in complex dashboards. Its a hustle to do this now manually and also set kind of boundingboxes to sync different heighs of text and component.
Regards
Hi!
I want to add a text link component within a paragraph of text. I was thinking about using two text fields, one “text before” and one “text after link” and applying the auto-layout wrapping option. Unfortunately the text doesn’t wrap within the text field, but instead the entire text field is pushed into the next line. Are there any workarounds?
I often have a trailing icon component, ellipsis or “show more” component displayed at the end of text. As requested from several other contributors, I think it would be valuable to have the ability to add a component within a text element so that it adapts to the position of where it is located within the text.
100% this would be a fantastic enhancement to Figma. Currently the Auto Layout - Wrap functions like flexbox wrap, which is great for frames.
However when grouping multiple text elements it should behave more like display:inline
Having 2 text styles in a single text block is unreliable and prevents the ability to use text property variants in components.
+1, we just need “inline” (vs block) components. This is a core feature in CSS layouts but has to be hacked together all crazy in Figma. Allow us to at least mimic a “span” tag with basic features like background color, border, and padding — that would handle 90% of use cases IMO.
+1 also for our team it would be useful to put inline components in text. Vital? No, but very useful
Another +1 … I’ve been requiring this for so long for creating interactive reporting dashboards / exporting results to pdf.
+1 always have wanted this. not sure how anybody designs around this
+1 stumped here on how to make this happen.
Hey All, thanks for the feedback!
We’ll pass this onto our team for future consideration.
This would be very helpful because currently there is no way to have 2 text elements behind each other like you could with HTML/CSS display:inline.
The goal is to have text elements (display:inline) and any other component (display:inline-block) be aligned on the same baseline.
Currently the only thing you can do is:
Both set as Fill.
They will share the width 50/50.
One set as Fill, other set as Hug
Fill will take most space, but text will wrap inside width instead of taking full width.
One set as Fixed, other set as Hug
This will take the full width, but the next element will not continue on the same baseline but start a new line.
And here the goal, but this is currently impossible
This is a simple example with 2 text elements. Ideally this would also work with other components like icons.
TLDR;
So what we need is some kind of auto-layout support to create display:inline and display:inline-block elements.
This is actually quite essential for several of our form field components in our design system
This is a waayyyyy overdue Figma update!!
In some cases with text, there could be a very easy work around if text styles contained color as a property. Why, oh why not?
Yes please! This will unlock (without having to hack) adding inline icons to the end of text links, adding link (or any other) components into paragraph text.
If you’re working with responsive text fields using auto-height, things like inline notations or icons are completely broken. The text reflows, and the icon sits out-of-place in its absolute container. Frustration ensues.
Please please please address this issue.
This is a much needed update. ❤️
Heavy +1
I often find myself hacking together blank spaces + “fixed” positioning to add highlighted inline code blocks – which ofc breaks layouting because of fixed, but the devs have to see it. Or to add inline icons for stuff like external links or copy text to clipboard.
I thought I was doing it wrong, but it seems there’s no inline 😦
Can I add a SUPER +1 on this?? Can’t count the number of times I’ve wanted to place a span element into a block of text so that it wraps at the end of text as content changes, things like content tags, other small interactions relevant to the content. PLEASE OH PLEASE ADD THIS AT THE TOP OF YOUR BACKLOG!
anyone have a solution for this? I’m surprised to find that display inline isn’t available and I really need it for a scalable form element I’m working on.
Any updates? This is quite essential for lots of use cases actually, I’d need it so badly!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
