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.

Sponsored link

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 

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Sponsored link

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

  1. Aytac says:

    Great tip!
    Thanks for sharing…

    Regards,
    Aytac
    http://aytac.in

  2. 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

  3. 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.

  4. Maak says:

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Read more:
The Four mobile Traps
The Four Mobile Traps – New Usertesting.com Study

Usertesting.com have just published a new report in which they detail the results of user testing sessions of thousands of...

Close