Component Templates in Visily

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 everything from scratch. While Screen Templates give you a starting layout, Component Templates help you build out specific parts of that layout.

In Visily, Component Templates include elements such as cards, forms, menus and navigation, popups and dialogs, tables and lists, charts, alerts and messages, website blocks, and form controls.

How to access Component Templates

You can access Component Templates from the Wireframe Library panel under the Templates tab.

How to use Component Templates

  1. Open the Wireframe Library and go to the Templates tab.
  2. Browse the available Component Templates. Click View all to open the full library for that component category.

  3. Use the search bar to enter keywords and quickly find what you need.

  4. Choose All, Web, or Mobile to filter the results by screen type.

  5. Select the component template you want to use and add it to your board.

Notes

  1. The search bar in the Wireframe Library works across tabs. You can search from Elements, Templates, or Icons, and the results will appear across all tabs, so you can find and insert what you need more quickly.

  2. Adding a Component Template to your board uses Template Credits. Component Templates cost 10 credits per component. 
  3. If you cannot find the template you need, try searching other Visily design libraries first. If you already have a reference design, you can also import it using the Visily browser extension or from Figma. You can also choose Generate with AI and let Visily AI create a design for you instead.

Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.

    • Related Articles

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

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

    • How to import designs from Figma into Visily

      This article explains how to import Figma designs into Visily using the Visily plugin for Figma. You can bring your designs into Visily by copying them directly or by exporting them as a `.vis` file. Once imported, your Figma designs become editable ...