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.

Extension Library

The Extension Library is an in-app storage dialog that saves the screenshots you captured with the Visily Browser Extension. Saved screenshots in the Extension Library are available across boards and workspaces under your account. You can access it from the left sidebar 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

    • 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 ...

    • UI Screen Templates in Visily

      This article explains what UI Screen Templates are in Visily and how to use them to speed up your design workflow. What UI Screen Templates are UI Screen Templates are prebuilt screen designs you can add to your board as a starting point. In Visily, ...

    • Diagram Templates in Visily

      This article explains what Diagram Templates are in Visily and how to use them to create diagrams faster. What Diagram Templates are Diagram Templates are premade templates for common diagram, planning, and brainstorming use cases. In Visily, they ...