Custom shapes

Whiteboards offer a wide 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. They become even more powerful when the visuals match your design system. Custom shapes help you create reusable components that look and behave the way your product does — so every diagram and wireframe feels consistent and familiar.

With workspace and personal custom shapes, you can save frequently used components once and reuse them across your whiteboards. Add shapes, SVGs copied from tools like Figma, images, and more.

Click any of the following links to skip ahead:

• Overview

• Create a custom shape

• Use custom shapes

• Add SVGs

• Create a custom template

Overview

Custom shapes are included in Aha! Whiteboards Advanced.

Use custom shapes to standardize how your team builds diagrams, whiteboard templates, and wireframes:

• Workspace custom shapes: Shared across whiteboards in a workspace. Workspace owners can add, rename, and delete these shapes.

• Personal custom shapes: Available only to the person who creates them, in every whiteboard they can edit.

• Whiteboard custom shapes: Available only in the whiteboard where they were created.

Anyone with Edit access to a whiteboard can save content as a custom shape from the Shapes menu. You can create custom shapes from single or grouped objects, including shapes, images, lines, icons, and SVGs that you paste from design tools.

Once saved, custom shapes appear in the Custom shapes section of the Shapes menu for quick reuse.

Copy SVGs from your design tool, paste them into a whiteboard, and save them as custom shapes. This makes it easier to create wireframes that follow your product’s design system.

Top

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:

1. Add content to your whiteboard.

   1. See how to add SVGs from Figma below.

2. Select the objects you want to save together as a custom shape.

3. Right-click and select Save as custom shape.

4. Name the custom shape.

5. Choose where to save it:

   • This whiteboard: The shape will be available only in the current whiteboard.

   • Personal shapes: The shape will be available to you in every whiteboard where you have Edit access.

   • Workspace shapes: The shape will be available to everyone with Edit access in the workspace. When you create a custom shape on the workspace line level, it is available on the custom shapes menu for its child workspaces as well.

     • Only workspace owners can create custom workspace shapes.

6. Click Add.

After you save the shape, it appears in the Custom shapes section of the Shapes menu. From there, you can Rename or Delete it. Only workspace owners can rename or delete workspace custom shapes.

Top

Use custom shapes

Add any custom shape that has been saved to a whiteboard from its Shapes menu:

1. Open the Shapes menu.

2. Scroll to the Custom shapes section.

3. Select the shape you want to use.

4. Click anywhere on the whiteboard to add it.

You can resize and edit custom shapes the same way you edit other whiteboard objects.

Top

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:

1. Open the Figma file that contains the content you want to copy.

2. Select the objects that you want to paste onto your whiteboard.

3. (Optional, recommended for editable text) In the right panel, find the Export section and select SVG.

   • Open the More options menu and confirm that Outline text is not selected. This keeps text editable when you paste the SVG into your whiteboard.

4. Right-click the selected objects and select Copy as SVG.

5. In your Aha! account, open your whiteboard and paste the copied content.

6. The pasted objects appear as a group. To save them as a custom shape:

   • Right-click the group and select Save as custom shape.

   • Use Ungroup from the toolbar first if you want to save individual objects as separate custom shapes.

Top

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 available in the template gallery.

Top