Create wireframes right on the board using Miro wireframe component library. It includes about 60 UI design patterns that can be easily combined to help you create unique low-fidelity mockups at no effort.
Editing wireframing components
Choose from a wide range of elements to create a detailed web page, product screen, or mobile app layout:
- Device types (phone, tablet, browser)
- UI components (interactive elements of your wireframe)
Device types are frames with the proportions of the most popular devices. Click the border of the frame to select it and see the context menu. Here you can change the device type, toggle to show/hide device skin, change the orientation, and fill color.
Device types menu
💡 Device types wireframes are sticky and act like pages that group objects together, as our usual frames. It means when you add components and icons to the wireframe all the content inside it moves and is copied together with the frame:
Sticky device wireframe
💡If you export the board as PDF, the device wireframes will also be exported as separate PDF pages.
Pre-made interactive UI components enable you to create simple low-fidelity prototypes of website pages and product screens in a matter of minutes – even if you don’t have much design experience.
Adding a UI component
Double-click to start editing. Depending on the chosen component, you can change the style, state (checked/unchecked, selected/disabled, text/placeholder, etc.), change the icon, or add a row (in radio buttons, checkboxes).
Editing a component
Take advantage of our built-in icon library – using it together with UI components or on their own will save you time and help create detailed wireframes.
In the Icons tab of the wireframes library, you will see the most popular icons and categories of icons (arrows, food, social, etc.)
Editing an icon
Powerful features to create simple wireframes in minutes
- Feedback from any device in real-time
- Integrations with Unsplash, IconFinder, and more
- Web page capture
Capture and add references to your board for inspiration or re-use existing web pages and product screens to make updates quickly.
- Frames, connection lines & links
Use frames to show multiple web or product screens or add a pre-made wireframe template from the picker. Connect them with lines and use Link to functionality to visualize user flows and move from one screen to another.
For now, previous wireframes can also be found in the wireframes library - scroll down the list to see them.
Previous wireframes in the library
⚠️ Please note that the previous version of the wireframe library will be deprecated.
Frequently asked questions
- Can I expand the dropdown component?
- No, at the moment, this is not possible.
- Can I add my own elements to the library?
- This is not currently possible but you can add icons from Icon sets to your board.