Menu
The Design panel allows you to view, add, remove, or change the properties of objects in your design.
Once you select an item, the Design tab will contain many different settings where you can adjust the alignment, size, color, and more. The settings will change depending on the selected object. Now in more detail.
1,2. You can adjust the position of layers in the canvas along any of the two dimensions or axes: horizontal (X axis) and vertical (Y axis). Sizze represents a layer's position on the canvas using X and Y coordinates.
2,3. Every layer in the canvas will have its own dimensions. To view a layer's dimensions just select the element in the canvas and view the dimensions of any layer using the W and H fields in the right sidebar. To adjust the width and the height of a layer click on the element and drug it to resize. To adjust the radius of a round element, select the element and drag it to the sides, or resize it on the right sidebar.
4. Using the tool radius, you can change the roundness of the element by changing the indicators in the radius section.
5. You can change the roundness of the corners individually by switching the radius button to the right.
1. You can toggle a layer's visibility in the Layers Panel. You can still change the position, or adjust the properties of a hidden layer. Visibility for layers (and properties) is shown with an eye icon.
2. Overflow behavior controls how users can interact with content that extends beyond a device's dimensions.
3.1 Horizontal scrolling allows users to swipe or scroll left and right within a frame, while maintaining their vertical position. Use this to create sliders for content, like products, galleries, and libraries.
3.2 Vertical scrolling allows users to swipe or scroll up and down within a frame. Use this behavior to mimic scrolling down a long website, or page of content within an app.
In the right sidebar, you can view a swatch of the current color, the hexcode value, and the opacity.
You can fill the element with color or set the property to none by toggling the radio button.
1.Use the color palette in the body of the modal to select a color:
2. Adjust the hue using the slider below the palette. Click and drag left or right to adjust.
3. Adjust the opacity of the color using the second slider.
4. The hexcode value of the color is shown in the box to the right of the color palette tool.
5. You can also adjust the opacity of the color by entering a value in the field.
Effects serve a number of purposes from the aesthetic to functional. They can enable you to signify that an element is interactive, like making a button look clickable by giving the rectangle a shadow.
By toggling the radio button you can apply a shadow property to the element or remove it.
1. The shadow color settings are the same as the main element color settings.
2. Offset the shadow along the x axis (horizontal).
3. Offset the drop shadow along the y axis (vertical).
4. Adjust the blur or feathering of the shadow. Increase the blur to soften the shadow and blend it with the background. Decrease the blur to create a sharper contrast.
1. Use the color picker to adjust the paint and set an opacity for the current border.
2. Use the weight field to select a weight of the border, in pixels. Enter a value in the field provided to adjust the weight of the border.
Constraints tell Sizze how layers should respond when you resize their frames. This helps you to control how designs look across different screen sizes and devices.
1. A display panel that shows from which side of the screen the element will stretch.
2. Here you can adjust the constraints horizontally and set the element's stretch in the center, left, right and both sides.
3. Here you can adjust the constraints vertically and set the element's stretch in the center, top, bottom and both sides.
Autolayout is a property that lets you create designs that grow to fill or shrink to fit, and reflow as their contents change.
1. A panel that shows how the element is aligned in relation to the parent element.
2,3. The padding and spacing properties allow you to set the margin value for all sides of an element at once, or to define it only for specified sides.
4. This is an element property that allows you to fill the frame in an equal spacing ratio between child elements. When you apply the space between property elements, they stick to the edges of the frame even when the screen width or height changes.
Change the width or height of an object. Manual resizing can change the aspect ratio of an object. To resize an object click the object to select it & click and drag: the right or left edge to change the object's width, the top or bottom edge to change the object's height, a corner handle resize the object uniformly.
1. To set the width parameter you can select "Fixed" to set the non-adjustable width, and "Hug Content'' to set flexible parameters for objects that will resize to the child elements.
2. To set the height parameter you can select "Fixed" to set the non-adjustable height, and "Hug Content'' to set flexible parameters for objects that will resize to the child elements.
1. You can adjust the size of the text by entering the value in the field.
2. Line heigh lets you control the distance between paragraphs. This can increase or reduce the whitespace around text in your design.
3. Using this property you can choose the font type from the collection of styles. For example: Helvetica, Times New Roman, and Roboto are all font families.
4. Horizontal alignment defines how you align the text along the x axis (horizontal).
5. Apply text decoration to an entire text layer, or to selected text. You have two types of decoration available: Strikethrough, Underline.
6. You can change the style of the selected text to regular or cursive format.
7. By expanding the list you can change the weight of the selected text making it thinner or heavier.
8. Property that adjusts space between the letters.
