I’m working on converting a Figma design to HTML and CSS but running into trouble with element positioning. When I try to recreate elements that have transform properties in Figma, they don’t show up in the right place in my HTML version.
The main problem is with an icon that should be positioned correctly but ends up in the wrong spot. In Figma everything looks perfect, but when I write the CSS code, the transformed element appears misaligned.
Has anyone else dealt with this kind of positioning problem when working with CSS transforms? I’m not sure if I’m missing something about how Figma handles transforms versus how browsers interpret them. Any suggestions on how to make the HTML output match the original Figma design would be really helpful.
I’ve tried adjusting the transform values but can’t seem to get it to match exactly.
figma’s transform values don’t always translate directly - copy the exact css from figma’s inspect panel instead of eyeballing it. also check if your parent container has the same dimensions. transforms get messed up when the container size is different from what figma expects.
This happens because Figma and browsers calculate transforms differently. Figma uses the element’s visual center, while CSS defaults to transform-origin (which gets weird with positioned elements). I usually check Figma’s inspect panel against browser dev tools - that shows you exactly where the difference is. Also, Figma uses fractional pixels that browsers round differently. Try setting an explicit transform-origin and make sure your box model matches Figma exactly. Sometimes padding or margins look the same but mess up the transform math.