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.
Wireframes library in the sidebar
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 colour.
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
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).
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 arrows 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. Eventually, they will be phased out.
Previous wireframes in the library