Figma announced new visual editing features in its Make editor, adding a properties panel and annotations to let designers tweak code directly with visual controls.
Figma has expanded its Make editor with a new properties panel and annotation system, giving designers the ability to adjust generated code through visual controls.
What’s new in the Make editor
The updated Make editor now features a sidebar properties panel that surfaces editable attributes for each component, such as dimensions, colors, and typography. Designers can click a UI element and instantly see the corresponding code values, then modify them without leaving the visual canvas.
Annotations appear directly on the design surface, highlighting code snippets and linking them to their visual counterparts. This makes it easier to understand how design decisions translate into code, and to fine‑tune the output in real time.
How the properties panel works
When a component is selected, the panel lists all exposed properties in a clean, scrollable layout. Each property can be edited via sliders, color pickers, or text fields, and changes are reflected instantly in the underlying code. The panel also supports grouping, allowing complex components to expose nested settings without overwhelming the user.
Benefits of annotations
Annotations serve as visual markers that point to specific lines of generated code. Hovering over an annotation highlights the related code block, while clicking opens a mini‑editor where the code can be edited directly. This bidirectional link reduces the back‑and‑forth between design and code, streamlining the workflow for design‑to‑development handoffs.
- Faster iteration on design‑code sync
- Reduced context switching for developers
- Clearer documentation of design intent
The features are currently available to all Make users, with plans to extend them based on community feedback. Figma emphasizes that the goal is to keep the visual design experience intuitive while offering deeper code control for advanced users.