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
These are primitive elements like text, shapes (rectangle, oval, triangle), line or image that you can use to build any components in the design.
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.
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.
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.