CheatSheetsHero

Catalog / Axure RP UI/UX Design Cheatsheet

Axure RP UI/UX Design Cheatsheet

A comprehensive cheat sheet for UI/UX designers using Axure RP, covering essential features, interactions, and best practices to create interactive prototypes.

Axure RP Interface Basics

Workspace Overview

Main Toolbar: Access to common functions like save, open, publish, and generate HTML.
Widgets Panel: Library of UI elements to drag and drop onto the canvas.
Outline Panel: Hierarchical view of all elements on the current page.
Properties Panel: Context-sensitive settings for selected widgets.
Interactions Panel: Define interactivity using events, cases, and actions.

Canvas: The main area where you build your prototypes. Drag and drop widgets from the library here to create layouts and flows.

Widget Libraries

Default Library

Includes basic shapes, text fields, buttons, images, and dynamic panels.

Font Awesome

Contains a vast library of scalable vector icons.

Wireframe Library

Offers low-fidelity UI elements for rapid prototyping.

More Libraries

You can download and import additional widget libraries from the Axure website and community resources.

Properties Panel Essentials

Style

Adjust the appearance of widgets, including colors, fonts, borders, and fills.

Size & Position

Precisely control the dimensions and location of widgets on the canvas.

Interactions

Add interactivity by defining events and actions (e.g., OnClick, OnMouseOver).

Notes

Add annotations to widgets for documentation and collaboration.

Interactions and Dynamic Content

Common Interactions

OnClick

Triggers an action when a widget is clicked.

OnMouseOver

Triggers an action when the mouse cursor hovers over a widget.

OnPageLoad

Triggers an action when the page loads.

OnKeyDown

Triggers an action when a key is pressed.

Actions

Open Link: Navigates to another page or external URL.
Show/Hide: Controls the visibility of widgets.
Move: Animates the movement of widgets.
Set Text: Modifies the text content of a widget.
Set Variable Value: Updates the value of a global variable.
Enable/Disable: Enable or disable a widget.

Dynamic Panels

Dynamic panels allow you to create multi-state widgets that can change their appearance and content based on interactions. Useful for creating tabs, accordions, slideshows, and other complex UI elements.

Key Features:

  • Multiple states within a single widget.
  • Transitions between states (e.g., fade, slide).
  • Ability to set initial state on page load.

To use a dynamic panel, drag the Dynamic Panel widget onto the canvas. Double-click to add states, and configure interactions to switch between states.

Variables

Global Variables

Variables accessible across all pages of the prototype. Useful for storing user input, session data, and application state. To create, go to Project > Global Variables.

Local Variables

Variables that are only accessible within a specific interaction case. Useful for temporary calculations and conditional logic.

Usage

Use variables to store and retrieve data, create conditional logic (e.g., if/else statements), and customize interactions based on user input.

Advanced Prototyping Techniques

Adaptive Views

Create different layouts for various screen sizes and devices using adaptive views. This ensures your prototype is responsive and provides an optimal user experience across different platforms.

To create adaptive views, go to View > Adaptive Views. Define breakpoints for different device sizes (e.g., mobile, tablet, desktop), and then customize the layout for each view.

Masters

Masters are reusable UI components that can be used across multiple pages of your prototype. This helps maintain consistency and simplifies the process of updating common elements (e.g., headers, footers, navigation menus).

To create a master, select the widgets you want to include, right-click, and choose Create Master. You can then drag and drop the master onto any page. Changes made to the master will automatically be reflected in all instances.

Animations and Transitions

Show/Hide Effects

Use fade, slide, or other effects when showing or hiding widgets to create smooth transitions.

Move Animations

Animate the movement of widgets using linear, ease-in, ease-out, or custom easing functions.

Rotate and Scale

Transform widgets by rotating or scaling them to create dynamic effects.

Collaboration and Handoff

Team Projects

Enable team collaboration by creating team projects on Axure Cloud or a shared network drive. This allows multiple designers to work on the same prototype simultaneously.

  • Check In/Check Out: Manage changes and prevent conflicts by checking out pages or masters before editing them.
  • Annotations: Add comments and notes to provide feedback and communicate design decisions.

Generating HTML Prototypes

Generate interactive HTML prototypes that can be shared with stakeholders for review and testing. Axure RP provides options to customize the appearance and functionality of the generated output.

  • Publish to Axure Cloud: Host your prototype online and share it with a link.
  • Generate Local HTML: Create a self-contained HTML folder that can be opened in any web browser.

Handoff to Developers

Inspect Mode

Developers can use Inspect mode in the generated HTML prototype to view detailed specifications for each widget, including styles, dimensions, and interactions.

Download Assets

Download all images and other assets used in the prototype.

Documentation

Include detailed notes and annotations to provide context and explain design decisions.
Download PDF