# How to Create Wireframes and UI Mockups in Confluence with Excalidraw Plus

May 2, 2026 ·

<!-- -->

15 min read

[NGPilot](https://ngpilot.com)

Wireframes are the backbone of every user interface design process. They let product managers, designers, and engineers align on layout, content hierarchy, and interaction flow before writing a single line of code. With [Excalidraw Plus for Confluence](/docs/Excalidraw-plus-for-Confluence/usage.md), you can create wireframes and UI mockups directly inside your Confluence pages, keeping design artifacts next to requirements, user stories, and technical specs.

This tutorial walks through the full wireframing workflow in Excalidraw Plus: from setting up a grid and building component patterns to prototyping multi-screen flows and collaborating with your team. By the end, you will have a repeatable process for producing professional wireframes without leaving Confluence.

## Why wireframe in Confluence?[​](#why-wireframe-in-confluence "Direct link to Why wireframe in Confluence?")

Most teams already use Confluence for product requirements, sprint planning, and technical documentation. Storing wireframes in a separate design tool creates friction: links break, versions drift, and non-designers struggle to access files. Excalidraw Plus eliminates that gap by embedding a full drawing canvas into any Confluence page.

Key advantages:

* **Zero context switching**: Design and document in the same environment. Stakeholders view wireframes inline without opening external tools or downloading files.
* **Automatic version history**: Confluence tracks page revisions, so every wireframe iteration is preserved and recoverable.
* **Collaboration by default**: Anyone with page access can view the wireframe. Editors can open the Excalidraw canvas to suggest changes or add annotations.
* **Export flexibility**: Export wireframes as PNG or SVG for presentations, or keep them as JSON backups for archival.

## Prerequisites[​](#prerequisites "Direct link to Prerequisites")

Before you start, make sure you have the following:

* A Confluence Cloud instance with admin or space-level permissions to install apps.
* [Excalidraw Plus for Confluence](/docs/Excalidraw-plus-for-Confluence/usage.md) installed from the Atlassian Marketplace.
* A Confluence page where you want to embed your wireframe (a product requirements page, epic description, or dedicated design spec page all work well).

## Step 1 -- Install Excalidraw Plus for Confluence[​](#step-1----install-excalidraw-plus-for-confluence "Direct link to Step 1 -- Install Excalidraw Plus for Confluence")

If your team has not installed the app yet:

1. Log in to your Confluence instance as an administrator.
2. Navigate to the Atlassian Marketplace (or go to **Settings** then **Manage apps**).
3. Search for "Excalidraw Plus for Confluence".
4. Click **Get app** or **Try it free** and follow the installation wizard.

The app installs a macro that you can insert on any Confluence page. No additional browser extensions or desktop software are required.

## Step 2 -- Insert the Excalidraw macro on a Confluence page[​](#step-2----insert-the-excalidraw-macro-on-a-confluence-page "Direct link to Step 2 -- Insert the Excalidraw macro on a Confluence page")

Once the app is installed, adding a wireframe canvas takes seconds:

1. Open the Confluence page where you want the wireframe and click **Edit**.
2. Type `/excalidraw` in the editor body and select **Excalidraw Plus** from the macro dropdown. You can also click the **+** button in the toolbar, search for "Excalidraw Plus", and click to insert.
3. The Excalidraw editor opens inline on your page. You now have a full drawing canvas with shapes, text, arrows, freehand tools, and a library panel.

The editor supports the full Excalidraw feature set: rectangles, diamonds, circles, arrows, lines, freehand pencil, text labels, and color styling.

## Step 3 -- Set up a layout grid for your wireframe[​](#step-3----set-up-a-layout-grid-for-your-wireframe "Direct link to Step 3 -- Set up a layout grid for your wireframe")

Precision matters in wireframing. Misaligned elements distract reviewers and make layouts harder to interpret. Excalidraw Plus includes grid and snap features that keep your wireframes clean.

### Enable the grid[​](#enable-the-grid "Direct link to Enable the grid")

1. Open the Excalidraw editor on your page.
2. Toggle the **grid** option in the canvas settings. A dot-grid or line-grid overlay appears on the canvas.
3. Enable **snap to grid** so that shapes and text snap to grid intersections as you drag them.

### Choose your grid rhythm[​](#choose-your-grid-rhythm "Direct link to Choose your grid rhythm")

For most web wireframes, a 12-column grid at 60-80 pixel column width works well. While Excalidraw does not enforce a specific column count, you can simulate one by:

* Drawing thin vertical guide lines at equal intervals to mark column boundaries.
* Grouping the guide lines together so they move as a single unit.
* Locking the guide group to prevent accidental edits.

For mobile wireframes, use a narrower canvas (roughly 375-428 pixels wide) and a 4-column grid.

### Tips for grid-based layouts[​](#tips-for-grid-based-layouts "Direct link to Tips for grid-based layouts")

* **Consistent spacing**: Use the same gap between elements throughout the wireframe. A 16-pixel or 24-pixel spacing rhythm is standard in most design systems.
* **Alignment**: Align text labels and shape edges to the same grid lines. This visual consistency makes wireframes easier to scan.
* **Bounding boxes**: Draw a large rectangle to represent the browser viewport or mobile screen, then place all components inside it. This frames the wireframe and clarifies the intended canvas size.

## Step 4 -- Build wireframe components using shape libraries[​](#step-4----build-wireframe-components-using-shape-libraries "Direct link to Step 4 -- Build wireframe components using shape libraries")

Excalidraw Plus provides a library panel with pre-made shapes. For wireframing, you will primarily use basic geometric shapes combined with text labels to represent UI components. Below are the core component patterns you can build.

### Buttons[​](#buttons "Direct link to Buttons")

Buttons are the most common interactive element. To create a wireframe button:

1. Draw a **rounded rectangle** (use the rectangle tool, then adjust corner radius).
2. Add a **text label** centered inside the rectangle (for example, "Submit", "Cancel", "Add to Cart").
3. Style the fill color to indicate button hierarchy: a solid fill for primary actions, a border-only outline for secondary actions, and a lighter fill for tertiary or ghost buttons.

**Button variations to include in your wireframe library:**

| Button type | Visual treatment                             | Use case                           |
| ----------- | -------------------------------------------- | ---------------------------------- |
| Primary     | Solid fill, white text                       | Main CTA (Submit, Save, Confirm)   |
| Secondary   | Border outline, dark text                    | Alternative actions (Cancel, Back) |
| Destructive | Red solid fill                               | Dangerous actions (Delete, Remove) |
| Icon button | Small square or circle with icon placeholder | Toolbar actions                    |
| Toggle      | Rounded rectangle that switches fill state   | On/off settings                    |

### Form inputs[​](#form-inputs "Direct link to Form inputs")

Forms are central to most applications. To wireframe a form field:

1. Draw a **rectangle** with a thin border to represent the input box.
2. Add a **small text label** above or to the left of the box (for example, "Email Address", "Password").
3. Optionally draw a **thin line** inside the box to hint at placeholder text (for example, a faint "<user@example.com>").
4. For dropdowns, add a small **triangle** or chevron shape at the right edge of the input box.

**Form input patterns:**

| Input type    | Wireframe representation                               |
| ------------- | ------------------------------------------------------ |
| Text input    | Rectangle with label above                             |
| Textarea      | Taller rectangle with multiple faint lines inside      |
| Dropdown      | Rectangle with small downward triangle at right        |
| Checkbox      | Small square with optional checkmark line inside       |
| Radio button  | Small circle with optional filled inner circle         |
| Toggle switch | Rounded rectangle with a small circle inside           |
| File upload   | Dashed rectangle with an upward arrow icon placeholder |

### Navigation bars[​](#navigation-bars "Direct link to Navigation bars")

Navigation bars establish the page structure. To create a top navigation wireframe:

1. Draw a **horizontal rectangle** spanning the full width of your viewport frame.
2. Add a **text label or logo placeholder** (a small rectangle) on the left side.
3. Add **text labels** for each nav item spaced evenly across the bar.
4. Optionally underline or bold one item to indicate the active page.

For side navigation:

1. Draw a **vertical rectangle** along the left edge of the viewport.
2. Stack **small rectangles or text labels** vertically inside the sidebar to represent menu items.
3. Add **indentation** (offset text labels to the right) to indicate nested sub-items.

### Cards[​](#cards "Direct link to Cards")

Cards are ubiquitous in modern UI design. To wireframe a card component:

1. Draw a **rounded rectangle** for the card container.
2. Add a **thin horizontal line** or spacing near the top to separate a header area.
3. Place a **smaller rectangle** or image placeholder in the upper portion for a thumbnail or hero image.
4. Add **text lines** below the image placeholder to represent a title (one thicker line) and description (two or three thinner lines).
5. Optionally add a **row of small shapes** at the bottom to represent action buttons or metadata (date, tags, author).

**Card pattern layout (textual description):**

```
+--------------------------------------+

|  [Image placeholder - gray rectangle]|

|                                      |

+--------------------------------------+

|  Title line (bold, single line)      |

|  Description line 1 (thinner)        |

|  Description line 2 (thinner)        |

+--------------------------------------+

|  [Tag]  [Tag]          [Action btn]  |

+--------------------------------------+
```

### Modals and dialogs[​](#modals-and-dialogs "Direct link to Modals and dialogs")

Modal overlays draw attention to critical actions. To wireframe a modal:

1. Draw a **semi-transparent rectangle** covering the full viewport to represent the backdrop overlay.
2. On top of it, draw a **centered rounded rectangle** for the modal container.
3. Add a **header row** with a title and an "X" close icon (a small circle or cross).
4. Add **content area** with text lines or form inputs.
5. Add a **footer row** with action buttons (for example, "Cancel" and "Confirm").

**Modal pattern layout:**

```
+============================================+

|  Modal Title                         [X]  |

|--------------------------------------------|

|                                            |

|  Content area: text, form fields,          |

|  or other components go here.              |

|                                            |

|--------------------------------------------|

|                     [Cancel]  [Confirm]    |

+============================================+
```

### Tables and data grids[​](#tables-and-data-grids "Direct link to Tables and data grids")

For data-heavy interfaces, wireframe tables using:

1. A **large rectangle** as the table container.
2. A **darker or thicker row** at the top for column headers.
3. **Horizontal lines** dividing rows.
4. **Vertical lines** dividing columns.
5. Small **icon shapes** in header cells to indicate sortable columns (tiny triangles).

### Reusable component tips[​](#reusable-component-tips "Direct link to Reusable component tips")

* **Group elements**: Select all shapes that make up a component (for example, the card rectangle, its image placeholder, and text lines), then group them. Grouped elements move and resize together.
* **Duplicate for consistency**: Once you build one card, duplicate it to create additional cards with the same proportions. This maintains visual consistency across your wireframe.
* **Save to library**: Save frequently used components to the Excalidraw library panel so you can drag them into future wireframes without rebuilding from scratch.
* **Use consistent colors**: Limit your palette to 3-4 grayscale tones plus one accent color. Wireframes should be low-fidelity; color should indicate interaction states, not final visual design.

## Step 5 -- Create multi-screen wireframe flows[​](#step-5----create-multi-screen-wireframe-flows "Direct link to Step 5 -- Create multi-screen wireframe flows")

A single screen rarely tells the full story. Most user workflows span multiple pages or states. Excalidraw Plus makes it easy to lay out multiple wireframe screens on a single canvas.

### Organize screens on the canvas[​](#organize-screens-on-the-canvas "Direct link to Organize screens on the canvas")

1. Space viewport frames horizontally (left to right) to represent the primary user flow.
2. Draw **arrows** between frames to indicate navigation or state transitions.
3. Label each arrow with the **trigger action** (for example, "User taps Submit", "System loads results", "Error state").
4. Add **screen titles** above each viewport frame (for example, "Screen 1: Login", "Screen 2: Dashboard", "Screen 3: Error").

### Annotate interaction details[​](#annotate-interaction-details "Direct link to Annotate interaction details")

Use text callouts and arrows to explain interactions that are not obvious from the visual layout alone:

* **Hover states**: Draw a small annotation box next to an element that says "On hover: tooltip appears" or "On hover: button changes to filled state."
* **Error states**: Duplicate a form screen and add red-highlighted error messages below the relevant fields. Connect it to the normal state with a labeled arrow.
* **Loading states**: Draw a skeleton screen or spinner placeholder to show what the user sees while data loads.

### Prototyping workflow tips[​](#prototyping-workflow-tips "Direct link to Prototyping workflow tips")

While Excalidraw Plus does not generate clickable prototypes, you can simulate a prototyping workflow within Confluence:

1. **Create a dedicated wireframe page**: Use a parent page titled "Wireframes -- \[Feature Name]" and add child pages for each major flow.
2. **Link screens**: Use Confluence page links or anchor links to connect related wireframe pages, creating a navigable prototype experience.
3. **Embed multiple macros**: Place several Excalidraw macros on the same page, each containing a different screen or state. Add text descriptions between them to narrate the user journey.
4. **Review cycle**: Ask stakeholders to add comments directly on the Confluence page. Inline comments can reference specific wireframe screens by position or label.
5. **Version tracking**: Each time you publish the page, Confluence creates a revision. Use the page history to compare wireframe iterations over time.

## Wireframe fidelity levels[​](#wireframe-fidelity-levels "Direct link to Wireframe fidelity levels")

Different stages of the design process call for different levels of detail. Excalidraw Plus supports the full spectrum.

### Low-fidelity wireframes[​](#low-fidelity-wireframes "Direct link to Low-fidelity wireframes")

Best for early exploration and brainstorming.

* Use **simple rectangles and lines** only.
* Omit real text; use placeholder lines (gray bars) to represent content.
* Focus on **layout and hierarchy**, not visual polish.
* Build quickly to evaluate multiple layout options side by side.

### Medium-fidelity wireframes[​](#medium-fidelity-wireframes "Direct link to Medium-fidelity wireframes")

Best for stakeholder reviews and requirements documentation.

* Add **realistic text labels** (actual button copy, headings, form field names).
* Include **component patterns** (proper button styles, navigation structure, card layouts).
* Annotate with **interaction notes** and state descriptions.
* Use **consistent spacing and alignment** via the grid.

### High-fidelity mockups[​](#high-fidelity-mockups "Direct link to High-fidelity mockups")

Best for handoff to developers or visual designers.

* Apply **realistic proportions** and pixel-accurate spacing.
* Include **actual content** (real text, image placeholders with correct aspect ratios).
* Use **grayscale plus one accent color** to distinguish interactive elements.
* Add **detailed annotations** for animations, transitions, and responsive breakpoints.

## Wireframing best practices[​](#wireframing-best-practices "Direct link to Wireframing best practices")

Keep these principles in mind as you build wireframes in Confluence:

### Start with content, not chrome[​](#start-with-content-not-chrome "Direct link to Start with content, not chrome")

Before drawing navigation bars and footers, list the content that each screen needs to display. Arrange content blocks first, then wrap them in chrome (headers, sidebars, footers). This prevents the layout from dictating the content.

### Use real text, not lorem ipsum[​](#use-real-text-not-lorem-ipsum "Direct link to Use real text, not lorem ipsum")

Realistic text helps stakeholders evaluate whether the layout accommodates actual content. If real copy is not available, use text that matches the expected length and tone. "Lorem ipsum" obscures content fit issues.

### Label everything[​](#label-everything "Direct link to Label everything")

Add text labels to every interactive element, even in low-fidelity wireframes. Reviewers should never have to guess what a shape represents. A button that says "Primary CTA" is clearer than an unlabeled rectangle.

### Show multiple states[​](#show-multiple-states "Direct link to Show multiple states")

Do not wireframe only the happy path. Include error states, empty states, loading states, and edge cases. This catches usability problems early and gives developers a complete picture of what to build.

### Keep wireframes separate from visual design[​](#keep-wireframes-separate-from-visual-design "Direct link to Keep wireframes separate from visual design")

Wireframes communicate structure and interaction, not visual aesthetics. Avoid spending time on colors, fonts, or pixel-perfect alignment at the wireframe stage. Save visual refinement for a dedicated design tool or a later iteration.

### Organize your Confluence wireframe library[​](#organize-your-confluence-wireframe-library "Direct link to Organize your Confluence wireframe library")

Over time, your team will accumulate a set of reusable wireframe components. Keep them organized:

* Create a **Confluence space** or parent page dedicated to wireframe libraries.
* Store frequently used Excalidraw component groups as **separate macro instances** that team members can copy.
* Use **consistent naming conventions** for wireframe pages (for example, "Wireframe: \[Feature] -- \[Screen] -- \[State]").
* Tag wireframe pages with a common label so they are easy to find via Confluence search.

## Exporting and sharing wireframes[​](#exporting-and-sharing-wireframes "Direct link to Exporting and sharing wireframes")

Excalidraw Plus supports multiple export formats:

* **PNG**: Best for embedding wireframes in presentations, emails, or external documents. Use a transparent background if you plan to overlay the wireframe on other content.
* **SVG**: Best for scalable wireframes that need to look crisp at any size. SVG is also editable in vector tools like Figma, Sketch, or Illustrator.
* **JSON**: Use JSON export to create backups of your wireframes or to transfer them between Confluence instances.

To export, click the menu icon in the Excalidraw editor and choose your preferred format. The exported file preserves all shapes, text, and styling.

## Common wireframe patterns for popular layouts[​](#common-wireframe-patterns-for-popular-layouts "Direct link to Common wireframe patterns for popular layouts")

Here are textual descriptions of common layout patterns you can recreate in Excalidraw Plus.

### Dashboard layout[​](#dashboard-layout "Direct link to Dashboard layout")

```
+----------------------------------------------------------+

| [Logo]  Nav Item 1  Nav Item 2  Nav Item 3    [Avatar]  |

+----------+-----------------------------------------------+

|          |  +----------+  +----------+  +----------+     |

| Sidebar  |  | Metric   |  | Metric   |  | Metric   |     |

| Menu     |  | Card 1   |  | Card 2   |  | Card 3   |     |

| Items    |  +----------+  +----------+  +----------+     |

|          |  +-------------------------------------------+|

|          |  |                                           ||

|          |  |        Chart / Data Visualization         ||

|          |  |                                           ||

|          |  +-------------------------------------------+|

+----------+-----------------------------------------------+
```

Build this by drawing a top navigation bar, a left sidebar with stacked text items, metric cards (small rounded rectangles with number labels), and a large chart area (a rectangle with grid lines to suggest a graph).

### E-commerce product page layout[​](#e-commerce-product-page-layout "Direct link to E-commerce product page layout")

```
+----------------------------------------------------------+

| [Logo]  Home  Categories  Sale          [Search] [Cart]  |

+----------------------------------------------------------+

|                          |                                |

|  [Product Image          |  Product Title                |

|   Placeholder]           |  $XX.XX                       |

|                          |  [Variant selector]            |

|                          |  [Quantity] [Add to Cart btn]  |

|                          |  Description text lines...     |

+----------------------------------------------------------+

|  Related Products                                        |

|  [Card 1]  [Card 2]  [Card 3]  [Card 4]                 |

+----------------------------------------------------------+
```

Use a split layout (two columns in the upper section) with an image placeholder on the left and product details on the right, followed by a full-width related products row.

### Settings page layout[​](#settings-page-layout "Direct link to Settings page layout")

```
+----------------------------------------------------------+

| [Logo]  Dashboard  Projects         [Avatar] [Settings]  |

+----------+-----------------------------------------------+

|          |  Account Settings                             |

| Profile  |  +-------------------------------------------+|

| Security |  | Field Label                               ||

| Notif.   |  | [Input field                        ]     ||

| Billing  |  +-------------------------------------------+|

| API Keys |  | Field Label                               ||

|          |  | [Input field                        ]     ||

|          |  +-------------------------------------------+|

|          |              [Save Changes]                    |

+----------+-----------------------------------------------+
```

Draw a vertical sidebar with settings categories and a main content area with stacked form field patterns.

## Collaborating on wireframes in Confluence[​](#collaborating-on-wireframes-in-confluence "Direct link to Collaborating on wireframes in Confluence")

One of the biggest advantages of wireframing inside Confluence is the collaboration workflow:

1. **Inline comments**: Team members can add Confluence comments directly on the page, referencing specific wireframe sections. Use @mentions to loop in designers, developers, or product managers.
2. **Page history**: Every save creates a new version. Compare versions to see what changed between iterations. This is especially useful during design reviews.
3. **Permissions**: Control who can edit the wireframe versus who can only view it using Confluence page restrictions.
4. **Integration with Jira**: Link wireframe pages to Jira epics or stories. Developers can open the wireframe directly from the issue, ensuring the design context is always accessible.
5. **Notifications**: When you update and republish the wireframe page, watchers receive a notification. This keeps stakeholders informed without manual status emails.

## Troubleshooting common issues[​](#troubleshooting-common-issues "Direct link to Troubleshooting common issues")

| Issue                                      | Solution                                                                                                 |
| ------------------------------------------ | -------------------------------------------------------------------------------------------------------- |
| Wireframe does not render in page view     | Click outside the Excalidraw editor, save the Confluence page, and wait for the sync confirmation.       |
| Shapes appear misaligned                   | Enable the grid and snap-to-grid, then reposition elements.                                              |
| Canvas is too small for multi-screen flows | Scroll to the edge of the canvas and drag outward. Excalidraw canvases expand infinitely.                |
| Exported PNG is blurry                     | Use SVG export instead, or increase the zoom level before exporting.                                     |
| Cannot find the macro in the editor        | Confirm the app is installed under **Settings** then **Manage apps**. Try typing `/excalidraw` directly. |
| Library panel is empty                     | Load a built-in library from the library menu, or create and save your own component groups.             |

## Related resources[​](#related-resources "Direct link to Related resources")

* [Excalidraw Plus for Confluence -- documentation](/apps/excalidraw-plus-for-confluence.md)
* [Excalidraw best practices FAQ](/blog/faq-excalidraw-best-practices.md)
* [Confluence whiteboard apps -- which one fits your team?](/blog/faq-confluence-whiteboard-apps.md)
* [How to create architecture diagrams in Confluence](/blog/how-to-create-architecture-diagrams-confluence.md)
* [How to create flowcharts in Confluence](/blog/create-flowcharts-confluence.md)
* [Confluence diagram tools compared](/blog/confluence-diagram-tools-comparison.md)

## Related guides

* [How to Create Mermaid Diagrams in Jira](/blog/how-to-create-mermaid-diagrams-jira.md)
* [Export Jira Issues to Excel or CSV](/blog/export-jira-issues-to-excel.md)
* [Bulk Download Jira Attachments](/blog/bulk-download-jira-attachments.md)
* [How to Migrate Confluence Content](/blog/how-to-migrate-confluence-content.md)

Explore NGPILOT[Browse Solutions](/solutions.md)[All Apps](/apps.md)[Atlassian Marketplace →](https://marketplace.atlassian.com/vendors/1226848/?utm_source=ngpilot.com\&utm_medium=blog\&utm_campaign=hub-links)

**Tags:**

* [confluence](/blog/tags/confluence.md)
* [excalidraw](/blog/tags/excalidraw.md)
* [wireframe](/blog/tags/wireframe.md)
* [mockup](/blog/tags/mockup.md)
* [how-to](/blog/tags/how-to.md)
* [ui-design](/blog/tags/ui-design.md)