UI Library

Overview of UI Library

The Library contains hundreds of UI elements that you can quickly add to your designs. The element types range from basic elements (text, icon, shapes, etc.), smart components (buttons, textboxs, menus, etc.) to a wide range of pre-made component templates (forms, cards, dialogs, etc.).

All elements in the Library follows the same system of colors, fonts, sizing and spacing as set in your Project Theme. In other words, along with the Project Theme, you have a whole Design System automatically generated for you.

Get access to the Library

To open the Library, click on the Library icon on the left sidebar menu, or simple press “L”.

Element types in the Library

Basic elements

These are primitive elements like text, shapes (rectangle, oval, triangle), line or image that you can use to build any components in the design.

Tip: Don’t miss out container, a special rectangle that auto-attaches child elements when you drop the elements into it. Use it as background of cards, forms, dialogs and more instead of the basic rectangle. Learn more about container here.

Smart components

Visily provides various pre-built components that are most commonly used in app designs, namely:

• Button, Textbox, Textarea, Dropdown
• Checkbox, Radio, Button group, Switch, Rating, Avatar, Tag
• Menus of different types: Header menu, Sidebar menu, Tab bar menu
• Charts of different types: Column/bar chart, Pie chart, Line chart

With these smart components, you can say good-bye to groups of text, icon and shapes that do not auto-relayout as you edit content or resize. Each smart component comes with a wide range of preset styles and specialized customizations for its specific use case.

Learn more about customizing Smart Components here.

Component templates

Discover hundreds of beautiful templates created from smart components and basic elements for various use cases. They are grouped into categories such as Forms, Dialogs, Cards, Navigation, Alerts & Messages, Tables & Listings, etc.

Tip: Couldn’t find the template you need? Send us your request and we add to our pipeline for template library. You can always submit your request while using the app.

Navigations and settings in Library

Navigate to a specific category

If you need to look for a specific item, either search for it or select the most relevant category to browse only the components and templates under that category.

There are two ways to access a category:

• Open “Jump to” dropdown and select the suitable category
• Click “View all” next to the category name

Switch between Mobile and Web App templates

When you switch from Web App Templates to Mobile App Templates, the list of Basic Elements and Smart Components remain almost the same, but the list of Component Templates changes to those with the layouts tailored to fit the mobile screen sizes and with the styles commonly seen in mobile apps.

Tip: When you cannot find the items you’re looking for, try changing between web and mobile app templates to get more results.