Layout Grids | Techlist.io

figmaJun 25, 20172 min readCurated summary

Figma Now Has Guides | Figma Blog

Figma introduced Guides in response to frequent user requests for faster alignment and positioning tools. The feature adds draggable horizontal and vertical ruler guides that complement Layout Grids, with options for frame-level organization, pixel nudging, and undo support. ## Creating and Using Guides - Enable rulers through **Main menu → View → Show rulers**. - Hover over the top or side ruler to see the offset, then click to create a Guide. - Guides appear as thin red lines and can be dragged to new positions. - Multiple Guides can be added by clicking several ruler offsets. ## Managing Guides - Delete a Guide by selecting it and pressing **Delete**, or drag it off the canvas. - Guides disappear when ruler view is disabled. - Accidental changes can be undone with **Command-Z**. - Arrow keys allow pixel-by-pixel nudging. ## Frame-Level Guides - Dragging a Guide into a frame converts it into a frame-level Guide. - This keeps the overall canvas cleaner when using many Guides. - Frame-level Guides work only on top-level frames; moving such a frame into another frame causes the Guides to disappear. The feature provides a lightweight, flexible alternative to Layout Grids for aligning designs. Users can enable rulers and create Guides as needed, while frame-level support helps organize complex canvases.

Read original

Layout Grids Figma User Interface Design Editor+1

figmaMay 25, 20172 min readCurated summary

Tips for using Constraints in your workflow

Figma’s constraints feature helps designers build layouts that adapt across different screen sizes and contexts. By anchoring elements to edges, centers, or grids, designs can remain structurally consistent instead of requiring separate manual adjustments. The post presents five practical applications, from simple button placement to flexible navigation bars, table cells, and playful illustrations. ## Pinning Buttons to Corners - Set an action button’s constraints to the bottom and right sides of its parent frame. - This keeps floating action buttons in a consistent location as the screen expands. ## Combining Components and Constraints - Constrain important elements within a frame, then convert the frame into a reusable component. - Duplicate the component for different screen sizes. - Changes to the original—such as colors or text sizes—propagate to all instances, making responsive variations easier to manage. ## Building Flexible Navigation Bars with Grids - Nest a navigation bar frame at the bottom of a phone-screen frame. - Set its constraints to **left & right** and **bottom** so it stretches with the screen. - Apply a layout grid with the **stretch** type. - Place buttons in grid columns and center-constrain them so they reposition as the screen changes. ## Creating Reusable Table Cells - Group related content, such as an avatar and text, and constrain it to the center-left of the cell. - Group action text and a rounded rectangle into a button, then constrain it to the center-right. - The cell’s contents remain attached to their intended sides across different frame widths. ## Experimenting with Illustrations - Horizontal and vertical constraints can also be applied creatively to illustrations. - Stretching constrained artwork can produce humorous distortions and playful effects. Constraints are most useful when combined with components and grids. Setting them thoughtfully allows one design to adapt across many screen sizes while reducing repetitive layout work.

Read original

Layout Grids Figma User Interface Responsive Design+3