---
title: "auto-layout and variants | Skills We Assign For | Azendo"
description: "Auto-layout and variants in Figma — designs that behave like interfaces, plus the Azendo roles assigned for it."
url: "https://azendo.co/skills/auto-layout-and-variants/"
---

[Skills](https://azendo.co/skills/) Design and research 

# auto-layout and variants.

Auto-layout applies responsive constraints to design frames so they resize and reflow like real interfaces, and variants group component states into one component with switchable properties.

## Where auto-layout and variants fits on a long engagement.

Auto-layout makes a design file behave the way the implementation will. A frame that reflows when content grows exposes the layout problems that a fixed-size mockup hides — the button that wraps badly, the label that truncates — while they are still cheap to fix.

Variants are what keep state coverage honest. A component holding default, hover, focus, disabled, loading and error states in one place makes it obvious when a state is missing, where separate frames let the unglamorous ones simply never get designed.

## What an assigned team does with auto-layout and variants.

Files structured this way translate to code far more directly, because the structure already mirrors how a component will be built. That alignment reduces the interpretation an engineer has to do, which is where most handover defects originate.

Working that way consistently is a craft standard rather than a tool feature, developed deliberately through the [Talent Success and Academy](https://azendo.co/talent-success-academy/) programme.

## What we use auto-layout and variants for.

* Layout problems surfaced in design Reflow that exposes wrapping and truncation while fixing is cheap.
* Every state designed Variants making a missing focus or error state visibly absent.
* Structure that maps to components Files organised the way the code will be, reducing interpretation.

## How auto-layout and variants capacity is assigned.

Design craft standards sit inside the assigned design capacity, with file structure treated as part of the deliverable rather than a personal preference.

## Roles we assign auto-layout and variants for

* [UI Designer UX/UI design](https://azendo.co/services/ux-ui-design/ui-designer/)

## Service lines it sits in

* [UX/UI design](https://azendo.co/services/ux-ui-design/)

Capacity is agreed as a committed monthly capacity across a discipline, not per skill.

## Related in design and research

* [Figma — skill we assign for](https://azendo.co/skills/figma/)
* [Storybook — skill we assign for](https://azendo.co/skills/storybook/)
* [Maze — skill we assign for](https://azendo.co/skills/maze/)
* [Hotjar — skill we assign for](https://azendo.co/skills/hotjar/)
* [usability testing — skill we assign for](https://azendo.co/skills/usability-testing/)
* [design systems — skill we assign for](https://azendo.co/skills/design-systems/)
* [design tokens — skill we assign for](https://azendo.co/skills/design-tokens/)
* [component libraries — skill we assign for](https://azendo.co/skills/component-libraries/)

## Tell us what your roadmap needs auto-layout and variants for.

A service delivery manager replies with the disciplines we would assign, the monthly capacity and what the first month looks like.

[All skills we assign for](https://azendo.co/skills/)