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.

    • Related Articles

    • Wireframe Elements in Visily

      Visily provides a wide range of ready-to-use elements for building app and website wireframes. These elements help you create consistent interfaces quickly without designing every component from scratch. Before you start Make sure you have permission ...

    • Component Templates in Visily

      This article explains what Component Templates are in Visily and how to use them to build designs faster. What Component Templates are Component Templates are ready-made UI building blocks that help you add detail to your design without creating ...

    • App Templates in Visily

      This article explains what App Templates are in Visily and how to use them to speed up your design workflow. What App Templates are App Templates are sets of screens arranged in a meaningful flow to represent a complete application type. Examples ...

    • Flow Templates in Visily

      This article explains what Flow Templates are in Visily and how to use them to speed up your design workflow. What Flow Templates are Flow Templates are sets of screens grouped into common UX patterns that appear across many products and ...

    • Diagram Elements in Visily

      Use diagram elements to brainstorm ideas, map processes, and model structured systems directly on your Visily board. You can build a diagram from individual elements or start with a ready-made template. Before you start Make sure you have permission ...