Hi there. I am new to these forums, so go easy on me if this convo lives somewhere else (or point me to it, please)…
I use Figma for design/light prototyping. Does anyone have a template they can share, or walk me through their setup approach, for getting frames and layout grid settings within Figma,… as close to Webflow’s four breakpoints it offers in the UI?
Ideally, for each “Page” in Figma I would have four frames: Desktop, Tablet (Portrait), Mobile (Landscape) and Mobile (Portrait)… looking to see what others have done with their columns settings, gutter widths, etc …
In webflow designer, when you click the icon it shows you the width in pixels.
Desktop = 1364
Tablet = 768
Mobile Landscape = 568
Mobile = 320
In figma menu click frame, choose desktop 1440x1024
Draw a rectangle any size inside.
Change its width to 1364x1024
Select both and pick align horizontal centres.
You can lock the rectangle and you can now edit on the page knowing where the boundary is.
I would not design to that but much further inside.
Create a grid for the frame.
12 columns, stretch, Margin 140 and gutter 30.
The edges of your columns is the new max to work too.
Here is an idea,
Design the desktop.
Create another frame or box for the tablet mode.
Select all the elements and copy to the new frame, choose size tool and drag to fit.
