Streaming live at 10am (PST)

Box Shadow From Figma to Webflow

Hey guys,

Do you know how to convert shadows from Figma to Webflow?

In Figma shadows parameters are X Y and in Webflow only Distance with Angles. But how would I know which angle form X Y from Figma together…

Thank you


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

This is a situation where you’ll want to take advantage of the CSS Preview to make sure the styles match what’s shown in Figma–just select the element you want to add the shadow to and open the preview to see your changes as they would appear in the project CSS:

If the box-shadow in Figma has the same X and Y value, then you’d just need to use the rotate buttons (the circular arrows) to choose one of the four corner angles based on the direction of the shadow and set the appropriate distance. If the X and Y values are different, then you’d need to fiddle with the angle to match the corresponding values.

I’d imagine using an angle instead of two separate values is more user friendly but thankfully the CSS Preview will give you enough information on the generated styles to match Figma :+1:

that’s cool. thank you! :pray:

1 Like

Hey! I had stuck with the same issue. The calculation takes some amount of time and i wondered if there is any tool to do this and i cam across this article discussing the box-shadow theory in detail. And luckily he had built a tool that calculates it for you automatically. This is the link for the tool and this is the link for the article

2 Likes

wow, that’s great. your reply would be the new solution then! the previous solution was not displaying shadows perfectly and numbers were changing on its own. thanks

1 Like

Yep, the previous solution wasn’t very helpful for me neither but thankful for the direction @mikeyevin provided. I’m glad that helped :+1: