🏷️

Text: Flexo

The Tag

🏷️

[flexo] What does it do? The text box will expand according to the content connected from your Data Library. Which layer does it work on? A text box

image

🏗 How do I set it up in the design tool?

  1. Copy & paste the [flexo] Tag into the layer name of the text box you want to be flexible.
  2. image
  3. When you add flexo elements, make it so the text box must be the bottom-most element of the container it is in.
  4. You can only have 1 flexo text per container.

    image
  5. If you have anything below that text box, create a separate container.
  6. image
  7. Import design file into Bravo.
  8. Set up your binding as usual, select the text box layer and match it with the data record of the text content. You can use the example request below to get sample data.
  9. image
  10. Preview on Bravo Vision. 🚀

👉

Flexo FYI's 1. The text box will not shrink, its size in the design tool determines the minimum height. So if the connected content is less than your placeholder text, there may be extra spacing. 2. The flexo effect does not apply to other elements. For example, if the text box is grouped with a rectangle shape, it will not expand the rectangle below.

💎 Resources

Figma Example

Open & duplicate the Figma file below to see how it's set up.

Data Example

Use this request URL to get sample data for the example app above.

https://example-data.draftbit.com/product_reviews?_limit=5