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.
2Click on the 'Add to Chrome' button to install the MockFlow Chrome extension in your browser.
3Confirm the installation by clicking Add Extension.
4Once installed, the MockFlow WireframePro Chrome extension will be added to your browser. You can pin it for easy access.
5Click on the MockFlow WireframePro extension and log in with your MockFlow account.
6The MockFlow Chrome Extension provides two ways to capture a website for reference:
- Page Section to Wireframe: Converts a specific section of a webpage into a Wireframe.
- Full Page to Wireframe: Converts the entire webpage into a Wireframe.
7Choose any one of the options.
8 In the next step, you can customize it using the following options:
- Import All Images: Includes all images captured from the webpage in the wireframe.
- Draw in Sketchy Style: Creates the wireframe in a hand-drawn sketch style.
9 You can either 'Create a New Project' or 'Select Existing Project.'
10 By choosing 'Create New Project', you can create a new project and export it directly.
11On Choosing 'Select Existing Project', you can choose the design space and the project where you want to add the captured Wireframe.
12To import the Wireframe, click 'Import.' The Wireframe will be added to your selected project.
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.
