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 

Read more:
Scrumboard Cards
Responsive Design Using Contextual Product Backlogs and User Stories

Responsive design is one of the biggest challenges to solve in the modern UX world. How can we design effectively...