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.