Rectangle
It is a simple rectangular form that you can use on your layouts.
Rectangle in a composition
The rectangle can be stretched to assume the dimensions you want. You can also edit many visual properties like color, border radius, shadow, and more, so it can serve many purposes.
White rectangle with border-radius and shadow in the middle of a screen
To edit its visual properties, you need to use the sidebar on the right side of the screen.
Sidebar to edit the visual properties of a rectangle
For the background, you have the option to use a solid color, an image, or even make it transparent.
Rectangles using different types of background
Using color as the background, you can also control the transparency.
Rectangles with the same background colors but different transparencies
If you use an image for the background, you can choose how it will fill the rectangle. If you select "Cover", the image will fill all the space of the rectangle, even if the edges of the images have to be cut. Otherwise, selecting "Contain", the image will be resized to make sure it is fully visible inside the rectangle.
Different behaviors of the background image of a rectangle
You can also add a shadow to your rectangle and adjust its properties, like blur and color. To remove the shadow, you can set all its numeric properties to 0px.
White rectangle with blue shadow over a light-blue background
Offset X (horizontal offset) defines the displacement in the X-axis in relation to the element. It can be positive or negative.
Offset Y (vertical offset) defines de displacement in the Y-axis. It can also be positive or negative.
Blur defines how blurred the shadow will be. If set to 0, the shadow will be sharp, similar to a border. The higher the number you define, the more blurred the shadow will be.
Spread increases the overall size of the shadow, defining the distance between its blurred part and the element.
Color is also a property that you can change to create different visual effects on your interface.
Rectangles with different colors of shadow
You can also control the border of your rectangle. To remove it, you should set the border style to "None".
Rectangle with a white border and a background image
You can adjust the border properties using the Border menu on the right sidebar:
You can expand the input fields for each property by clicking on the icon below them, so you can edit each side of the rectangle individually
Using this menu, you can control border thickness, color, style and radius.
You can also adjust the border radius using the circles that appear near the border when you select the rectangle.
Last modified 1yr ago