Adjust corner radius and smoothing

Rounded corners in common UI elements like buttons and icons are visually softer, friendlier, and aligned with natural shapes. In Motiff, two properties related to rounded corners are Corner radius and Corner smoothing.

• Corner radius softens the angle where two edges meet, creating a curved transition between them. It can be used to apply rounded corners to shapes.
• Corner smoothing can be used to create a continuous curve. This property creates rounded rectangles with smoother rounded corners.

By default, Motiff applies the corner radius to the entire shape. For custom designs, you can use Independent corners to set unique radius values for specific corners for precise adjustments.

Motiff supports corner radius adjustment and smoothing in two ways: users can either modify these settings directly in the Design panel or make adjustments directly on the canvas.

In the design panel

Adjust the corner radius

By default, the corner radius affects the entire layer. You can adjust the corner radius of vector layers or shapes through the design panel by following the steps below.

1. 1.Select the target layer in the Layers panel.
2. 2.Open the Design panel in the right sidebar.
3. 3.Enter a value in the field of .
4. 4.Or, hover the mouse over , drag left to decrease the value, and drag right to increase the value.

Adjust independent corners

In Motiff, only rectangles, frames, component templates, component sets, and instances support adjusting independent corners. You can adjust independent corners by following the steps below.

1. 1.Select the shape for which you want to set the corner radius.
2. 2.Open the design panel on the right sidebar.
3. 3.Click to adjust the corners in each direction. After clicking the icon, four fields will appear below the corner radius. They are displayed clockwise as follows: top-left, top-right, bottom-right, and bottom-left.
4. 4.Enter a value in the corresponding field. You can move between fields by pressing the Tab key.
5. 5.You can increase or decrease the value by dragging the corresponding field area. Place the cursor in the field's input area and hold the modifier key ⌥ Option / Alt . Drag left to decrease the value and drag right to increase it.

Adjust corner smoothing

You can apply Corner smoothing to any shape that supports setting a corner radius. Unlike the corner radius, you can only apply Corner smoothing to the entire shape.

1. 1.Select the target layer in the Layers panel.
2. 2.In the Design panel on the right sidebar, click to expand the four fields for independent corners.
3. 3.Click to open the Corner smoothing settings.
4. 4.Drag the slider to the right to increase the level of smooth corners and to the left to decrease it. Click iOS to set the Corner smoothing to 60% , the default setting for iOS.

In the canvas

Adjust the corner radius

You can adjust the corner radius in the canvas. This only applies to rectangles, stars, and polygons, but not frames. You can adjust the corner radius on the canvas by following these steps:

1. 1.Select the layer to adjust.
2. 2.Hover the cursor over the corner you want to adjust until the radius control handle appears.
3. 3.Drag the handle to adjust the radius value.

Adjust independent corners

For rectangle, star, and polygon layers, you can directly adjust the corner radius on the canvas, but this does not apply to frames. The specific steps are as follows:

1. 1.Select the layer to adjust.
2. 2.Press the modifier key ⌥ Option / Alt to adjust the corner value in a specific direction.
3. 3.Hover the cursor over the corner you want to adjust until the radius control handle appears.
4. 4.Drag the handle to adjust the radius.