Quick tips – Automate your Axure wireframe titles

When working on a large set of wireframes in Axure it can be useful to have page titles and reference numbers on the wireframe itself. I would like to share a little trick I figured out the other day after getting tired of having to update the page title on the wireframe manually each time I renamed the page itself.

Lets say we have the following wireframe in Axure – we have named the page on the left hand side in the sitemap and put a title widget on the wireframe and named it accordingly.

wf rename - step 1

The problem comes when we have to rename the page on the left. This can easily happen when you add a new screen or remove one and have to re-number everything. As you can see the change in page name is not in sync with the wireframe title meaning we have to do it manually – a major grind if you have to do it multiple times.

wf rename - step 2

There is a nifty little workaround though. Normally reserved for creating site map diagrams there is a cheeky little feature in Axure that lets you put in a reference to a page. To do this, simply drag the page from the sitemap on the left into your wireframe. You should get something like this:

wf rename - step 3

As you can see we get a little box with the name of the page in. Because this feature is primarily designed for creating site map diagrams we need to do a little bit of work to get rid of the boxed appearance. Luckily this is pretty easy as you can style it as you would any other widget:

  • Turn off the outline
  • Turn off the fill
  • Change the font size
  • Left align the text

We can now remove the old manual text title and use this instead.

wf rename - step 4

The text will now update dynamically whenever you rename the wireframe on the left hand side – try it out! There is one thing remaining to do however. If you don’t want that little icon next to the text in your prototype (this indicates it is a reference link) do the following:

  • Go to Generate -> Prototype
  • Click on interactions on the left
  • Untick “Show icon to open referenced page in new window”

WF rename - step 5

When you are working with large projects this little Axure tip can save a hell of a lot of time and I wish i’d found it out sooner. I hope you find it useful too!

Image courtesy CraftyGoat