How to use MockFlow WireframePro Chrome Extension

Quickly convert webpages into wireframes with the MockFlow WireframePro Chrome extension. This can be very useful when you find inspiration for a website section, web app section, or to redesign your own website.


Follow the steps below to install and use the extension.


1Open the Chrome Web Store and search for MockFlow WireframePro.


Searching MockFlow WireframePro in Chrome Web Store - MockFlow WireframePro chrome extension


2Click on the 'Add to Chrome' button to install the MockFlow Chrome extension in your browser.


Navigate to Add to chrome - MockFlow WireframePro chrome extension


3Confirm the installation by clicking Add Extension.


Click on Add Extension - MockFlow WireframePro


4Once installed, the MockFlow WireframePro Chrome extension will be added to your browser. You can pin it for easy access.


Pin the MockFlow Wireframepro Chrome Extension - MockFlow WireframePro


5Click on the MockFlow WireframePro extension and log in with your MockFlow account.


Log in to the MockFlow WireframePro Chrome Extension - MockFlow WireframePro chrome extension


6The MockFlow Chrome Extension provides two ways to capture a website for reference:

  1. Page Section to Wireframe: Converts a specific section of a webpage into a Wireframe.
  2. Full Page to Wireframe: Converts the entire webpage into a Wireframe.

7Choose any one of the options.


Choosing the options - MockFlow WireframePro


8 In the next step, you can customize it using the following options:

  1. Import All Images: Includes all images captured from the webpage in the wireframe.
  2. Draw in Sketchy Style: Creates the wireframe in a hand-drawn sketch style.

Choosing Wireframe Options - MockFlow WireframePro chrome extension


9 You can either 'Create a New Project' or 'Select Existing Project.'


Choosing the options to convert to wireframe - MockFlow WireframePro chrome extension


10 By choosing 'Create New Project', you can create a new project and export it directly.


Create a New Project - MockFlow WireframePro Chrome Extension


11On Choosing 'Select Existing Project', you can choose the design space and the project where you want to add the captured Wireframe.


Selecting Existing Project - MockFlow WireframePro Chrome Extension


12To import the Wireframe, click 'Import.' The Wireframe will be added to your selected project.


Importing the Wireframes - MockFlow WireframePro Chrome Extension


13As seen in the image below, the webpage has been converted to an editable wireframe in sketchy style. You can now make edits to the wireframe as required.

The open link icon at the top right is to open the wireframe editor in a new tab and continue editing your wireframe seamlessly.


Screen Shot 2024-12-05 at 4.09.42 PM.png







Rate this article
great ok bad
For more questions - Contact Us
...