You need to make a button slightly smaller.
You can see which button. You can also see that its current size feels wrong.
In a prompt-only workflow, that tiny change becomes:
Make the Unfreeze card circle a little smaller.
You wait and check the result.
Too small.
So you ask again:
A little bigger. Keep it circular.
The edit is small. Explaining it has become the work.
AI can get a screen most of the way there quickly. Once the direction works, the remaining changes become much more exact: resize this control, change this text, tighten this gap, or check whether this colour actually comes from your design system.
At that point, you are not asking AI to invent another screen.
You are editing the one already in front of you.
0 to 80 was already fast. Now 80 to 100 is too.
Direct Editing in Figr gives those last changes a more direct path. Select an element, inspect what it uses, and change its text, size, colour, spacing, typography, or layout while looking at the design.
When the change still needs thought, you can prompt the selected element instead.
TL;DR
- Make known changes directly. Change text, size, colour, spacing, typography, and layout without writing another prompt for every small correction.
- Check what the design actually uses. Inspect an element's values and choose from your attached design system instead of relying only on what looks right.
- The agent still applies the work. Your edits appear in the preview first. When you press Apply, Figr's agent applies them to the prototype with the product, design-system, codebase, and framework context already available to it.
What is Direct Editing in Figr?
Direct Editing lets you change elements inside a Figr prototype by working on the design itself instead of describing every change in chat.
Select an element and you can inspect or change properties such as:
- text
- colour
- typography
- width and height
- padding
- spacing
- borders
- corner radius
- alignment
You see the result while you work.
Prompting does not disappear. It becomes another way to work on the same selected element.
If you already know the answer, edit it.
If you still want Figr to help work out the answer, prompt the element.
That difference becomes noticeable when an otherwise good screen still has several small corrections left.
%20(1).gif)
Why do small AI design edits turn into long prompt loops?
Prompting works well when the agent still has a decision to make.
It becomes awkward once you have already made that decision yourself.
Take the circular Unfreeze card action on a card screen.
You know it is too large.
The open question is not what should change. It is how much.
A prompt such as:
Make the Unfreeze card circle a little smaller.
still leaves “a little” open to interpretation.
You see the new version. It went too far.
Now you need another request.
Nothing about the design problem changed. You are using language as a remote control.
With Direct Editing, you can adjust the circle while looking at it beside the other actions. Try a size, compare it, then change it again if needed.
Some visual decisions are easier to make than to describe.
What can you edit directly in Figr?
Direct Editing works best when you can point to a specific element and either know the change already or find the right value faster visually.
Change
When Direct Editing helps
Text
You already know the replacement
Width and height
You want to judge the size in context
Padding and spacing
You know which space needs work
Colour
You want to inspect or choose the intended value
Typography
You need to check or change font, size, weight, or line height
Alignment
An element needs to line up with nearby content
Borders and radius
The visual treatment needs a precise correction
The goal is not to turn every design decision into a property value.
It is to stop turning every property change into another prompt.
How do you edit an almost-finished AI-generated design?
Consider a card screen that already works.
It includes:
- a sample balance
- the card itself
- Add money and Card details actions
- an Unfreeze card action
- a notice below the action row
The flow does not need another redesign.
It needs a few precise changes.
Element
Change
Unfreeze card circle
Adjust its size
Action colour
Check it against the attached design system
Sample balance
Change the displayed text
Action row
Tighten the space above the notice
Four small changes.
One existing screen.
Inspect the element before changing it
Enter Edit mode and select the Unfreeze card action.
Direct Editing shows the properties behind the selected element.
Instead of asking:
Does this action look too big?
you can ask:
Which part is too big?
The circular background?
The icon?
The spacing around the action?
Those are different changes.
For this screen, you may want to resize the circle while keeping the icon unchanged.
Selecting the element makes that target much clearer than trying to explain it in a prompt.
The same approach works for text. Select a label and inspect its font, size, weight, line height, colour, and alignment before changing it.
How do you resize an AI-generated UI element without another prompt?
Change the Unfreeze card circle while looking at the other actions beside it.
Try a smaller size.
Then compare it with Add money and Card details.
If it went too far, adjust it again.
You do not need to decide the perfect value before touching the design.
The preview gives you feedback while you make the visual choice.
A prompt asks you to describe the result first.
Direct Editing lets you work toward that result on the design.
How do you keep Direct Editing consistent with your design system?
A control can look correct and still use the wrong value.
Colour makes this easy to miss.
The Unfreeze card action may look like it uses your product's green. But “looks green enough” does not tell you whether it uses the value your design system defines for that action.
Select the element and inspect the colour.
If the intended value already exists in the attached design system, choose that value instead of trying to match it by eye.
The same principle applies to spacing, typography, and other values.
This is why design system consistency goes beyond visual similarity. The values behind the interface matter too.
Can you use a value outside the design system?
Yes.
Direct Editing does not turn your design system into a hard constraint.
Sometimes the design genuinely needs an exception. In that case, you can use a custom value.
Figr flags the off-system choice instead of blocking it.
The important difference is intent.
There is a gap between:
This looks close enough.
and:
I know this sits outside the system, and I want it here.
Looking right and being on-system are different checks.
How do you make exact text changes without prompting?
Now move to the sample balance.
You already know what the displayed text should say.
There is no copy problem for the agent to solve.
Select the text and replace it directly.
A useful question here is:
Is there still a design decision to make?
If the answer is no, direct editing is usually the shorter route.
The same applies to:
- correcting a label
- changing a number
- renaming a module
- fixing a typo
- replacing known button copy
You should not need to explain a replacement you have already chosen.
How do you edit the exact spacing you mean?
Next, look at the gap below the action row and above the notice.
You know it needs tightening.
A prompt could say:
Reduce the space below the action row.
That is already more precise than “fix the spacing.”
Still, Direct Editing can be more precise.
Select the relevant part of the layout. Inspect the spacing. Then adjust the gap while looking at both groups.
The actions should still feel like one group. At the same time, the notice should feel connected without becoming crowded.
For the visual principles behind this, see Figr's guide to UI design principles.
The practical benefit is simple:
You change the space you mean instead of explaining where it is.
Does Direct Editing replace prompting?
No.
Direct Editing works because it does not force every design problem through the same input.
Suppose the notice below the card is difficult to scan.
You know the content needs work, but you do not know the best rewrite yet.
That is a good prompt.
For example:
Make this notice easier to scan while keeping the important payment caveat.
Now the agent has something useful to work out.
Compare that with changing the circle size.
There, you do not need the agent to invent a solution. You need to see which size looks right.
What you know
Example
What happens before you press Apply?
Your changes appear in the preview while you work.
You can therefore try several changes before committing them.
On the card screen, you might:
- resize the Unfreeze card circle
- check its colour against the design system
- update the balance text
- tighten the space below the action row
Then look at the whole screen again.
Maybe the circle needs one more adjustment.
Change it.
You do not need to send every experiment to the agent separately.
Once the set looks right, press Apply.
The distinction is useful:
Preview is where you settle the design. Apply is where you ask Figr to update the prototype.
What happens when you press Apply?
Pressing Apply does not remove Figr's agent from the workflow.
Your edits tell Figr what you want changed.
The agent then applies those changes to the prototype.
This matters because the element you see is part of something larger.
It may use a component from your design system. It sits inside an existing layout. The prototype may already follow a particular codebase and coding framework.
Direct Editing gives you control over the intended visual result without separating that result from the product around it.
From the user's side, the model is simple:
You decide the exact change on the design. Figr's agent applies it to the prototype.
After Apply finishes, review the updated prototype.
If something still needs adjustment, edit that element again. If the next problem needs more thought, prompt it instead.
Does Direct Editing still use Figr's product, design-system, and code context?
Yes.
Direct Editing is another way to work inside the same Figr workflow.
It does not move the prototype into a disconnected visual editor.
If Figr already has your:
- existing product context
- design system
- product rules
- codebase context
- coding framework
That context remains available when the agent works on the prototype.
The prototype can continue following your design language.
The agent can continue working with your attached design system.
Where code context is available, Figr can continue writing the prototype around the codebase and framework behind the work.
This is worth calling out because Direct Editing does not replace Figr's existing capabilities. It works alongside them.
You can still use Figr to understand your existing product, follow its design system, reason through product context, and create prototypes that fit the codebase and framework you already use.
Direct Editing adds a more precise way to finish the visual details once the prototype exists.
That matters because a button is not just a rectangle with a colour and width.
It belongs to a product.
That is the broader idea behind product-aware design: start from the product you already have instead of treating every screen like a blank canvas.
What can Direct Editing not do?
Direct Editing is built for precise changes to an existing prototype.
It does not replace every design task.
It works well for text, dimensions, spacing, colour, typography, alignment, and other visual properties that the editor exposes.
However, it does not automatically solve an unanswered UX question.
If the team has not decided what happens after someone clicks the Unfreeze card, resizing the control will not answer that.
Likewise, if the entire card experience uses the wrong hierarchy, editing a few properties will not fix the direction.
If the flow needs another state, someone still needs to decide what that state should do.
Not every possible design change appears as a direct control either.
When the editor does not expose what you need, or the change needs interpretation, use an element-level prompt.
Direct Editing is for precision. The agent is still there for reasoning.
Are Direct Editing changes applied instantly?
No. You see the changes in the preview while you work.
The agent still needs to apply them to the prototype after you press Apply.
That distinction matters.
Direct Editing is not AI removed from the loop.
Instead, it gives you a more exact way to tell the agent what the final result should be.
You should also review the prototype after Apply.
The feature makes your intent clearer. It does not claim that every agent-applied edit will always land perfectly without review.
How does Direct Editing help with developer handoff?
Small unfinished details often survive longer than they should.
The screen looks nearly ready.
Then the developer gets a message:
Can you make the circle a little smaller?
Use our actual green here.
Tighten this gap.
Those are still design decisions.
Direct Editing lets the team settle more of them before the design leaves Figr.
After Apply, return to the same card screen.
Check the circle, text, system colour, and spacing. Then review the broader interaction and any states that matter.
For more on that part of the work, see Figr's guide to edge cases before development.
The goal is a cleaner design-to-developer handoff, with fewer visual decisions left for engineering to reconstruct.
Direct Editing does not replace handoff.
It helps you hand developers work that needs less cleanup after it gets there.
Frequently asked questions about Direct Editing
What is Direct Editing in Figr?
Direct Editing lets you select an element inside a Figr prototype, inspect its properties, and make precise changes to text, size, colour, spacing, typography, and layout while looking at the design.
Does Direct Editing replace prompting?
No. Use Direct Editing when you already know the change or can find the right value faster visually. Use a prompt when you still want Figr to help decide what the change should be.
Are Direct Editing changes applied immediately?
No. You see the changes in the preview while you work. They become part of the prototype after you press Apply and the agent applies them.
Does Direct Editing bypass the agent?
No. The agent remains part of the workflow. Direct Editing gives it a more precise instruction based on the changes you made visually.
Does Direct Editing automatically keep every edit on the design system?
No. You can choose values from your attached design system, but you can also deliberately choose a custom value. Figr makes that distinction visible.
Can I use Direct Editing for a full redesign?
That is not its strongest use. Direct Editing works best for precise changes to a direction you already want to keep. Use a broader prompt when the hierarchy, interaction, flow, or overall UX needs to change.
Can Direct Editing solve missing product states or edge cases?
Not by itself. It can help you edit a state once you know what should be there. If the state itself has not been designed, or the product rule is unclear, that still needs UX reasoning.
Can every element be edited in every possible way?
No. Direct Editing exposes a set of element-level controls. If the change you need is not available directly, use an element-level prompt instead.
Will every edit be applied perfectly?
No. Figr's agent still applies the edit to the prototype, so you should review the result after applying. Direct Editing makes your intended change more precise. It does not remove the need to check the outcome.
Does Direct Editing remove the need for design review before handoff?
No. It helps you resolve known visual changes faster. You should still review the interaction, relevant states, design-system choices, and overall UX before handing the work to developers.