About Components

In this guide, we'll cover the fundamentals of all Uizard components management and styling.

Whether you've just started using Uizard and have some questions regarding components management, or you simply want to know how to manage Uizard components more efficiently - you'll definitely find this article insightful 💡

Adding components

Adding components is extremely easy!

Here's how you can add a component:

1) Click 'Templates' within the left-hand menu:

2) Utilize our component tabs to find what you need or search for it:

3) Click the component and drag and drop it onto your project!

Styling components

The default components have already had styling suggested by the Uizard AI. It goes without saying that you can customize (or style) them to match your prototype idea. We can make it more enchanting than ever before!

Without further ado, let's do some styling! 😊

1) Select any of the components you've previously added.

2) Try playing around with various styling settings by clicking the "..." in the in-line toolbar or by clicking the "Design" button on the right-hand menu:

3) You can even make some style changes or upload images from the in-line toolbar. The "Style" button options will differ depending on the type of component you've selected:

Here is a video highlighting some of the styling options you can use:

Copy-pasting styles between components

Do you want to copy-paste a style to another component, or have all similar components have that style?

Here's how to achieve this:

1) Right-click the component you'd like to copy the style of:

2) Hover over 'Copy/Paste style' and click 'Copy style':

3) Right-click the component you'd like to paste the style to:

4) Hover over 'Copy/paste style' and click 'Paste style':

5) Similarly, you can click 'Paste style to all' to have it pasted to components across the project:

Selecting multiple components

Selecting multiple components within single or multiple screens can be done by:

A) Holding a mouse left-click and dragging the cursor over the components you want to select:

B) Holding 'Shift' and clicking the components you want to select:

Selecting all components

Use the select all keyboard shortcut: 'Cmd' or 'Ctrl' + 'A':

Moving multiple components

1) Select the components you want to move.

2) Drag and drop selected components or use keyboard arrows:

Duplicating components

1) Select the components you want to duplicate.

2) Use the standard shortcuts for copy-paste:

Copy - 'Cmd' or 'Ctrl' + 'C'

Paste - 'Cmd' or 'Ctrl' + 'V'

Alternatively, you can also right-click on the selected component(s) and choose 'Copy'. Afterward, right-click anywhere on the empty space of the screen and click 'Paste':

Grouping components

1) Select the components you want to group.

2) Right-click on the selected components, hover over 'Arrange', and choose the 'Group' option:

Measuring the distance between components

1) Select the first component that you'd like to measure the distance of:

2) Press and hold the 'Alt' or 'Option' button on your keyboard and hover over the second component that you'd like to measure the distance between. You'll be able to see the distance in the purple box:

3) Alternatively, you can view this information in the 'Handoff' menu as well. Click 'Handoff' within the right-hand menu.

Click a component and you'll be able to hover your mouse over any other component to see the distance.

Here's a video showcasing how both options work:

Fixing components in place

You can fix components into place, i.e. make them stick to either the top or button of the screen in 'Preview' mode, with the 'Stick element when scrolling' option. You can find it as follows:

1) Select the components you want to be fixed.

2) Put a checkmark on the 'Stick element when scrolling' option on the right-hand menu:

Locking components

1) Select the components you want to be fixed.

2) Right-click on the selected components and choose the 'Lock component' option:

Unlocking components

1) Select the components you want to unlock.

2) Right-click on the selected components and choose the 'Unlock component' option:

Undo and redo

To undo/redo within Uizard, you can:

A) Use standard undo/redo keyboard shortcuts:

Undo - 'Cmd' or 'Ctrl' + 'Z'

Redo - 'Cmd' or 'Ctrl' + 'Y'

B) Click on the 'undo' or 'redo' icons on the top menu:

Embedding videos and sounds

The current version of Uizard does not support videos and sounds as components.

If you feel like this is a feature that you would like to have, let us know by emailing us at support@uizard.io.

We always consider implementing new features suggested by Uizard users 🙏

FAQs

Can I rotate components?

Uizard does not have the ability to rotate components, text, images, etc yet.

Are there any tables I can use?

While we don't have a way to create a table from scratch yet, you can use one of our pre-made components as a starting point.

Here's how to find it:

Open one of your projects, click "Templates" on the left-hand menu, and type in "table" in the search bar:

Is there any way to create a graph/chart?

Currently, we don't have a graph or pie chart builder; however, you can find pre-made data plots within our templates.

Click on 'Templates' within the left-hand menu and search for 'Data plots.'

Are there any pop-up components?

Unfortunately, there aren't any pre-made pop-up component features; however, you may be able to mock this in your design through interactions.

Is there a pre-made on-click or sidebar menu/navigation?

There isn't a pre-made on-click or sidebar navigation/menu builder at this time. However, you can manually create the look and feel of one through duplicating screens and interactions.

Is there an arc line shape?

There isn't a design component where you can create an arc line shape.

Can I add a video or audio component to my project?

The Uizard platform does not yet support the capability to add video or audio to a project.

Is there a functional carousel for images?

Unfortunately, there is no image carousel feature at this time.

Is there a triangle shape?

There is not a triangle shape at this time; however, we are working on adding more shapes in the future.

Can I flip an image or component horizontally?

There is no flip feature at this time; however, we are constantly working on improving our platform.

Are there show/hide functions for components?

There aren't any show/hide functions at this time; however, you may be able to recreate this look and feel through interactions.

Is there a way to slant a shape?

Unfortunately, there is no feature to slant a shape at this time.

How can I add a column component to my design?

We offer a couple of different component templates that you can use as a starting point for a column. You can adjust our template to better suit your needs and design.

Here is where you can find these component templates:

1) Click on 'Templates' within the left-hand menu and then search 'Column':

2) Choose the one that best suits your vision and manually edit the component template.

How can I make all of the images the same size automatically?

Unfortunately, it's not currently available on our platform to resize all images automatically; however, there is a workaround.

You can select multiple images by holding down the 'Shift' button and clicking the images you'd like to resize.

Once you've done that, you can click the "Design" menu button on the right-hand side and find the size section. It will say "Mixed", but you can type in the size that you'd like them to be in those boxes and it will change the multiple image sizes at once.

Adding shapes

Using alignments, distributions, and positions

Managing component templates

Troubleshooting wireframes

Importing screens from Figma, Adobe, or Sketch