All items are fixed in the figma design

Question

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?

Answer 1

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.

Answer 2

Indeed, the CSS position that Figma provides is not something you can use in your HTML/CSS for the web. It's mostly for mobile/desktop GUIs where you usually position elements absolutely, as Figma does, and is not inherently responsive.

As for the the 1366px width, this is the standard width for websites when doing webdesign. You can either have a fixed width that sits in the center when your desktop monitor is bigger than 1366px, or you can make it liquid and let it span from left to right.

If you say it doesn't look good on large screens, the easiest fix is to make it fixed and centered and it will look good for 1366px screens, while on the larger screens it's just more empty space on the sides.

There's also Desech Studio which will import your figma elements and position them relatively in grids, as you would expect in HTML/CSS. Then you can further customize, add responsive layout rules, export to react, etc.