Using the Responsive Axure Widget Library

This article is to show you how to create rapid responsive wireframes in Axure by using the Responsive Axure Widget Library you can download from Gumroad.

For more information see here:

Home | Axure Widgets | Responsive Axure Library

3 Files To Rule Them All

When you download the Responsive Axure Library from Gumroad you’ll be given access to 2 files:

1. Responsive Axure.lib file
2. Responsive Template.rp file

Library File

Your .lib file is a library file, place it in your Axure> Libraries folder and this will ensure it loads each time you open a new Axure file.

Your Library (.lib) file needs to be placed in the Libraries folder

Mac: Finder > Documents > Axure > Libraries (Drop here)

PC: C:\Program Files > Axure > Axure RP [version no] > Default Settings > Libraries (Drop here)

Template File

Your template file has a series of built in configurations such as adaptive views and widget styles, to enable you to start using the responsive library right away. Use this as your working file each time you want to create a new responsive project.

Your Template .RP file has a number of built in configurations

Adaptive Views

Adaptive views act breakpoints in Axure. As in, when you preview your wireframe document within the browser, the content you have contained within each view will be triggered when the browser hits that breakpoint. Adaptive views therefore allow you to tailor the experience for different viewport sizes.

For example, when the browser hits 768px or less the ‘Tablet Portrait’ view will be displayed.

Your Template File

Within the template file you’ll find a number of adaptive views have being created by default. These work in conjunction with the responsive library to ensure components/widgets adapt across each break point.

The adaptive views the template file and library are built to are as follows:

Base = 1200px

Tablet Portrait = 768px

Portrait Phone = 420px

Switching Adaptive Views On

When adding a new page to your document you must switch the adaptive views on for each page. This setting can be found within the properties section of the inspector pane. Switching on Adaptive Views within the template file will create 3 new views for each page.

A quick look at how to enable adaptive views for a page in Axure RP8

NB: Unfortunately this cannot be turned on for all pages within your document it must be turned on within each page. As such when adding a new page ensure this is added.

Responsive Grid

Grids are especially important when it comes to responsive web design as the it is the gird system which helps content respond fluidly to the browsers viewport size.

All components within the Axure Responsive Library are built to the following grid system.

Base = 1200px (12 column) / Shown when browser width >769px

Tablet Portrait = 768px (12 column) / Shown when browser width ≤768

Portrait Phone = 320px* (4 column) / Shown when browser browser width ≤420

A quick look at the responsive grid all widgets are built to

N.B But why 320px I here you say? 320px is the the smallest iPhone resolution, most websites generally take this as the smallest mobile screen size to design for. The mobile view of all components therefore is set at 320px. Meanwhile the Chrome browser does not let you reduce the size of the screen lower than 320px as such the breakpoint is set to 420px (triggers the view) meanwhile the grid and all components will be set to 320px.

Widgets

Within the widget library are a series of widgets/components, think of these as a series of UI elements or UI patterns such as carousels, cards etc. These go way beyond the default Axure widgets of basic shapes.

Each widget is built to the responsive grid system mentioned above meaning all you need to do is drag and drop your component onto the page.

All widgets are built as groups, and all elements within the group are named, making it easy for you to understand what each layer is doing.

You can built responsive wires easy with the drag and drop responsive widgets

Interactions

Where possible basic interactions are built into components to add movement to pages meaning no more endless tweaking of dynamic panels and interactions. Examples of interactive components are carousels, accordions, alerts, videos, and galleries.

A quick look at some of the widgets with built in interactions

Responsive Typography

By default, Axure’s type widgets i.e. H1, H2 etc remain the same size across all views. Responsive design however calls for type that scales across breakpoints. As such the Responsive Axure Library contains a series of type components with type that scales across breakpoints, meaning your H1 will look consistent across all pages and scale across breakpoints.

A quick look at the responsive type sizes within the Responsive Axure Library

Embedded Widget Styles

Built into all components is a series of embedded styles, these are outlined within the Style Guide. Don’t like the look of a widget? Substitute it with a different style.

Want to quickly update the look and feel of your wirefames? Then update the Global Widget Style.

All widgets share consistent styling making it easy to update global styling rules

What widgets/component are there?

There are over 100+ components within the library, to view the full set of components simply visit www.responsiveaxure.com

Home | Axure Widgets | Responsive Axure Library

Found this article useful? Please feel free to leave a 💬 or quick ❤️ to let me know your thoughts. If you want to start up a conversation send a little 🐦 to @kyecass ✌️

Psssttt…. How much is it? Where can I get it?

The library is available to purchase for £25 in the UK, $32 in the US. What’s more purchasers will receive all updates to the library for free, for LIFE.