With the WireframePro Power-Up for Trello, You can quickly draw User Interface mockups for websites, apps and attach it to your Trello cards without ever leaving your Trello board.
Enabling the WireframePro Power-Up for Trello
1Login to your Trello account. Open a board and click Show Menu in the top-right corner of the screen.
2Click on Power-Ups button, to list all the Power-Ups available for Trello.
3Now find the WireframePro Power-Up in this list and click the ' Add' button next to the Power-Up item.
4After enabling, a green checkbox will appear next to the WireframePro Power-Up listing which indicates that it is added to your board.
5Also you can verify, if it is enabled, as a 'WireframePro' button will appear when you open any Trello card in that board.
Draw User Interface designs
To draw UI designs with the WireframePro Power-Up, you should have a MockFlow account. In case you don't have, the Power-Up allows you to create a new account with 14-day Free Trial (no credit card required)
1Open any Trello card, click the ' WireframePro' button that appears on the right side.
2This will bring in a login / register form popup if not already logged in.
3You need to authorize and connect your Trello account with WireframePro initially.
This is a must to enable WireframePro with permissions to access and attach designs to your Trello card.
4After login, it will open the WireframePro dashboard, which will provide options to create a new wireframe or open existing projects.
5To create a new wireframe, select the type (Web, iPhone, Android....) and enter name for the wireframe.
6Now the wireframe editor will display. Here you can draw your UI design using the components listed on the left side.
7After the design is done, click the ' Attach to card' button in the upper-right part of the screen to export wireframe to high-quality image and automatically attach it to your Trello card.
Accessing MockStore
See the below picture on how to open MockStore from the wireframe editor. The MockStore allows you to get inspired, edit and attach from thousands of UI designs submitted by our active user community
1Click "Store" icon from wireframe editor.
Do my wireframes sync with Trello after I have attached it?
No once it is attached , the attachment won't sync with any corresponding changes made to the same wireframe. You have to export and attach again.
