2

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?

Dogukan Aktas
  • 113
  • 10

2 Answers2

4

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.

Rowan van Zijl
  • 120
  • 1
  • 7
  • Ok, I understood but I have one more problem. Design width is 1366px and they expect me to make this site responsive. When I make container's width 1366px, page looks pretty bad. Also there is bigger screen sizes too but they didn't mention that. So I should ignore this 1366px or how can I impelent this? @rowan-van-zijl – Dogukan Aktas Oct 07 '20 at 18:25
  • 1
    You should indeed make your container 1366px. Why does your page look bad when you do this? – Rowan van Zijl Oct 08 '20 at 07:14
  • Becase looks bad on the wider screens. So I should start with 1366px and make responsive for bigger and smaller screens right? @Rowan van Zijl – Dogukan Aktas Oct 08 '20 at 10:56
  • 1
    The container of your website has a maximum width of 1366px. So it should not get any bigger then that, mostly you will add all the normal content of your website in that container, however you can have some fullwidth elements like a header. Your container should have these properties to make it scale on mobile: max-width: 1366px; width: 100%; – Rowan van Zijl Oct 09 '20 at 08:45
0

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.

dreamLo
  • 1,612
  • 12
  • 17