Wireframe Elements in Visily

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

  1. Make sure you have permission to edit the board.
  2. In Hi-fi design mode, wireframe elements use the colors and fonts defined in your Board Theme. Themes are not applied in Lo-fi design mode.

Access the Wireframe Library

You can open the full Wireframe Library in either of the following ways:
  1. Open More from the bottom toolbar, then select Wireframe Library.

  2. Select Wireframe elements from the bottom toolbar, then click View all.

The Wireframe Library includes three main tabs:
  1. Elements: Basic Elements, Smart Components, and Other Components for creating wireframes.
  2. Templates: Ready-to-use screen and component templates.
  3. Icons: Built-in icon sets for adding visual symbols to your designs.
This article focuses on the Elements tab.

Basic Elements

Basic Elements are simple and flexible building blocks for creating layouts and adding content.
  1. Containing elements. Use containing elements to organize the structure of your design:
    1. Section: Defines a distinct area of a design.
    2. Screen: Represents a complete app or website screen.
    3. Container: Groups elements and automatically contains items placed inside it.
  2. Shapes. Use shapes to create backgrounds, dividers, decorations, and visual structure. Available shapes include rectangle, overlay, oval, line, and triangle.
  3. Images. Use Image elements to upload your own images, browse stock image libraries, reuse workspace images, generate images with AI, or add image and video placeholders.
  4. Text. Use text elements to add written content to your designs. Text elements include Heading (H), Text (T), and Link, allowing you to add and style different types of text content in your wireframes.

Smart Components

Smart Components are ready-made UI elements that help you create realistic interfaces more quickly. They include:
  1. Buttons: Button (B) and Icon Button
  2. Input Fields: Textbox (F), Search Box, Dropdown Button, and Textarea
  3. Selection Controls: Checkbox and Radio Button
  4. Navigation Components: Header Menu, Tab Bar Menu, Sidebar Menu, and Collapsed Sidebar Menu
  5. Other UI Elements: Avatar, Switch, Slider, Tag, and Button Group
  6. Charts: Column/Bar Chart, Pie Chart, and Line Chart
  7. Rating Component: Shows a rating or lets users select a score.
  8. Smart Table: Organizes data into editable rows and columns, with options to import, paste, or generate data.

Other Components

Other components include element-like templates that extend your design options beyond basic and smart components, such as number input, split button, chips, search box with button, password input field, and OTP input field.
These components help you create richer, more detailed interface mockups that resemble real product interactions.
 

Search for elements

Use the search bar in the Wireframe Library to find an element by name. You can search from the Elements, Templates, or Icons tab. Matching results from other tabs appear as highlighted badges, allowing you to find items without manually switching between tabs.

Idea
If you cannot find the elements you need from the Wireframe Library, you can generate it with AI, search across the libraries, import a design using the Visily browser extension, or import a design from Figma.

Note

  1. The available editing options depend on the selected element.
  2. You can place elements inside screens, sections, and containers.
  3. For some elements, you can click the arrow next to the element thumbnail to view additional options before adding it.
  4. Sticky notes let you jot down ideas or comments for quick brainstorming and collaboration. Connectors link shapes and elements to show relationships and flows clearly. Use them together to organize and visualize ideas easily in Visily. Learn more at Diagram Elements in Visily.
Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.

    • Related Articles

    • 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: A Visily account and are logged in to Visily The Visily – ...

    • How to use Image elements

      Use Image elements to add uploaded images, stock photos, AI-generated visuals, or placeholders to your designs. Before you start Make sure you have permission to edit the board. The availability of workspace images and some AI features may depend on ...

    • How to use Text and Link elements

      Use Text and Link elements to add headings, descriptions, labels, and clickable text to your designs. Before you start Make sure you have permission to edit the board and are in design editing mode. Text element types Visily provides the following ...

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

    • How to add elements to the canvas

      Add elements to the canvas to create and customize your designs. You can add basic elements from the bottom toolbar or choose ready-made elements from the Wireframe Library and Diagram Library. Before you start Make sure you have permission to edit ...