Corner radius and smoothing

In interface design, we often see rounded corners in screens, icons, buttons, and cards. Many buttons and icons in Motiff have rounded corners.

Unlike sharp edges, the human eye can more easily follow circles and curves without obstructing vision. In the physical world, circles and rounded corners are also relatively common. Overall, circles and rounded corners feel softer, friendlier, and safer for users.

In Motiff, there are two properties related to rounded corners:

• Corner radius rounds the corner where two lines meet. You can use this to create shapes with rounded corners.
• Corner smoothing adjusts the rounded corner to create a continuous curve. This property creates rounded rectangles with smoother rounded corners.

The following layers support setting Corner radius and Corner smoothing:

• Frame
• Rectangle, polygon, and star
• Vector network
• Boolean groups containing rectangles

Corner radius

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 or directly on the canvas.

Design panel

1. 1.Select the target layer in the canvas or layers panel.
2. 2.Open the design panel in the right sidebar.
3. 3.Enter a value in the field of .
4. 4.Hover the cursor over , drag left to decrease the value, and drag right to increase the value.

Canvas

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

By default, Motiff applies the corner radius to the entire shape. However, during the design process, you may often need to set different radius values for certain corners, in which case you can use independent corners. Setting independent corners allows you to adjust the value of the corner radius for each direction. This can be achieved in the following ways.

Design panel

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.In Motiff, only rectangles, frames, component templates, component sets, and instances support adjusting independent corners. Click to adjust the corners in each direction. After clicking the icon, four fields will appear below the corner radius, which 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 Tab .
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.

Canvas

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.

Vector editing mode

1. 1.Select the layer to adjust.
2. 2.Click in the toolbar to edit the layer, or press Return or Enter to enter vector edit mode.
3. 3.Select a single point on the canvas.
4. 4.Adjust the corner radius in the design panel on the right sidebar in the field of .
5. 5.Enter a value in the field.
6. 6.You can also increase or decrease the value by dragging in the corresponding field area. Hover the cursor over , drag left to decrease the value, and drag right to increase the value.

Corner smoothing

Starting with the application icons from iOS7, the rounded corners have been different. This type of smooth corner creates a seamless continuous curve that regular rounded corners cannot achieve.

Adjust smooth corners

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 canvas or 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% , which is the default setting for iOS.