This feature should ease replacement of a predefined text in a component. You can change the text, font size, color, stroke, or opacity of the text element.


1. Start with the component variables again and create the following variables:

  • Variable Text with type String
  • Variable Font Size with type Int
  • Fill with type Color
  • Opacity with type Boolean

The Opacity here is similar to Opacity animation, which means that the text will be visible if the value of Opacity formula is within the Opacity min/max range.

2. Now create a text element:


3. Fill in the Component Variables.


4.Fill in the Replacement -> Text in the Properties window. Note: The variable names are case sensitive.


To set the Fill Replacement, you are presented with the dialog:


5. When you have filled in all properties, save your component.


6. The text will change according to the value of an attached component variable. After saving the component, import it into your view.


Replacements are important for complex components where you can replace the component text (button text, for example) with just one click.