Figma Make | Properties Panel and Annotations Add Precision

Figma Make is adding more direct visual control to AI-assisted code editing with a new properties panel and canvas annotations. Announced on July 30, 2026, the update lets designers adjust familiar interface properties without describing every change in a prompt, while annotations provide a more precise way to tell the Make agent where interactions, animations, or other behavioral changes should happen.


Figma Make properties panel and annotations for visual code editing

{getToc} $title={Table of Contents}

Figma Make brings visual editing closer to the underlying code


The properties panel brings controls familiar from Figma Design into Make. Designers can select an element in the rendered interface and adjust details such as spacing, typography, layout, opacity, borders, z-index, and other visual properties without translating every small revision into a conversational prompt.


Those edits are not disconnected from the implementation. Make stages the requested adjustments before applying them and then updates the underlying code when the changes are committed. This creates a workflow where visual manipulation and generated code stay connected rather than becoming two separate versions of the same interface.



The properties panel gives designers more direct control


After entering Edit mode, designers can select elements directly from the preview and experiment with values such as padding, margins, font styling, corner treatments, positioning, and other supported properties. Make also exposes the DOM tree as a layer-style view of the code, making it easier to navigate the generated structure and identify specific elements.


Multiple instances of an element can be selected and updated together, which may be useful when refining repeated interface patterns. The panel currently uses color and typography tokens already defined in the codebase, helping direct edits stay closer to the visual system already established in the project.


Annotations connect precise locations with natural-language instructions


Not every interface change can be represented through a visual property field. For interactions and behavior, annotations allow designers to mark specific areas of the rendered interface and attach instructions for the Make agent. Several annotations can be prepared across the same screen and submitted together.


This can make prompts more specific without requiring a designer to describe where every element is located. A marked button could receive instructions for a press effect, while a thumbnail could be annotated with a hover animation or another interaction. The agent receives both the written request and the exact visual context associated with it.


Changes can be reviewed before credits are consumed


Direct edits are staged in the agent chat before they are committed, allowing designers to review or discard adjustments first. Figma notes that this staging process does not consume credits. Credits are used when the changes are applied and Make generates a new version of the file.


The properties panel and annotations are rolling out in Figma Make, but there is an important compatibility detail for existing work. The new edit tool, panel, and annotations are available only in new Make files. Previously created Make projects continue to use the earlier editing interface.


IMPORTANT: The new properties panel and annotations work only with new Figma Make files. Applying changes uses AI credits, although staged edits can be reviewed before they are committed.{alertWarning}

Daisuki's Take: What This Means for Web Designers


The interesting shift is that Figma Make is reducing the distance between prompting and traditional visual editing. Designers do not need to choose between manipulating interface properties manually and asking an agent to modify code; both approaches can now participate in the same workflow.


For web and UI designers, this can make AI-generated interfaces easier to refine after the initial concept. Precise spacing, typography, repeated elements, and small layout adjustments are often faster to judge visually, while annotations remain useful for changes that involve behavior or interactions.


We would still review the resulting code, responsiveness, accessibility, and interaction behavior before production. The value of this update is not removing that validation step, but giving designers a more familiar and precise way to steer generated interfaces before those checks begin.



Sources and Recommended Links