layout-design

2 posts

figma

Organize photo galleries, slides and more with Smart Selection 2D | Figma Blog (opens in new tab)

Figma’s Smart Selection 2D extends the original Smart Selection feature from simple lists to both horizontal and vertical layouts. It lets designers quickly tidy, reorder, and adjust spacing in grids and lists, reducing tedious manual repositioning. The feature is especially useful for photo galleries, presentation slides, and other repeated layouts. ## Extending Smart Selection - The original Smart Selection launched three months earlier and helped users rearrange lists with the **Tidy Up** button. - Designers reported saving significant time by avoiding manual alignment and spacing adjustments. - Based on the positive response, Figma expanded the feature into Smart Selection 2D. ## Organizing Lists and Grids - Smart Selection 2D works in two dimensions: - Horizontally for rows and lists - Vertically for columns and grids - Users can adjust spacing and reorganize multiple elements more efficiently. - The feature supports layouts such as: - Photo galleries - Presentation slides - Other collections of repeated design elements ## Example Use Cases - Photo galleries can be quickly reordered into a preferred arrangement. - Presentation slides can be rearranged without manually repositioning every slide. - Designers can spend more time on content and less time maintaining layout consistency. - Figma shared demonstrations on Twitter to show how the feature could streamline common design tasks. Smart Selection 2D is recommended for any Figma workflow involving repeated elements or structured layouts, as it automates much of the spacing, alignment, and reordering work.

figma

Grid Systems for Screen Design | Figma Blog (opens in new tab)

Swiss grid design remains relevant to digital products, but traditional fixed-page tools do not handle fluid screen sizes well. The post argues that flexible grids can preserve visual coherence while adapting to different devices. Figma’s solution combines constraints, layout grids, and nested frames to create responsive design systems with precise alignment. ## From Fixed Pages to Fluid Screens - Swiss designers such as Joseph Müller-Brockmann and Karl Gerstner systematized printed-page layouts using rational grid structures. - Traditional grids assumed fixed page dimensions and precise control over typography, margins, and spacing. - Digital interfaces must accommodate changing screen sizes, shapes, and pixel densities. - Designers often compensate with multiple artboards, repetitive adjustments, or guesswork when tools are built around static layouts. ## The Core Building Blocks Figma proposes three complementary features: - **Constraints:** Define how an object responds when its containing frame changes size. - **Layout grids:** Provide detailed alignment and sizing rules across a design. - **Nested frames:** Allow different parts of a design to use their own layout systems. The greatest flexibility comes from combining all three rather than using them independently. ## Constraints for Responsive Behavior - Objects can be anchored to the left, right, or center of a frame. - Objects can also stretch to fill available space. - Constraints provide a basic way to preserve relationships as a frame expands or contracts. ## Stretchable Layout Grids - Grids provide more granular control than simple edge or center constraints. - A box spanning two grid columns can grow or shrink while remaining aligned to those columns. - Column grids can organize text, toolbar icons, and other interface elements—not just web-page content. - Stretching grids allow layouts to respond naturally to changing screen dimensions. ## Frames Within Frames - Nested frames let different sections of a design use separate grids and alignment rules. - This makes it possible, for example, to keep toolbar icons aligned to one grid while allowing the main content to follow another layout. - Frames provide more functionality than static artboards because they support responsive relationships and hierarchical layout systems. - The structure resembles nested HTML `<div>` elements, making it closer to how designs are implemented in code. ## Toward Better Design Tools - Responsive layout systems are only a starting point for improving digital design tools. - The post encourages designers to reassess inherited conventions and look to historical design practices for useful ideas. - Modern tools should combine the coherence of traditional grids with the flexibility required by variable screens. Figma’s recommended approach is to build designs from nested frames, stretchable grids, and well-defined constraints, creating systems that remain organized without being tied to a single screen size.