Figma Make brings visual controls closer to the code

Figma Make now includes a properties panel and annotations for editing generated interfaces with more visual precision. Designers can select an element, adjust familiar layout and styling controls, or mark specific areas with contextual instructions for the agent, reducing the need to describe every change through a general text prompt.

{getToc} $title={Table of Contents}

Figma Make brings visual controls closer to the code

The new properties panel brings controls commonly used in Figma Design into the Make editor. After selecting an element, creators can adjust spacing, typography, layout, opacity, borders, positioning, corner radius, and other visual properties without rewriting the complete prompt or editing the underlying code manually.

Elements can also be reordered directly, while a DOM tree provides a layer-like view of the code structure. Designers can select every instance of the same element and update them together, which is useful when repeated buttons, cards, labels, or navigation items need consistent treatment across an interface.

{getCard} $type={post} $title={More useful reading}

Annotations give the agent a precise place to work

Annotations support changes that cannot be handled through standard visual properties alone. A creator can mark one or several elements on the canvas, describe the intended behavior, and give the Make agent the exact context needed to update the corresponding parts of the project.

This is especially useful for interactions and motion. Instead of asking the agent to find a button or thumbnail through a broad prompt, designers can point directly to it and request a hover animation, delayed entrance, press effect, navigation overlay, or another behavior tied to that specific element.

Direct edits can be reviewed before they consume credits

Changes made through direct manipulation are first collected in the chat panel. At this stage, creators can review the pending edits, compare different values, remove unwanted adjustments, or continue refining the interface without immediately committing those changes to the project.

Credits are consumed when the edits are applied and Make updates the file to a new version. Because the selected element gives the agent a precise target, these direct changes can require fewer tokens and finish faster than explaining the same visual adjustment through a complete text prompt.

The rollout includes an important compatibility limit

The properties panel and annotations are rolling out across all seats and plans in Figma Make. Both features consume credits when their changes are applied, so teams should still review pending edits and combine related adjustments before committing unnecessary versions.

The properties panel currently works only with new Make designs. Projects created before the rollout continue to use the previous editing tool, which means an existing file may not display the same controls even when the account already has access to the update.

IMPORTANT: The new properties panel is limited to newly created Figma Make designs. Existing designs continue to use the previous editing experience.{alertWarning}

Daisuki's Take: What This Means for Designers

The strongest part of this update is the separation between visual adjustments and behavior-based instructions. Designers can use direct controls for measurable details such as spacing or typography, then reserve annotations for interactions that need more context and creative intent.

That combination can make AI-assisted interface work feel less like repeated prompt correction. Pointing to the actual element removes ambiguity, while the review stage gives creators a chance to inspect the requested changes before they affect the code and consume credits.

We would still test the final interface across screen sizes and interaction states. Faster editing does not automatically guarantee responsive behavior, accessibility, consistent components, or clear motion, so the generated code and visual result should remain part of the same design review.

{getCard} $type={custom} $title={What's New?} $info={Find more AI design news} $icon={}

Sources and Recommended Links

• A Properties Panel and Annotations, Now in Figma Make | Figma Official Blog