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 on the toolbar
Add wireframes to the creation toolbar for your convenience.
Adding wireframes to the toolbar
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)
- Progress bar components
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
For Chips, you can set the color, icon, and state (enabled, disabled) and select solid chip or outline chip.
Adding a chip from the Wireframes library
When using Lists, you can select a primary or secondary list and set the color. Double-click the list to set an icon.
When using the Cards component, you can choose between cards with no image, with an image to the left, or with an image on top, and set the color and icon for a card.
If you add a Progress Bar, feel free to select a rectangular, round, or milestone progress bar, choose the color, and state (Start, In progress, Complete).
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
- 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.