Visily makes it easy to set up and manage your theme, which includes key design elements like colors, text styles, shadows, and corner radius. Each board has its own theme, and it’s automatically applied to all components in the UI library, templates, and your design on the canvas, helping you maintain a consistent look and feel across your entire board.
How Theme is applied when creating a board
With options to start designing, the board theme can be set up right when creating your board. This theme will be applied as the board’s theme.
Start with AI
With the Start with AI option, Visily AI not only generates screens but also provides style options that suit your design, which may help fine-tune it. You can find these options in the “Edit style” dropdown menu in the output preview.
Start with Template
When choosing to start with a template, you can edit the theme for the app or flow template before adding it to the board.
Create Blank Board
For the option of creating a blank board, the board will use the system’s default theme. If you’re in a workspace that has a workspace theme applied, the newly created board will follow that theme instead.
Modify theme with Theme settings panel
After a board is created in Hi-fi design mode, you can modify its theme at any time using the Theme Settings panel.
Access Theme setting panel
You can access the Theme Settings panel from the left-side menu of the board. It includes the following editing options:
- Edit theme elements: colors, text styles, shadows, and corner radius
- Save the current theme as the workspace theme
- Other actions to apply the theme to the current board
Edit theme
In the Theme Settings panel, you can click the “Edit” button to enter theme editing mode, where you can modify theme elements and preview how they affect your board’s design. You can also click the edit icon next to each element type to go directly to its settings in editing mode.
- Colors: Allows you to manually adjust individual shades or choose from Main colors, Semantic colors, and the Gray color set to ensure your design remains stylish and cohesive. In addition to manual adjustments, you can choose a new palette from various options, such as selecting from the Visily palette library, generating colors from text, or extracting them from an image or webpage.
- Texts: Customize your Theme fonts, including Primary and Secondary fonts. You can also create Text presets to maintain consistency in typography throughout your project.
- Shadows: Modify the shadow effects to enhance depth and contrast.
- Corner Radius: Customize the curvature of corners to achieve a square, rounded, or circular look, depending on your preference.
After making your changes, click “Apply” to update the theme for your board. This will instantly apply the new theme to all designs on the board, so be sure to preview the changes and confirm that everything looks as expected before applying.
Save as workspace theme
The “Save as workspace theme” option in Theme Settings allows you to save and reuse themes across boards in your workspace. Check out our Workspace Theme Guide to learn more about how it works.
Other actions in Theme settings
These are options that let you quickly apply themes from other sources.
- Select a workspace theme: This option lets you apply a theme from the workspace library and is only available on paid plans that support the workspace library.
- Generate theme from text: You can generate a theme from text by entering a detailed description of your desired look, including elements such as color scheme, mood, and style.
- Extract theme from image: You can generate a theme from an image by uploading a UI design that inspires you. Visily will analyze its colors and style to create a theme, which you can then apply and customize by adjusting elements such as colors, fonts, and spacing.
- Extract theme from webpage: Visily also supports extracting a theme from a webpage. Simply enter a URL, and Visily will analyze the site’s design, such as its color scheme and fonts, to generate a theme, which you can then refine to suit your needs.
