A Properties Panel and Annotations, Now in Figma Make | Figma Blog (opens in new tab)

Figma Make now combines visual editing with code-aware prompting through a properties panel and annotations. The properties panel handles precise visual changes, while annotations let users describe interactions and animations in context. Together, these tools reduce prompting guesswork, use fewer credits, and help ensure visual edits are reflected in the underlying code.

Visual Editing with the Properties Panel

• Users can select elements and adjust spacing, typography, layout, opacity, z-index, borders, corner radii, and other properties.
• A DOM tree acts like a layers panel, making it easier to find and select elements in the code.
• Multiple instances of an element can be updated simultaneously.
• Edits use existing color and typography tokens from the codebase.
• Each change is staged in the prompt box for review or disposal before being applied.
• Applying the changes updates the underlying code and creates a new file version.
• Future Code Connect integration will link Make elements to Figma Design components.

Contextual Changes with Annotations

• Users can mark one or more areas directly on the canvas and describe the desired change.
• Annotations support behavior beyond basic styling, such as:
  • Hover zoom effects
  • Delayed button fades
  • Press effects
  • Full-screen navigation overlays
• The agent receives the exact location and context of the selected elements, making prompts more specific.
• This approach supports flexible natural-language instructions while avoiding the ambiguity of describing element locations manually.

Credit Savings and Workflow

• Direct manipulation gives the agent a precise target and requires fewer tokens than a text-only prompt.
• Edits are staged without consuming credits.
• Credits are used only when the user applies the changes.
• The workflow keeps design experimentation, review, prompting, and code updates in one continuous process.

Figma’s broader goal is to make code editing feel more like visual design. The same properties-and-annotation workflow is planned for code layers on the Figma canvas, further connecting design exploration with production code.