I would like to have text with background colour and I want the background colour to adjust according to the length of the text (Single line or multi line text). For e.g. I would like to create the card shown below with 2 lines of heading text having yellow background.
When I created the card using auto layout, the background colour filled the entire container of the heading text as shown below.
Unfortunately, there are no such settings in Auto Layout or Text Layer. You need to add highlighting to the text yourself, for example by creating rectangles or frames.
Actually, there’s a way to do this but is basically a hack, here’s how you can do it 
Hop this helps
Also, as a workaround, you can create a highlighter font. And you get something like this:
I also found one way to hack the auto layout, which I shared here:
But this method is not as flexible as the font creation method.
Thank you @Bruno_Figueiredo
Thank you @tank666 This is exactly what I am looking for. When I use background fill for the text, it fills up the entire container so when I drag the container like you do in the video, the background colour fills up the whole container and not just the text. Can you please show me the steps to achieve the effect which is on your video?
I created a font where each glyph is a rectangle that is taller and wider than the original text glyph (I used Roboto in my example). An example of such a font:
Installed this font to the operating system. Then in Figma I created a text layer with the font Roboto, duplicated this layer and changed the font to a highlighter font, and placed this text layer below the original one.
Thus, I got two text layers with the same text, but with different fonts.
Thank you @tank666
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
