• Open Figma and grab the Frame Tool (F) from the toolbar.
• Click and drag on the canvas to make a new frame, or just pick a preset size from the right-hand panel.

• With the frame selected, head over to the right-hand panel and find the Layout Grids section.
• Click the + icon to add a new layout grid.

• The default grid type is Grid. Click on the grid type dropdown to switch it to Columns.
• For responsive design, columns are often more useful than a square grid.

• In the same Layout Grids section, set the Count to the number of columns you want (commonly 12 for Bootstrap-like grids).
• Adjust the Gutter value to set the spacing between each column, e.g., 16px.

• Set the Margin size to define the space on either side of the grid within the frame. This helps in maintaining consistent spacing around your content.
• Common margin values include 24px, 32px, or whatever suits the design needs.

• Select the elements inside the frame you want to make responsive.
• In the right-hand panel, under Constraints & Resizing, set appropriate constraints to ensure elements adjust as the screen size changes:
• For columns-based layouts, using Left and Right constraints for horizontal responsiveness is useful.
• Use Top and Bottom constraints for vertical adjustments.

• Resize the frame to different widths to ensure that the content responds correctly.
• Adjust columns, gutter, and margins if necessary to achieve the desired responsive behavior.

• To reuse this layout grid, save it as a style:
• Click on the four-dot icon next to the Layout Grid label.
• Choose Save Style… and give it a name.
• Apply this grid easily to other frames later by selecting it from the styles panel.

By following these steps, responsive grids can be created in Figma, providing flexibility and ensuring the design adjusts smoothly across various screen sizes.