The post is a roundup of community-submitted Figma tips designed to help users work more creatively and efficiently. It highlights practical techniques for cropping, creating patterns, resizing layouts, and inspecting designs, showing how small features and shortcuts can improve everyday workflows.
## Cropping Images with Masks
- Use masks to crop images into custom shapes rather than relying only on rectangular frames.
- Masks provide a flexible way to control which parts of an image remain visible.
## Creating Patterns with Symbols
- Reuse symbols to build repeating visual patterns.
- Duplicating and arranging symbols can quickly produce decorative or structured compositions.
## Resizing Frames with Constraints
- Set constraints on frame elements to control how they behave when the frame is resized.
- Constraints help preserve relationships between elements across different dimensions.
## Inspecting Designs with Outline Mode
- Press **Command + Y** to switch to Outline Mode.
- This view makes it easier to inspect vector paths, layers, and the underlying structure of a design.
The roundup encourages designers to experiment with Figma’s masks, symbols, constraints, and keyboard shortcuts to make common design tasks faster and more adaptable.
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.
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.
