How can I convert shadows from Figma to Webflow? In Figma, shadows have parameters X and Y, while in Webflow, there is only Distance with Angles. How can I determine the angle from X and Y in Figma for Webflow? Thank you.
TL;DR
- Calculate Webflow's shadow Distance as √(X² + Y²) using Figma’s X and Y offsets.
- Calculate Angle using atan2(Y, X) in degrees, then input the resulting Distance and Angle into Webflow to match Figma’s shadow.
To match Figma shadows in Webflow, you must convert the X and Y offsets in Figma to angle and distance values for Webflow's shadow controls.
1. Understand the Figma to Webflow Shadow Difference
- Figma uses: X (horizontal offset), Y (vertical offset), Blur, Spread, and Color.
- Webflow uses: Distance, Angle, Blur, Spread, and Color.
- To match shadows precisely, you need to convert Figma’s X and Y values into Webflow’s Angle and Distance.
2. Calculate Angle and Distance from Figma's X and Y
You can use basic trigonometry to convert:
- Distance = √(X² + Y²)
- Angle = arctangent2(Y, X) — the two-argument arctangent gives the correct angle for all quadrants.
Steps:
- Use a calculator or tool that supports
atan2(y, x)(in degrees). - Angle result should be adjusted for Webflow’s system, where:
0°is pointing to the right (positive X),90°is down (positive Y),180°is left, and270°or-90°is up.
Example:
If Figma shadow is:
- X = 4
- Y = 3
Then:
- Distance = √(4² + 3²) = √(16 + 9) = √25 = 5
- Angle = atan2(3, 4) = 36.87°
So in Webflow:
- Distance: 5
- Angle: 36.87°
(Round to 37° if entering manually)
3. Tools You Can Use
If you don’t want to calculate manually, use online tools:
- Angle & Distance calculator: Search “vector angle calculator” or use https://www.omnicalculator.com/math/vector-angle
- Plug in (X, Y) = (Figma offsets), then use output in Webflow.
Summary
To convert Figma shadow (X, Y) values into Webflow:
- Use Distance = √(X² + Y²)
- Use Angle = atan2(Y, X) in degrees
- Enter resulting Distance and Angle into Webflow's shadow settings to match Figma exactly.