Skip to main content
Question

How to wrap texts with auto-layout?

  • December 14, 2023
  • 5 replies
  • 8467 views

Yulia7

Hi community, I have a question about wrapping. I need to make at the same sentence 2 text styles and 2 colors (because if apply that in one sentence, then devs in the code will see only 1 text style and 1 color). That’s why I was trying to make it with different text boxes and autolayout, creating component set. All text boxes are with “hug” but it doesn’t work as then text is going out of the frame (marked as red border), if I make text to fit to the frame with “fill”, then it separates in to 2 different rows. I need text with 2 styles and 2 colors at the same sentence in 1 row, not like different paragraphs. Is there any other way to implement that so devs would get proper code and visually everything would be looking like 1 uninterrupted sentence?

This topic has been closed for comments

5 replies

Haroll
  • Active Member
  • 273 replies
  • December 14, 2023

Hi @Yulia7

There is no way, at the moment, to wrap text the way you want.
But if your only concern is to get the information to your developers you can use different style and colors in one text block and in the dev panel they’ll get everything. As show below when selecting the single text block and entering the dev mode, you’ll find everything needed

Hope it helped


Yulia7
  • Author
  • 3 replies
  • December 14, 2023

I see it only like that, with one weight and color (Android code)


Haroll
  • Active Member
  • 273 replies
  • December 14, 2023

Sorry didn’t knew dev mode for Android worked differently.
I’m afraid you’ll have to tricks the system by adding text block and adjusting their width accordingly to your needs
In the meantime you can upvote this feature request :


Yulia7
  • Author
  • 3 replies
  • December 15, 2023

Thank you for help!


Bruce_Kobloth

@figma is this at least in the feature roadmap?


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings