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
- Use √(X² + Y²) to convert Figma's X/Y shadow offsets to Webflow's distance.
- Calculate angle with atan2(Y, X) × (180/π), adjusting negative results by adding 360°, then input the angle, distance, and matching blur, spread, and color into Webflow.
To convert drop shadows from Figma to Webflow, you need to translate Figma’s X and Y offsets into Webflow’s distance and angle values.
1. Understand Figma vs. Webflow Shadow Systems
- Figma uses:
- X: horizontal offset
- Y: vertical offset
- Blur and Spread
- Webflow uses:
- Angle (degrees)
- Distance (pixels from object center)
- Blur and Spread
To translate the shadow, calculate angle and distance from the X and Y values.
2. Convert Figma X/Y to Webflow Angle and Distance
- Distance: Use the Pythagorean formula
Distance = √(X² + Y²) - Angle: Use trigonometry to translate x/y into degrees
Angle = arctangent(Y ÷ X) (adjusted to degrees and Webflow's direction system)
Important: Webflow's 0° angle starts at the right (east) and rotates clockwise (like a circle), so you need to adjust the resulting angle accordingly.
Here’s how to calculate:
- Angle in degrees = atan2(Y, X) × (180 / π)
- If angle is negative, add 360 to bring it into a 0–360° range
You can use a calculator or tool like this JavaScript snippet (run in console or browser dev tools):
function figmaToWebflowShadow(x, y) { const distance = Math.sqrt(x * x + y * y); let angle = Math.atan2(y, x) * (180 / Math.PI); if (angle < 0) angle += 360; return { angle: Math.round(angle), distance: Math.round(distance) };}figmaToWebflowShadow(10, 20); // Replace with your X and Y values3. Apply the Values in Webflow
- Open Webflow, select your element, and go to the Effects section.
- Enable Box Shadow and manually enter:
- Distance: from the formula
- Angle: as calculated
- Blur and Spread: same as in Figma
- Color and Opacity: match Figma shadow color
Summary
To convert Figma shadows to Webflow:
- Distance → √(X² + Y²)
- Angle → atan2(Y, X) × (180 / π), adjusted to 0–360°
- Input into Webflow’s shadow fields and keep other values the same
This gives you an accurate visual match between Figma and Webflow shadow styles.