Aha! Roadmaps | Mockups

The Aha! Roadmaps mockups tool helps your team visualize design concepts using wireframes and diagrams. With mockups, your team can create and share visual concepts in the same tool you use for building roadmaps, setting strategy, and planning work. The mockups tool 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, offers a highly customizable design experience that is simple enough for anyone to create a mockup.

Click any of the following links to skip ahead:

• How it works

• Collaboration

How it works

The mockup tool is available throughout Aha! Roadmaps for users with owner or contributor access. You can create mockups wherever you can 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 navigation of the mockup tool provides access to thousands of shapes and UI elements. To begin creating a mockup, simply drag and drop items directly into the canvas space. Click the More shapes option to access additional shape libraries.

You can import your own images and screenshots using the import tool located at File Import. You can also paste them from your clipboard or drag images and screenshots directly onto the canvas.

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 object's color and other visual options.

• Text: Provides text formatting functionality such as changing the font type, typographical emphasis, and position.

• Arrange: Allows precise control over pixel size and position as well as the ability to move the object forward or backward in the mockup layers.

Changes are automatically saved 15 seconds after your last revision. You can export mockups as PNG, JPEG, SVG, or XML files by navigating to File Export. When you are done working, you can close the browser tab or use the File Exit option.

After creating a mockup, it will appear alongside attachments. Users can edit the mockup by opening the mockup and clicking the blue Edit mockup button. The attachment view also provides access to a full version history of changes. To access your history, click the More options dropdown and choose Version history. From there, you can view and revert to previous versions.

Top

Collaboration

Mockups can be modified by users who have owner or contributor access. You should avoid performing edits in the mockup tool at the same time as other users. To help with this, a warning message will appear when two users have made simultaneous edits to the same mockup.

Mockups can be shared using Aha! Roadmaps presentations — this allows you to quickly share diagrams and wireframes with your various stakeholder groups.

To provide feedback on a mockup, you can add comments to specific locations on the mockup from the mockup preview modal. As changes are made to the mockup, the comments will remain on the preview.

Top