Whiteboards offer a broad range of shapes for wireframing, sketching designs, mapping processes, and building out early-stage plans. But whiteboards are made even more compelling when they reflect your organization's design system. Custom shapes help you maintain a consistent visual style across your whiteboards, making them ideal for building wireframes with design components that reflect your product. Customize your options with shapes, SVGs imported from Figma, images, and more.
Click any of the following links to skip ahead:
Overview
Custom shapes are included in Aha! Whiteboards Advanced.
Users with Edit access to a whiteboard can save custom shapes to its Shapes menu. Once saved, the new custom shape will be available for other whiteboard users to access. You can create custom shapes from single or grouped objects on your whiteboard, including shapes, images, and SVGs.
You can copy SVGs to your whiteboard from design tools like Figma and save them as custom shapes. Then, use them to create wireframes on your whiteboard that follow your design system.
A custom shape is only available on the whiteboard where a user originally created it, but you can copy custom shapes to other whiteboards or add them to custom templates for broader accessibility.
Create a custom shape
Create a custom shape in seconds whenever you want to save a whiteboard object to use later. This is ideal for logos and design components you use frequently for wireframing. Save new custom shapes from images, icons, shapes, lines, SVGs, and other content you can add from your whiteboard's toolbar.
Here is how to create a custom shape:
-
Add content to your whiteboard.
See how to add SVGs from Figma below.
Select the objects you want to save together as a custom shape. Then, right-click and select Save as custom shape.
Enter a name and click Save.
Once the shape is saved, you will find it in the Custom shapes section of the Shapes menu. From here, you have the option to Rename or Delete it.
Use custom shapes
Add any custom shape that has been saved to a whiteboard from its Shapes menu:
Open the Shapes menu and scroll to Custom shapes.
Select the shape you want to add to the whiteboard.
Click the whiteboard to add the shape.
Add SVGs
Create custom shapes from design components saved as SVGs. This is ideal for building wireframes that follow your brand guidelines. To get started, just copy and paste SVGs onto your whiteboard.
You can also copy an entire wireframe in Figma as an SVG and import it onto your whiteboard. To add a Figma wireframe to your whiteboard:
Open the Figma file containing the content you want to copy.
Select the objects you want to paste onto your whiteboard.
(Optional) In the right side panel, find the Export section and select SVG. Then, click the More options menu and ensure the box next to Outline text is not selected. This ensures an object with text is editable once you paste it into your whiteboard. Do not skip this step if you need to edit text on any of the objects you are moving to your whiteboard.
Right-click the selected objects and select Copy as SVG.
In your Aha! account, navigate to your whiteboard and paste the copied content.
The pasted objects from Figma will be grouped on your whiteboard. Right-click the grouped content and select Save as custom shape or select the Ungroup option from the toolbar before saving objects individually.
Copy custom shapes
Custom shapes are available within the whiteboard where a user originally created them, but you can copy custom shapes from one whiteboard to another. There are two ways to do this: directly from the Shapes menu or by creating a custom template.
Copy from the shapes menu
Copying custom shapes from the Shapes menu is a quick way to move custom shapes into another whiteboard.
Open the Shapes menu.
In the upper right of the Custom shapes section, click the copy icon.
Navigate to the whiteboard where you want to use the custom shapes and paste them in.
Create a custom template
Creating a template with your custom shapes makes them available for use in any whiteboard. This is a great way to share design components with your team:
Add custom shapes to your whiteboard.
Click the ... More options menu in the upper right and select Save as template.
Note: If you are viewing your whiteboard in full screen, exit full-screen mode using the arrow icon in the upper right to access document options.Enter a name for your template and click Create template.
Once you save your template, it will be added to the template gallery.