Figma Make: How to Edit Code Through Properties & Annotations
Main chat
A chat for vibe coders: news, guides, live cases, marketplace, and finding executors.
Figma Make: How to Edit Code Through Properties & Annotations
Figma has added two new ways to work with the AI-generated interface to Make: a property bar for accurate visual changes and canvas annotations for tasks that are easier to explain than to twist pens. It's not another prompting regime. The idea is that a designer can point an agent to a specific object, change parameters with familiar controls, and check a set of edits before applying to the code.
The update develops a more practical design-to-code scenario: don’t ask the model to “make the cards a little more compact,” but choose the cards, change the indentation, radius or typography, and see what changes are being prepared.
Properties Panel: Habitual controls over a working interface
In edit mode, Figma Make now outputs a property panel for the selected item. Through it, you can change spacing, typography, layout, opacity, z-index and border style, drag elements and reorder them. For code, this looks like a visual control layer: the designer changes the parameter on the canvas, and Make prepares the appropriate editing of the source code.
Important detail: Make shows the DOM tree. This helps not to guess which layer is responsible for the element in the interface, and choose all the same instances for mass updating. In working with a long page or repeating cards, this is noticeably more useful than a series of similar queries to the model.
Changes do not apply to the code instantly. They are first collected in a chat panel where they can be viewed, left or deleted. Until the changes are applied, they do not spend credits. Once confirmed, Make updates the file and creates a new version. Such staging is important: a visual experiment does not turn into an irreversible change in implementation.
Abstracts: when to describe the behavior, not the value of the property
Not all tasks fit into the panel fields. For interactions, animation and several related elements, Figma added annotations. In "Annotate for Agent" mode, you can mark the area on canvas, write the context and send it to the agent.
For example, instead of the general request “make the interface lively”, you can mark the thumbnail and indicate: when hovering, it increases slightly. Or select a button and ask for a short press effect. The agent receives not only the text, but also the exact address of the change in the interface.
This is a small but fundamental interface change for AI. The less the model has to search for the desired element and guess the boundaries of the problem, the shorter the iteration and the easier it is to verify the result. The abstract here works as a design comment, which immediately becomes a technical task for the code.
Why this is important for handoff
The usual gap between design and code begins after the first prototype. The layout already looks right, but then there is a chain: comment, task, clarification, editing, verification. Figma Make tries to shorten this loop: the designer edits the working interface with the same categories that Figma used to think, and changes reach the code in a controlled form.
This does not negate the design system and code review. On the contrary, the new method is especially useful where there are already rules. Now the panel uses color and typographic tokens defined in the codebase. Figma notes that communication with Figma Design components via Code Connect is still being prepared. So the team still needs to check that quick visual edits don’t bypass component contracts.
How to Try a Real Project
You should not start with the whole product, but with one scenario: a customization screen, directory, form or landing with repeatable blocks. First, choose a visual edit with a clear quality criterion, such as a single vertical rhythm or a compact version of the card. Then check that Make has changed exactly the elements that were selected, and only then apply the set of edits.
Abstracts are best left for tasks where behavior and context are important: hover states, order of appearance, transitions between screens, a rule for several connected blocks. The wording should describe the observed result rather than the intended implementation: “show filter after category selection” is more useful than “add event handler”.
Limitations at start
The Properties Bar only works in new Make designs; previously created files remain on the old editing tool. Both functions spend credits after applying the changes. Therefore, the update does not make the generation free, but gives more control over what the budget is spent on.
The main conclusion for designers is simple: accuracy in AI workflow is increasingly achieved not by a long prompt, but by a good indication interface. The property panel sets the parameters directly, the annotation fixes the intention in the right place, and the staged edits leave the person with the last word before changing the code.
