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 

5 thoughts on “Quick tips – Automate your Axure wireframe titles”

  1. Maak says:

    The element that this creates however will not change with adaptive views So I cant use this.

  2. Chris Becker says:

    Great idea! I never thought of using it that way, can you apply a widget style to that item?

    The way I have accomplished this in my wireframes is by having an OnPageLoad event that “Sets Text” of page title to a specific text field. This can even be a master with Lock In Place as the drop behavior, so that the page titles are in the exact same place every time.

  3. Antonia says:

    Would this work for Axure 7 as well?

    Thanks for sharing.

    – Antonia

    1. Chris Mears says:

      Hi Antonia – as far as i’m aware it should yes

  4. Aytac says:

    Great tip!
    Thanks for sharing…


Comments are closed.

Read more:
Tube Train
Don’t make the user notice your technical restrictions

The journey planner on TFL is an example of technical limitations being pushed forward to the user interface. The user...