Adjusting Figma designs to fit viewport

Other Questions Figma
1

Hey folks, I’m tearing my hair out over here! I’ve got this Figma design that’s way too big for my screen. It’s 1920x720 and I have to scroll around just to see the whole thing. Ugh!

I’ve tried all sorts of CSS tricks to make it fit:

.big-picture {
  max-width: 100%;
  height: auto;
}

.another-attempt {
  width: 100vw;
  height: 100vh;
}

.last-try {
  width: 100%;
  max-height: 100vh;
  object-fit: contain;
}

But nothing works! The image stays huge and my poor 19:10 MacBook screen can’t handle it.

To make matters worse, when I shrink the browser window, stuff just disappears off the edges. It’s like my design is claustrophobic or something.

I’m at my wit’s end here. Any ideas on how to make this beast of an image play nice with my viewport? Help a designer out!

2

yo henryg, been there done that! those figma designs can be a real pain. have u tried using css transform? something like this might do the trick:

.figma-design {
transform: scale(0.8);
transform-origin: top left;
}

play around with the scale value. it should shrink everything proportionally without losing stuff off the edges. good luck mate!