My colors don’t show in Bravo Vision

Hey ,

Is it static text (coming from Figma) or dynamic text? (coming from database).

I've just check in my app and there's no problem with static text that comes for Figma. When it comes to dynamic text though , I don't think there's a way to tell Bravo which word should use which color (in one text layer). For those cases, my workaround is to deliver text as styled HTML to Bravo.

Didn’t think about that 🧐

Yea it’s dynamic text, pulled from Airtable. How do you do your workaround ? You style it directly in Airtable ? If it’s what you mean, I’m gonna forget this idea 😅

Yeah, I know - this sounds like a pain in the ass 🙂 But it's more a Figma thing than Bravo limitation. And the more You work with Bravo, the more it's probable you will have to do that at one point.

What I do is:

1. I create an additional column in Airtable called the same as my original column but with the "(Styled)" suffix

   My value --> My value (Styled)

2. I write my HTML in code editor because writing directly in Airtable sucks 🙂

   My value is <span style="color: red;">{My value}</span>

   - text in curly brackets is your original column
   - text that is not styled using HTML will use Your Figma original styling

3. Now it's time to add text conjunctions and escape double quotes in your code (Airtable requirement; this is very PHP-like)

   "My value is <span style=\"color: red;\">" & {My value} & "</span>"

   - ampersand is a text conjunction sign in Airtable

4. The last thing is to add [component:text:html] tag to the text layer in Figma and it's ready for data binding in Bravo Studio

This may sound complicated at first but I highly recommend trying it at least once because it helps You to understand what are Bravo and Airtable (or any database) roles in this tool stack.

After that, you can create pretty awesome stuff like combining data from different tables, calculating values from different columns, or checking empty values and replacing them with a placeholder (using IF formula in Airtalbe) before sending it to Bravo.

Awesome !

Thank you very much 😱
It worked great 😁

That's great ! The only thing left is to change title of this post to [SOLVED] (I guess this helps Bravo team to navigate through the help requests)

this is a great idea. Another use case I see for this is to set different text colors for various order states.