Aha! Mockups is a world-class online wireframing and diagramming tool. It provides an integrated experience to easily build mockups, wireframes and diagrams directly from within Aha! so that you have a single tool for your product roadmapping, definition and mockups. It is built on the Draw.io open source project. The drag and drop functionality combined with an extensive library of thousands of shapes and UI elements across Bootstrap, iOS, Android, and more makes it easy for anyone to create a mockup.
Providing feedback and making refinements has never been easier -- as all of your feature documentation is accessible directly within Aha! By using mockups, your product, design and engineering teams can be completely in sync.
Please note that Aha! Mockups are best supported in Chrome browsers. Currently, saving a mockup with text elements in Safari will cause the mockup to appear blank in the attachment viewer on your record.
How it works
The mockup tool is available throughout Aha! for users with Product owner or Contributor access. You can create mockups everywhere in that you are also able to attach files, such as within Feature and Requirement description fields. Click the Create mockup option to launch the mockup tool in a new browser tab.
The left hand navigation of the mockup tool provides access to thousands of shapes and UI elements. Simply drag and drop items directly into the canvas space to begin creating a mockup. You can also click the More shapes option to access additional shape libraries. You can also import your own images from File > Import or directly pasting and dragging images and screenshots onto the canvas from your clipboard using your system's native copy and paste functionality.
When interacting with objects on the canvas, contextual editing and formatting options appear in the right side panel allowing you to quickly customize the object to your specifications.
- Style: Allows the manipulation of the objects color among other visual options.
- Text: Provides text formatting functionality such as changing the font type, typographical emphasis and positioning.
- Arrange: Allows precise control over pixel size and pixel positioning as well as moving the object forward or backwards in the mockup layers.
Changes are automatically saved 15 seconds after your last revision. When you are done working, you can close the browser tab or the File -> Exit option and return to where you were previously in Aha!
After returning to Aha!, the mockup will appear as an attachment. Users can edit the mockup by opening the attachment and clicking the blue Edit Mockup button.
Other Aha! users with Product owner or Contributor access can collaborate with you on your mockups. However, you should ensure only one user is performing edits in the mockup tool to avoid saving over each other. Mockups can also be exported directly into Notebooks making it easy to quickly share designs with your various stakeholder groups.