How to convert a screenshot into an editable wireframe with the Visily Browser Extension

How to convert a screenshot into an editable wireframe with the Visily Browser Extension

This article explains how to convert a screenshot into an editable wireframe using the Visily Browser Extension.

Before you start

Before importing screenshots into Visily, make sure you have:
  1. A Visily account and are logged in to Visily
  2. The Visily – Screenshot Capture & Design Browser Extension installed from your browser’s extension store. The extension is available on:
    1. Chrome
    2. Firefox
    3. Edge
  3. At least one board created
Idea
After installing the extension, pin the extension to your browser toolbar for easier access.

Capture and import screenshots with the Visily Browser Extension

  1. Open the web page you want to capture.
  2. Click the Visily Browser Extension icon in your browser toolbar.


  3. If needed, click Change viewport for capturing to switch the page preview to desktop, mobile, or tablet sizes. The selected viewport is shown directly in your browser for review, and the imported result will follow that size.


  4. Choose a capture method:

    1. Capture Full Page to capture the entire page automatically
    2. Select Element to capture a specific element from the current view
    3. Crop Area to capture a custom area on the screen

  5. After capturing, choose the Output type:

    1. Wireframe to convert the screenshot into editable Visily elements
    2. Image to import the screenshot as a static image reference

  6. In Select a board to import, choose the destination board for your screenshots. By default, the most recently accessed board is selected, but you can choose any board across the workspaces you are a member of.


  7. Click "Import to ..." to import the selected screenshots into your chosen board.

Idea
When your screenshot is imported into Visily as an editable wireframe, the converted result becomes Visily elements that you can edit, move, delete, or refine further on the canvas. You can also continue improving it manually or use AI chat to make additional changes.

Browser Extension Library

The Browser Extension Library is an in-app storage dialog that saves the screenshots you captured with the Visily Browser Extension. Saved screenshots in the Browser Extension Library are available across boards and workspaces under your account. You can access it from the bottom toolbar while working on a board


From there, you can:
  1. Select captured screenshots and import them into the current board

  2. View screenshots that have already been imported under Imported captures, and re-import them when needed.

Notes

  1. You can take multiple screenshots before importing by clicking Capture another.


  2. You can select and import multiple screenshots at once, with a maximum of 10 screenshots per import.


  3. For the best and most accurate results, we recommend using Capture Full Page or Select Element.
  4. On Firefox, some functions are disabled in responsive mode due to technical limitations. 
  5. Importing a screenshot as an editable wireframe by the Visily Browser Extension uses AI Credits. The credit cost varies by capture method. For more details, see How AI Credits work.
Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.