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:
3 Files To Rule Them All
When you download the Responsive Axure Library from Gumroad you’ll be given access to 2 files:
- Responsive Axure.lib file
- 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.
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.
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.
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
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.
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.
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.
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.
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
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.
