Pen tool for custom paths in Figma - Cell-by-Cell Formula Trace

Sample Data

Coordinates for a custom Bezier curve path created using the Pen tool in Figma.

Cell	Value
A1	Start Point (X)
B1	Start Point (Y)
A2	100
B2	100
A3	Control Point 1 (X)
B3	Control Point 1 (Y)
A4	150
B4	50
A5	Control Point 2 (X)
B5	Control Point 2 (Y)
A6	200
B6	150
A7	End Point (X)
B7	End Point (Y)
A8	250
B8	100

Formula Trace

Bezier Curve Point Calculation at t=0.5

Step 1: Calculate point on cubic Bezier curve using formula: B(t) = (1-t)^3 * P0 + 3*(1-t)^2 * t * P1 + 3*(1-t)*t^2 * P2 + t^3 * P3

Step 2: Calculate X coordinate: (1-0.5)^3 * 100 + 3*(1-0.5)^2 * 0.5 * 150 + 3*(1-0.5)*0.5^2 * 200 + 0.5^3 * 250

Step 3: Sum X terms: 12.5 + 28.125 + 37.5 + 31.25

Step 4: Calculate Y coordinate: (1-0.5)^3 * 100 + 3*(1-0.5)^2 * 0.5 * 50 + 3*(1-0.5)*0.5^2 * 150 + 0.5^3 * 100

Step 5: Sum Y terms: 12.5 + 9.375 + 28.125 + 12.5

Step 6: Final Bezier curve point at t=0.5 is (109.375, 62.5)

Cell Reference Map

    A      B
1 StartX StartY
2  100    100
3 Ctrl1X Ctrl1Y
4  150     50
5 Ctrl2X Ctrl2Y
6  200    150
7 EndX   EndY
8  250    100

References: P0=(A2,B2), P1=(A4,B4), P2=(A6,B6), P3=(A8,B8)

Shows the four key points used by the Pen tool to create a cubic Bezier curve: start point, two control points, and end point.

Result

    A      B      C
1 StartX StartY  Point at t=0.5
2  100    100    (109.375, 62.5)
3  150     50
4  200    150
5  250    100

The calculated point at t=0.5 on the custom path is shown in column C, representing the midpoint on the curve created by the Pen tool.

Sheet Trace Quiz - 3 Questions

What does the variable t represent in the Bezier curve formula?

A The X coordinate of the control point

B The position along the curve from start (0) to end (1)

C The Y coordinate of the end point

D The thickness of the path

Key Result

Cubic Bezier curve point is calculated by weighted sum of start, two control, and end points using parameter t from 0 to 1.