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