Trello Power-Up Integration help

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

1.Login to your Trello account. Open a board and click Show Menu in the top-right corner of the screen

2.Click on Power-Ups button, to list all the Power-Ups available for Trello

3.Now find the WireframePro Power-Up in this list and click the ' Add' button next to the Power-Up item.

4.After enabling, a green checkbox will appear next to the WireframePro Power-Up listing which indicates that it is added to your board

5.Also 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)

1.Open any Trello card, click the ' WireframePro' button that appears on the right side

2.This will bring in a login / register form popup if not already logged in

3.You 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

4.After login, it will open the WireframePro dashboard, which will provide options to create a new wireframe or open existing projects.

5.To create a new wireframe, select the type (Web, iPhone, Android....) and enter name for the wireframe

6.Now the wireframe editor will display. Here you can draw your UI design using the components listed on the left side

7.After the design is done, click the ' Attach to card' button in the upper-left 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

1.Click "Store" icon from wireframe editor

Screen Shot 2023-04-20 at 2.29.23 PM.png

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.

Rate this article