Corner radius and smoothing in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer working on a dashboard for a sales team.

📋 Request: Your manager wants the dashboard visuals to have smooth, rounded corners to make the interface look modern and friendly.

📊 Data: You have several rectangular shapes representing charts and cards on the dashboard. Each shape currently has sharp corners.

🎯 Deliverable: Adjust the corner radius and smoothing settings of these shapes in Figma to create smooth, rounded corners that improve the dashboard's look and feel.

Sample Data

Shape ID	Type	Width (px)	Height (px)	Current Corner Radius (px)	Current Smoothing (%)
1	Card	300	200	0	0
2	Chart Container	400	300	0	0
3	Button	120	40	0	0
4	Notification Badge	50	50	0	0

1

Step 1: Select the Card shape (Shape ID 1) in Figma.

In the properties panel, set the corner radius to 16 px and smoothing to 50%.

Expected Result

The Card shape corners become rounded with a smooth curve, making it look softer.

2

Step 2: Select the Chart Container shape (Shape ID 2).

Set the corner radius to 12 px and smoothing to 40%.

Expected Result

The Chart Container's corners are gently rounded with moderate smoothing.

3

Step 3: Select the Button shape (Shape ID 3).

Set the corner radius to 20 px and smoothing to 70%.

Expected Result

The Button has very rounded corners with smooth curves, making it inviting to click.

4

Step 4: Select the Notification Badge shape (Shape ID 4).

Set the corner radius to 25 px (half the width/height) and smoothing to 100%.

Expected Result

The Notification Badge becomes a perfect circle with fully smooth edges.

5

Step 5: Preview the dashboard to check the visual consistency of rounded corners.

No formula; visually inspect the shapes.

Expected Result

All shapes have consistent, smooth rounded corners that improve the dashboard's friendly look.

Final Result

Dashboard Layout with Rounded Corners

+----------------------------+    +--------------------------------+
|                            |    |                                |
|   Card (rounded corners)    |    |   Chart Container (rounded)    |
|                            |    |                                |
+----------------------------+    +--------------------------------+

+------------+    +----------------+
|  Button    |    | Notification   |
| (rounded)  |    | Badge (circle) |
+------------+    +----------------+

✓Rounded corners with smoothing make the dashboard look modern and friendly.

✓Different corner radius and smoothing values suit different UI elements.

✓Using half the width/height as corner radius with 100% smoothing creates perfect circles.

✓Consistent corner styling improves visual harmony across the dashboard.

Bonus Challenge

Create a custom shape with mixed corner radii and smoothing values on each corner to highlight a special dashboard card.

Show Hint

In Figma, select the shape, then click the independent corners icon to set different radius values per corner. Adjust smoothing individually for each corner to create unique curves.