Change Color on Widget Using Variables

Axure RP 8
3

Hi KRLyric, so there is a way to do this but it’s a little bit of a work around. It involves using images as backgrounds for your widgets (ie set image behind the widget and set the actual widget to be transparent, etc)

@Alex_Axure super keen to see this feature in the future.

So here is what you do.

Step 1: Add a placeholder image from the common library and call it something you will remember (ie background_image)

Step 2: Go to a website that creates an image URL based on a hex colour. I use https://dummyimage.com/. So what this lets me do is allocate a value to a colour within the URL parameters. For example https://dummyimage.com/250/ffffff/000000, where the size and colours are specified. Now the only problem with this site is that it shows the dimenstions (ie 250 x 250) in the image. This can be resolved by changing the dimension to 1. This will give you a 1x1 image that doesn’t show the dimensions within the image. ie the URL below:

This also lets you specify a hex colour in the url. So if I want to change this to a shade of pink (#ec70f0)

This now has the image colour I need.

So how does this apply to your prototype.

Step 3 - Create your text field (and label it) for input

Step 4 - Create a trigger button (or onlostfocus or similar event)

  • Add an OnClick event here.

  • Set image and change the Default dropdown from Image to Value and click the fx option to create a expression.

  • Add the URL for the image you created with the colour in the top section

  • Create a new local variable and LVAR1 should = text on widget of the text field the user will enter the hex into

  • Now simply replace the HEX code that is currently in the image URL with the LVAR1 which should look something like https://dummyimage.com/1/[[LVAR1]]/000000

Now save it and test.

What you should find is that when the button is now pressed the background colour of the widget will change. The great thing with this method is that the image placeholder will dictate the size so you can add any X and Y dimension you need.

That is how I am ‘making do’ with allowing my prototype users to change the colour on the fly.

Let me know if you need help with any of the above.

8 Likes