Components in text

+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 huge. Please, top priority!

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!!

well said and demonstrated!

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.