Constraints vs. Auto layout: when to use which in UI design?

Use constraints when an element must keep a position relative to its parent frame. Use Auto Layout when content, padding, and the space between items should determine the arrangement. A close button pinned to a card's corner and a card that grows with its text need different rules—and often need both in the same component.

In Pixso's UI design workspace, you can build those relationships and inspect how the frame responds to resizing. Start with the behavior you want, not the name of the feature: should this layer stay against an edge, follow another layer, or make its parent grow?

Part 1: What a responsive component needs to handle

Nobody wants to redraw the same card for every screen width. But resizing the outer frame is only one source of change. A person's name may be longer than the placeholder, a pricing plan may gain three features, or a translated button label may need another line.

These changes reveal two separate relationships. Constraints describe a child's relationship to its parent frame. Auto Layout describes the arrangement of children and, depending on sizing settings, the parent's relationship to its content. Neither replaces a decision about what should happen when there is genuinely too little room.

For handoff, show a normal example and the content change that matters. “Keep the close button 24 pixels from the top and right” is a different instruction from “keep 16 pixels between the name and job title.” Those two statements are more useful than asking a developer to make everything responsive.

Part 2: Set up the relationships in Pixso

Pixso provides frames, Auto Layout, constraints, and reusable components in a shared design file. Use them to make a layout's intended behavior visible to teammates, rather than leaving a collection of unrelated rectangles for someone else to interpret.

Keep the layer hierarchy simple. The profile card should contain its name, job title, and close control; the surrounding page should contain the card. Applying a rule to the wrong parent is a common reason a layer appears to ignore an otherwise sensible setting.

Pixso's Handoff panel exposes properties, measurements, and reference code. Use that information to communicate the design. A production component still needs the application's layout rules, semantics, interactions, and testing; a reference snippet is not a guarantee of a finished implementation.

Part 3: What are constraints in design?

Think about pinning a poster to a wall. If the wall becomes wider, should the poster keep the same distance from the left edge, remain centered, or stretch? Constraints answer that kind of question for a child layer when its parent frame is resized.

A floating action button can stay near the bottom-right corner of a mobile frame. A close control can stay at the top-right of a dialog. An illustration may need a proportional relationship to a larger frame. The appropriate rule depends on whether the position, dimensions, or both should change.

Constraints do not, by themselves, turn a stack of text boxes into a content-aware list. If a paragraph grows, a sibling placed below it may still overlap. Likewise, anchoring a control to the right edge does not reserve space for a long title beside it. You still need a layout relationship or explicit room for that control.

Part 4: How Auto Layout responds to content

Auto Layout arranges items using direction, spacing, padding, alignment, and sizing choices. Instead of moving each layer after an edit, you describe how the layers should sit together. Its concepts are useful when discussing CSS layout, but a design-tool layout is not a complete browser implementation.

Consider a button whose label changes from “Buy” to “Add to cart.” A content-sized button can grow around the label while preserving its padding. A full-width form button has a different requirement: its width follows the available space, while the label remains legible inside it. Applying Auto Layout without choosing the intended sizing behavior will not resolve that difference.

The same applies to a pricing card. The feature list should push later items down as it grows, and the card must be allowed to grow in height. If the card's height remains fixed, extra content can still overflow. If the text has no width limit, it may continue horizontally instead of wrapping.

Part 5: When to use constraints, Auto Layout, or both

A simple header can use constraints to keep its logo and menu control at opposite ends. If it also contains links, search, and account controls, the relationship between those items matters. At that point, use a structured layout and decide which elements change at narrow widths; pinning everything to an edge will not create space.

Part 6: Build a responsive profile card in Pixso

The profile card needs a name, a job title, and a close control. Its width follows the space available on the page; its height follows its text. The close control must not move down when the job title wraps.

1. Define the card's width before sizing its text

Create a frame named “Profile Card” and apply vertical Auto Layout. Use 24 pixels of padding and 16 pixels between the text items as starting values for this example. Give the card a defined width while building it—360 pixels is a useful test size—and let its height follow its content.

Do not ask both the card and the text to determine each other's width. Choose which one sets the available space. Here, the card supplies the width and the text uses the inner width after padding.

2. Add text that can wrap and grow vertically

Add the name “Alex Morgan” and the job title “Senior Product Designer.” Let the text layers fill the available inner width and grow in height as their content wraps. Then replace the title with “Senior Product Designer, Payments and Account Security.” The expected change is a taller card, not clipped text or reduced type size.

3. Keep the close control out of the text stack

Place the close control independently of the Auto Layout flow, using the setting that ignores Auto Layout for that layer. Set its horizontal constraint to the right and its vertical constraint to the top. Its offsets now belong to the card, rather than to the length of the job title.

Independent positioning does not make room for the control. Reserve a clear area on the right of the name, or put the name and close control in a separate header row if they should share the same layout flow. Choose the row approach when the close control should contribute to the header's height.

4. Try the content changes that can break the card

Resize the card from 360 to 280 pixels, then to 480 pixels. Keep the long job title in place. At the narrow width, text should wrap without running under the close control; at the wide width, spacing should remain intentional rather than stretching randomly.

If the title overflows horizontally, inspect its width setting. If the last line is clipped, inspect the text and card heights. If the close control moves with the title, inspect its parent and flow setting. Adjust the relationship causing the failure, rather than manually nudging a single test instance into place.

5. Share the behavior as well as the finished screen

Keep the narrow and wide examples beside the component. Explain the width rule, text growth, padding, and close-control offset in the handoff. Developers can inspect measurements and reference code in Pixso, then implement the component in the project's own layout system.

Choose the rule that matches the change

Constraints are useful for parent-relative positioning; Auto Layout is useful for content and sibling relationships. A reliable component combines them only where each relationship is needed. Start with the normal state, change the content, and resize the parent—the failure tells you which rule needs attention.