About Brand Kits
🔮 Who can use Brand Kits?
Currently, Brand Kits are only for Beta users who have been invited to test it out.
Brand Kits make it easy to keep track of all of your brand colors and components. You can easily utilize them within your projects!
Learn all about how to use this feature 🎨
Creating a Brand Kit
There are a couple of different ways to create a Brand Kit!
Creating a Brand Kit from scratch
1) Click on 'Brand' in the left-hand menu:
2) Click on 'Create blank brand kit':
3) Next, click on 'Add color':
4) You can either click any of the suggested colors or utilize the 'Color Picker' options:
5) You can now use your Brand Kit by creating a new project or by selecting it in a pre-existing project:
Creating a Brand Kit from a screenshot
1) Click on 'Brand' in the left-hand menu:
2) Click 'Create from screenshot':
3) Upload the screenshot of the website or app you'd like to draw inspiration from for your Brand Kit by dragging and dropping it into the blue field:
4) Next, click on 'Generate':
5) Great! Your brand kit was created. Now you can find the brand colors under 'Brand Kit' and the created brand component templates under 'Brand Templates':
6) You can now use your Brand Kit by creating a new project or by selecting it in a pre-existing project:
Creating a Brand Kit from a URL
1) Click on 'Brand' in the left-hand menu:
2) Next, click on 'Create from URL':
3) Type in the website URL and click 'Get website':
4) Great! Now you can find the brand colors under 'Brand Kit' and the created brand component templates under 'Brand Templates':
5) You can now use your Brand Kit by creating a new project or by selecting it in a pre-existing project:
Creating a Brand Kit from a prompt
1) Click on 'Brand' in the left-hand menu:
2) Next, click on 'Create from prompt':
3) Type in the design style you'd like to see in your Brand Kit or click 'Try example' if you need some ideas:
2) Select any tags that match your Brand Kit idea:
3) Finally, click on 'Generate':
4) Great! Now you can find the brand colors under 'Brand Kit' and the created brand component templates under 'Brand Templates':
5) You can now use your Brand Kit by creating a new project or by selecting it in a pre-existing project:
Creating a Brand Kit from a pre-existing project
1) Select the project that you'd like to create a brand kit for:
2) Click 'Brand Kit' in the left-hand corner:
3) Click 'Create brand kit from this project':
Changing a Brand Kit's name
1) Click on 'Brand' in the left-hand menu:
2) Click on the three dots above the Brand Kit you want to rename and then 'Rename':
3) Type in the new Brand Kit name and then click 'Save Changes':
Duplicating a Brand Kit
1) Click on 'Brand' in the left-hand menu:
2) Click on the three dots and then click 'Duplicate':
Updating a Brand Kit's colors
1) Click on 'Brand' in the left-hand menu:
2) Select the Brand Kit that you'd like to change the colors for:
3) Click on the color that you'd like to change:
4) Select the colors you'd like using the Color Picker:
Uploading custom fonts
1) Click on the 'Brand' button in the left-hand menu:
2) Either click on the brand kit you'd like to add a custom font to or create a new one:
3) Click 'Add font':
4) Click on the blue field or drag and drop your custom font files. We support .ttf or .woff2 files:
Using custom fonts
1) Upload a custom font into a brand kit.
2) Open the project that has the selected Brand Kit.
3) Select text or add a text box. Next, select the three dots within the in-line design toolbar:
4) Under the text section, click the font drop-down:
5) You'll find your uploaded 'brand fonts' at the top of the drop-down:
Uploading images & logos
1) Click on the 'Brand' button in the left-hand menu:
2) Either click on the brand kit you'd like to upload an image or logo to or create a new one:
3) Click 'Add image':
4) Drag and drop an image into the blue field or click the blue field to upload the image you'd like to use:
Using Brand Kit images & logos
1) Upload images and/or logos into a brand kit.
2) Open the project that has the selected Brand Kit.
3) Click 'Image' on the left-hand side menu and then 'Uploads' to select the Brand Kit images and drag it onto your project:
Uploading custom icons
1) Click on the 'Brand' button in the left-hand menu:
2) Either click on the brand kit you'd like to upload an image or logo to or create a new one:
3) Scroll down and click 'Add icon':
4) Click on the blue field or drag the icons you'd like to upload into the blue field:
Using Brand Kit icons
1) Upload your custom icons into the Brand Kit you'd like to use.
2) Open the project that has the selected Brand Kit.
3) Select 'Icon' in the left-hand menu of your project:
4) Click 'Brand' at the top of the icon menu:
5) You can drag and drop or use your icons in your project as you like:
Uploading a component from a screenshot
1) Click on 'Brand' on the left-hand menu:
2) Click on the Brand Kit you'd like to upload a component to:
3) Select 'Brand Template' to access the component templates:
4) Select 'Add component':
5) Click on 'Import from screenshot':
6) Click on the blue field or drag and drop to upload the screenshot of the component you'd like to use:
7) Click 'Generate':
*Please note that you'll only be able to upload a component with a screenshot if you've saved a component regularly to your Brand Kit first*
Selecting/switching Brand Kits in a project
1) Open the project that you want to select or switch a Brand Kit for.
2) Click on 'Brand' in the left-hand menu:
3) Click on the Brand Kit that you'd like to use for the project:
4) If you'd like to apply the brand kit to your design right away, click 'Apply Brand Kit.' Otherwise, you can click 'Not now':
Adding a component to your Brand Kit from a pre-existing Uizard project
For projects that have selected Brand Kits, you can add components to your Brand Kit so they're easily accessible.
1) Open the project that has the selected Brand Kit.
2) Select the component(s) that you'd like to save as a template for your Brand Kit:
3) Click 'Save Template' in the Design menu within the right-hand menu:
4) Update the name, add any relevant tags, and click 'Save template':
5) To find the saved components, click on the 'Template' button on the left-hand menu:
6) Click the 'Brand' tab, and you'll be able to find your saved Brand components there:
Deleting components from Brand Kit templates
There are two different ways to delete any saved Brand Kit templates. Let's take a look at how to delete a component!
Deleting a component from the project page
1) Open the project that has the selected Brand Kit.
2) Click on 'Template' within the left-hand menu:
3) Click on the 'Brand' tab:
4) Click on the three dots over the template you'd like to delete and click 'Delete':
5) If you're sure you'd like to delete it, click 'Delete':
Deleting a component from the Brand Kit page
1) Click on 'Brand' within the left-hand menu of the Projects page:
2) Click on the Brand Kit that you'd like to delete a component from:
3) Click on 'Brand Templates':
4) Hover over the component that you'd like to delete, click on the three dots, and then 'Delete':
5) If you're sure that you want to delete it, click 'Delete':
Using a Brand Kit in your project
Once you have selected a Brand Kit for your project, you'll be able to easily pick your brand colors.
1) Open the project with the selected Brand Kit.
2) Select the component or screen that you'd like to change to a brand color:
3) You'll find the 'Brand Kit Colors' section where you can select which one you'd like to use:
4) Additionally, you can find any saved Brand Kit components by clicking the 'Template' section in the left-hand menu and then clicking the 'Brand' tab:
Deleting a Brand Kit
To delete a Brand Kit, please note that you can't actively use it in any projects. You'll need to switch Brand Kits first if the Brand Kit you want to delete is active in a project.
1) Click on 'Brand' within the left-hand menu:
2) Click on the three dots of the Brand Kit you'd like to delete and then click on 'Delete':
3) If you're sure you'd like to delete it, type in 'delete' into the text box and then click on the red 'Delete' button:
