Guide
Adjust an element of a screen by hand
With Adjust mode you change the padding, colors, type, corners or an icon of any element, without dictating or spending AI, on one screen or on all its copies.
Who can do this
- For
- Designers, Your team
- Role
- “Can run with AI” and up
- Plan
- All plans, including Free
- Where
- On a computer
For a small, specific change (a margin, a color, the size of a text) you don't need to dictate: you adjust it yourself on the screen and it's saved in its code.
Adjust an element
- Zoom in on the screen and press Adjust in the left rail, or the P key.
- Move the pointer over the screen: each element is outlined with its name and its size.
- Click the one you want to change. Its settings box opens next to it.
- Change what you need (below, what's in each part).
- Press Save, or just close the box: that saves it too.
At the top of the box is the element's path (for example, Card › Button › Text): press any step to pick the element that contains it.
What you can change
Depending on the element, the box shows some parts or others:
| Part | What you change |
|---|---|
| Icon | Its color and size, or swap it for another from the libraries. You can also drop your own SVG on it |
| Image | Replace it (from your computer or from Images), how it fits (Fill, Whole, Stretch, Actual size) and its framing |
| Text | What it says |
| Typography | Color, size, weight, line height, alignment and spacing |
| Spacing and size | The margin and padding on each side |
| Background and border | Background, corners, border, its color, the shadow and the opacity |
On this screen or on all copies
At the bottom of the box you choose what it applies to:
- Just this one: changes only the element you picked.
- All copies: changes every matching element in the project. The button tells you how many there are and on how many screens.
If the element is part of a shared piece, the change always goes to all its copies.
Undo an adjustment
Esc discards what you haven't saved, and Reset goes back to how it was when you opened the box. What's already saved is undone from the screen's history, where it shows up as Manual adjustment: see Go back to an earlier version.
Troubleshooting
- "The screen's code creates this element when it opens": it isn't written in the screen, so it can't be saved from here. Ask for it with a note.
- "The screen changed in the meantime": pick the element again and retry.
- "An AI batch is working on that screen": wait for it to finish.
- You don't see Adjust in the rail: adjusting requires the Can run with AI role.
