New Release: WireframePro Power-Up for Trello

Integration

WireframePro makes drawing user interface mockups easy and collaborative. Since brainstorming UI designs is a team effort, its benefits are vastly enhanced when integrated within leading productivity platforms like Trello.

If you are a Trello user, With the WireframePro Power-Up, You can quickly turn your UI ideas into designs without ever leaving your Trello board.

Get the Trello Power-Up here

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 'Enable' 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

Get the Trello Power-Up here

WireframePro: New Google Docs Add-On, Google Drive app, GSuite app

New

We are excited to announce WireframePro integrations with a number of Google Services. If you have a Google account or if you already use G Suite for your business then these integrations will be super-useful

  • Google Docs Add-On : Draw and insert images of your Wireframe directly inside your Google Document - Install

  • Google Drive app : Save your User Interface ideas as designs in your Google Drive with this app - Install

  • GSuite app : Integrate WireframePro into your business workflow and easily collaborate designs with your team - Install

WireframePro: Microsoft Fluent Design Kit is now added

New

A new design system from Microsoft called "Fluent" was released last month. We have now added a UI Wireframe Pack for Fluent Design with over 70 components. For more details on Fluent, Visit https://fluent.microsoft.com

WireframePro: Now draw and post UI mockups within your Slack App

Integration

Slack is one of the leading tools for communication within Teams. With the new WireframePro - Slack Integration, Users can brainstorm and communicate their UI ideas efficiently using slack command: /wireframepro

For more information on how to add and use the integration, visit the following page - https://mockflow.com/apps/wireframepro/slack

It is also officially listed in Slack App directory: https://produle.slack.com/apps/A568WK0SV-wireframepro

WireframePro: Material Design Pack is now available

New

The latest update of WireframePro brings a new component pack for "Material Design". Material Design is a visual language introduced by Google for designing User Interfaces. For more details visit https://material.io

This component pack provides over 90 readymade components to draw User Interfaces with Material Design

WireframePro: Introducing custom Component Packs

New

We are excited to announce a new major feature that allows users to create their own reusable component libraries.

Just like the default components packs available for iPhone, Android, Web..., Now Designers can create their own pack and add their own components to it. Custom component packs are available across projects in that account and also can be shared with other Team Members.

NOTE: Custom component libraries are automatically shared for all Team Members with TeamPack licenses.

This feature makes it easy to create, save and share reusable assets and UI templates.

Other notable updates in this release are:

New Component Packs for "Foundation 6 UI framework" and "Foundation 6 Building Blocks"

Simplified sharing: We have reduced the steps in sharing projects and made it more simpler.

StyleGuide: Now export StyleGuides to PDF

Improvement

The latest release of MockFlow StyleGuide app provides a much asked feature: Export. Now StyleGuides can be exported to PDF using the browser's print option. On clicking the export button (Printer icon) in the top bar, the styleguide becomes automatically optimized for exporting with native print function.

Note: For the export option to work properly make sure, "Background graphics" is enabled in the print dialog

WireframePro: New "WorkFlows" to organize your design process

New

In addition to the existing Grid view and SiteMap view, WireframePro now has a new way to visually organize your wireframes with this "WorkFlow" feature.

With the "Workflow" view, wireframes can be easily organized into lists similar to Kanban (aka Trello) boards.

"Workflow" can be fully customized to meet project needs. For example, Workflow can be created for design stages like "Not Started", "In Progress","Completed","Implemented". Or as work assigned to designers like "User1's Wireframes" , "User2's Wireframes"...

Since the workflow feature is built-in the editor and is real-time, it helps to streamline your design process with Team Members, Clients and Managers.

Here is a sample Workflow: https://wireframepro.mockflow.com/view/darkroomapp

Introducing "MockFlow for Education" License Packs

Announcement

Now Introducing new license packs for students and universities with special rates. As frequently we are asked by teachers and students for discounted pricing, we have decided to provide dedicated packages and support to meet their needs.

Wireframing and user interface design are essential skills for any student aspiring to be a UX designer and MockFlow provides an entire UX kit to meet this need with minimal learning curve and affordable pricing.

WireframePro: "Specs" feature - Get automated spec and style info from wireframe

Improvement

Today's update introduces a new major feature called "Specs" in WireframePro. Using "Specs", users can automatically generate pixel-perfect specifications and css code for any component used in the Wireframe.

As seen above, "Specs" simplifies design handoff as designers can easily pull out details such as positioning, size, colors, fonts, assets and also make use of the generated css styles.

p.s. In a later release, "Specs" will also be able to export to iOS and Android Style code.

No published changelogs yet.

Surely MockFlow will start publishing changelogs very soon.

Check out our other public changelogs: Buffer, Mention, Respond by Buffer, JSFiddle, Olark, Droplr, Piwik Pro, Prott, Ustream, ViralSweep, StartupThreads, Userlike, Unixstickers, Survicate, Envoy, Gmelius, CodeTree