Wireframing library

Who can do it: All users
Which plans: All plans
Which platforms: Browser, Desktop, Mobile

NOTE: The Prototyping Library is now called the Wireframing Library. Your existing screens, components, and flows will work the same way.

Use the Wireframing Library to build low-fidelity screens and flows directly on the Miro canvas. The library includes screens, UI components, and icons that help you sketch flows and structure ideas early.

All users can create static wireframes. Advanced components, connector lines, and interactive preview require a Business plan or an Enterprise Accelerate license.

TIP: Need a high-fidelity prototype? Use Prototypes 2.0 (HTML prototypes). You can convert your wireframes into an HTML Prototype for richer visuals, AI editing, review and handoff. See About Prototypes 2.0 and Create a Prototype 2.0.

Open the Wireframing Library

1. On the canvas, from the Creation bar, click the Tools, Media and Integrations icon.
2. Search for Wireframing, then click Wireframing Library.
3. The Wireframing Library panel opens.

What's in the Wireframing Library

The Wireframing Library is organized into tabs. All users can build static wireframes with screens, UI components and icons.

Screens

Screens are ready-made frames for building wireframes. Add Mobile, Tablet or Desktop screens to your canvas, then drag UI elements onto them.

Work with screens

• Show or hide the screen chrome, so it looks like a device frame or a simple frame.
• Rotate a screen.
• Resize a screen by dragging to extend its height (vertical only).

UI components

UI components are common interface elements, such as buttons, inputs, navigation bars and form elements.

You can:

• Drag components onto a screen.
• Resize and reposition components.
• Edit text and basic styling from the context menu.

NOTE: Context menu options vary depending on which element you select.

On the Business plan and the Enterprise Accelerate license, some UI components are interactive in Preview mode. For example, buttons, sliders, input fields and dropdown menus respond to the connector lines you've defined.

Advanced components are only available on the Business plan and the Enterprise Accelerate license.

Icons

The Icons tab includes a searchable icon library.

Add or replace an icon

1. Drag an icon from the library onto the canvas.
2. Select the icon to change its color from the context menu.
3. Choose Replace icon to swap it for another icon without changing its position or size.

Connector lines and interactive preview

Which plans: Business, Enterprise (with Accelerate license)

Connector lines define navigation between screens. Draw connector lines from an element on one screen to another screen to build multi-step flows.

Connector lines also enable interactive preview. In Preview mode, connected screens work like a clickable flow.

TIP: Some UI elements show a lightning icon when added to a screen. In multi-screen flows, drag the lightning icon to another screen to create a connector line.

Turn wireframes into HTML Prototypes

Which plans: Business, Enterprise (with Accelerate license)

When your flow is ready for high-fidelity review or handoff, convert your widgets, wireframes or screens into an HTML Prototype (Prototypes 2.0). HTML Prototypes support:

• Richer rendering (gradients, shadows, fonts and layouts).
• Lightweight edits on the canvas.
• Interactive connectors.
• Edit with AI.
• Full-screen preview with a shareable link.
• Export to HTML or image.

NOTE: If you use Edit with AI on Wireframing Library screens, Miro creates a new Prototypes 2.0 prototype. Your original screens aren't changed.

FAQ