htmlcsspsdfigmafigma-api

All items are fixed in the figma design


I'm trying to convert figma design to html and css but in the design all items' positions are absolute.

One of the nav item's styles:

position: absolute;
width: 79px;
height: 16px;
right: 395px;
top: 13px;

Grid items' styles:

position: absolute;
height: 200px;
left: 0px;
right: 0px;
top: 0px;

I'm new to figma and this is the first time I've seen something like this. I don't know if this is conventional or not. They expect me to make the design responsive aswell. But since they are all fixed, I cannot use flexbox and grid systems. What is the conventional way to do this?


Solution

  • You should not pay attention to the position that figma adds. These position values come from the position on the artboard itself. Your website is never going to have these exact dimensions.

    My advice is to only use the styles from figma that are related to how the element looks. Like background-color, font-size etcetera. You should do the positioning yourself.