Question 137287 in Html Question posted in
Some basic documentation can be found here.

Html – How do I fit my design to a viewport that is different to my frame size?

Is there a way to to make all your frames from Figma to scale up so they fit the viewport of the website you are building? The frame size of my design is different from my screen size.

Tags:

2

Answers


  1. 0

    I don’t think that for example figma design has made according to 1440px viewport that will be easily converted into different viewports..

    So you can do one thing, you can make website using whatever viewport design has given (i.e.-1440px) And in responsive (media query) you can increase (for more than 1440px viewport) and decrease (for below 1440px viewport) spaces and typography…

    That’ll be a good and easy way for you…

    Thanks

    Login or Signup to reply.
  2. 0

    I understand that you’re asking how to resize a frame in Figma and have the design "fit" the new size. This is possible using a combination of features to tell Figma how you want the elements to position and scale for different frame sizes.

    Primarily, you will use Constraints to "pin" elements to the frame edges or have them scale with the frame. You can combine Constraints with Layout Grids to have elements follow the grid as the frame resizes and also use Auto Layout to tell Figma how elements should flow within their container.

    Overall, a Figma file can be set up similar to how a webpage would be built to be responsive to the width of a browser window. These Figma features help a designer create something that can be easily replicated in a browser and fit different screen sizes for different users.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search