How Layouts variants work
A variant in Layouts is a non-destructive branch of your UI — a real, rendered version of a screen that reflects the change you asked for. It sits next to the original on the canvas. Iterating on the variant never touches the original. Accepting one creates a pull request in your repo.
Why variants exist
Design exploration is a fan-out problem. You rarely know the right answer on the first try; you want to see five versions side by side, compare them honestly, and pick one. In Figma this means duplicating frames and managing them by hand. In Layouts, variants are first-class — Layouts manages the relationship between the original and its children.
What lives in a variant
A variant captures three things:
- The component subtree it changed.
- The diff against the original.
- The conversation that produced it (so you can keep iterating from where you left off).
Iteration
Talk to the agent again, with the variant selected, and the agent extends that branch. Switch back to the original at any time; nothing has been lost.
Comparing variants
Because variants render at full fidelity right next to the original, comparison is visual — no toggling between Figma frames, no naming gymnastics. For dashboards, lists, and dense screens this is the difference between "I think the new one is better" and "the new one is actually better, here is the screen-shot proof."
Shipping a variant
Accepting a variant produces a code change in your repo. The default delivery is a pull request that contains exactly the diff captured in the variant. You review it like any other engineering change. Reject it and the variant goes back to being a draft.
Frequently asked
What is a variant in Layouts?
A real, isolated branch of a screen or component reflecting the change you asked the agent to make.
Are variants non-destructive?
Yes. Iterating on a variant never changes the original. You can keep many variants alongside the original.
How does a variant become production code?
Accept it; Layouts opens a pull request with the captured diff.
Try variants on your real app
Connect a React Native repo and ask the agent for a change.
Connect your app →