Generate states and more

Some design work follows from what you already drew: a button’s hover and pressed colours, the dark version of a light screen, the loading state of a page. Generate works these out from the layers on the canvas: states turn the control into a variant set where it stands, and the other results appear beside your selection. It is arithmetic, not the agent: it is instant and uses no agent credits.

Where to find it

• Design tab: the Generate section, folded behind a +. It lists only what can be made from the current selection, each with a line saying what comes out.
• Right-click: Generate in the canvas menu has the same four.
• Keyboard: the shortcuts in the table at the end.

States

Select one control with a solid fill (a button, a field, a checkbox, a switch) and choose States. uxdeck works out which kind of control it is from its name (a layer it cannot tell from its name gets button states), and makes the states that kind needs:

Control	States
Button	Default, Hover, Pressed, Focus, Disabled
Field (input, search, select…)	Default, Hover, Focus, Error, Disabled
Checkbox or radio	Unchecked, Checked, Focus, Disabled
Switch or toggle	Off, On, Focus, Disabled

Two things happen. The control becomes a variant set of its states where it stands, ready to switch between and use in prototypes (see Interactive components). And a button gets its own hover and pressed colours, which Preview shows and your published site uses.

Every colour is measured against the label and moved until the text is readable at the AA contrast level. The message says if any had to move.

Dark version

Select one or more screens and choose Dark version. uxdeck makes a dark copy beside each one, named with / Dark at the end. It is not a simple inversion: greys are mirrored, brand colours keep their hue, shadows give way to lighter surfaces, and every text and background pair is measured and adjusted until it reads.

On a screen that is already dark, the same command says Light version and makes the light one. Your original is never changed.

Loading state

Select a screen and choose Loading state. You get a copy beside it with the same layout, where the content is replaced by its own shape: a paragraph becomes a bar per line, with a short last one. Use it to design what people see while the page loads.

Accessibility notes

Select a screen and choose Accessibility notes. uxdeck draws, over a copy of the screen, the focus order, tap targets, the heading structure and the measured contrast of each text: the redlines a developer needs. The message says how many things need fixing. See Layer accessibility for setting headings and names.

More generators

Other parts of uxdeck work the same way, with no credits:

• Generate a type scale… (the + in Variables, with nothing selected): pick a Base size (16 to start) and a Ratio, from Minor third (1.2) to Golden ratio (1.618), then Write the scale. Each step’s size, line height, letter spacing and weight is written as a variable, with a specimen on the canvas.
• Generate a colour ramp… (same place): pick a Colour and what it is Called, then Write the ramp. You get eleven colour variables from light to dark, each measured for the text that can sit on it. Your colour is kept exactly at the step it lands on.
• Fit to this width (the + on a frame’s bar): fits a screen’s layout to its width, as a new breakpoint does.

Things that need judgement are the agent’s job and use credits, such as Generate with the agent… in the breakpoint menu.

Catches

• States need one control with a solid fill. A gradient, an image fill or several layers selected will not do, and neither will a layer that is already a variant set.
• Frames, not single layers. Dark version, Loading state and Accessibility notes need a frame (or a layer at the top of the page) in the selection; a text or shape inside a frame is not enough.
• Generated copies do not follow the original. Change the light screen afterwards and the dark copy keeps its old layout. Generate again, or edit both.
• The name decides the control. A field drawn as a box called “Rectangle 3” gets button states. Name it “Email field” first.

Shortcuts

Action	Keys
Generate states	⌥⇧T
Generate the other theme	⌥⇧D
Generate the loading state	⌥⇧L
Generate accessibility notes	⌥⇧N

Generate is on every plan.