Skip to main content
VSepp
May 25, 2023 8:44 AM UTC
Question

Ability to "auto-layout" two text nodes as one block of text, flowing continuously?

I have 2 texts - short one and a long one. The long one must start from the same, first line, and then continue below it as it were one text block (sample 1).

I got as far as adding “paragraph indent” to the second node from sample 2, creating “static” solution.

Is there a way to create auto-layout ie if I edit first text, the second one moves back or forth accordingly?

Screenshot 2023-05-25 at 11.22.08

    This topic has been closed for replies.

    4 replies

    tank666
    tank666
    May 25, 2023 9:35 AM UTC

    This cannot currently be achieved with auto layout. But you can have one text object instead of two, in which you can set the font weight you want for a certain range of text.

    UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
    Rob_Curtis
    Aug 10, 2023 5:39 AM UTC

    This is more important now with Variables since variable text doesn’t account for multiple font styles (font weights, italics, etc.) within the same Text block when applied to a Text block.

    Thus, you’d need two (or more) consecutive Text components with single styles. For example, I want to display “@Mention Name Here is the text of the message”. When I apply a text variable to this, the bold style is being overridden and it all appears as normal weight font.

    I ran into this problem when building with Variables and cannot find a solution.

      JulsQQ
      JulsQQ
      New Participant
      Oct 18, 2024 5:48 AM UTC

      I think I found a solution to this is by using Auto Layout and breaking down the sentence into blocks of words.

      John_Abraham
      John_Abraham
      Oct 18, 2024 6:37 AM UTC

      To achieve the effect of “auto-layout” for two text nodes flowing as one continuous block of text, you can group the text nodes within an auto-layout frame. This allows the text to adjust dynamically based on content, maintaining a seamless flow. Adjust padding and spacing to control the visual appearance and ensure continuity between the two nodes.

      Terms & ConditionsAccessibility statement