Skip to main content
Adding shapes

Learn all about how to use 'Shapes' to build larger components

Updated over 10 months ago

About shapes

In this guide, you'll learn how to use one of the Uizard component types - 'Shapes'.
โ€‹

What is a shape? In Uizard, a 'Shape' is a container for a set of components.

Ideally, it is used to group individual components (for example, images and text) to make a larger component:
โ€‹


Inserting a shape

1) Click 'Shape' on the left-side menu:
โ€‹

2) Find the 'Shape' you want by using the search or scrolling through the 'Shapes' options. Finally, drag & drop it on your prototype:
โ€‹


Rounding the edges of a shape

If you'd like to round the edges of a shape, this can be achieved by following similar steps as above!

Here's how you can do this with the in-line toolbar:

1) Click on the card or shape in your project and then click the 'Style' button on the in-line toolbar:

2) Click 'Rounded' or 'Soft' depending on your design needs:

Here's how you can do this with the 'Design' menu:

1) Click the card or shape on your project and then the "Design" button on the right-hand menu:

2) Select 'More options' under the 'Corners' section:

3) Find the "Radius" section and either drag the slider or input the number here for the desired effect:

Did this answer your question?