GadgetBond

  • Latest
  • How-to
  • Tech
    • AI
      • Apple Intelligence
      • Gemini AI
      • Google DeepMind
      • Anthropic
      • Claude AI
      • Claude Code
      • OpenAI
      • ChatGPT
      • Codex
      • Perplexity
      • SpaceXAI
      • Grok AI
      • Microsoft Copilot
      • Meta AI
    • Amazon
    • Apple
    • CES
    • Computing
    • Creators
    • Google
    • Meta
    • Microsoft
    • Mobile
    • NVIDIA
    • Samsung
    • Security
    • Smart Home
    • Sony
    • Xbox
    • YouTube
  • Transportation
    • Audi
    • BMW
    • Cadillac
    • E-Bike
    • Ferrari
    • Ford
    • Honda Prelude
    • Lamborghini
    • McLaren
    • Mercedes
    • Porsche
    • Rivian
    • Tesla
  • Culture
    • Gaming
    • Streaming
    • Apple TV
    • Disney
    • Hulu
    • Marvel
    • HBO Max
    • Netflix
    • Paramount
    • SHOWTIME
    • Spotify
    • Star Wars
Add GadgetBond as a preferred source to see more of our stories on Google.
Font ResizerAa
GadgetBondGadgetBond
  • Latest
  • Tech
  • AI
  • Deals
  • How-to
  • Apps
  • Computing
  • Gaming
  • Mobile
  • Streaming
  • Transportation
Search
  • Latest
  • Deals
  • Buying Guide
  • How-to
  • Features
  • Tech
    • Amazon
    • Apple
    • CES
    • Computing
    • Creators
    • Google
    • Meta
    • Microsoft
    • Mobile
    • NVIDIA
    • Samsung
    • Security
    • Smart Home
    • Sony
    • Xbox
    • YouTube
  • AI
    • Apple Intelligence
    • Gemini AI
    • Google DeepMind
    • Anthropic
    • Claude AI
    • Claude Code
    • OpenAI
    • ChatGPT
    • Codex
    • Perplexity
    • SpaceXAI
    • Grok AI
    • Microsoft Copilot
    • Meta AI
  • Transportation
    • Audi
    • BMW
    • Cadillac
    • E-Bike
    • Ferrari
    • Ford
    • Lamborghini
    • McLaren
    • Mercedes
    • Porsche
    • Rivian
    • Tesla
  • Culture
    • Gaming
    • Streaming
    • Apple TV
    • Disney
    • Hulu
    • Marvel
    • HBO Max
    • Netflix
    • Paramount
    • SHOWTIME
    • Spotify
    • Star Wars
Follow US
AITech

Figma Make adds a properties panel and canvas annotations

Figma Make adds a design-like properties panel and annotations so teams can adjust spacing, typography, and interactions directly on the canvas before committing code changes.

By
Shubham Sawarkar
Shubham Sawarkar's avatar
ByShubham Sawarkar
Editor-in-Chief
Shubham Sawarkar is a technology journalist at GadgetBond, covering Apple, AI, consumer technology, software, gadgets, and product launches. His work explores emerging technologies, industry developments, product...
Follow:
- Editor-in-Chief
Aug 2, 2026, 12:17 PM EDT
Share
GadgetBond is reader-supported. We may earn a commission from purchases through our links. Learn more
Side-by-side Figma Make interface examples showing a properties panel on the left and canvas annotations on the right, with numbered callouts highlighting editable UI areas.
Image: Figma
SHARE

Figma Make is taking a meaningful step away from the familiar “describe it and hope” model of AI-assisted coding. With a new properties panel and canvas-based annotations, Figma is giving designers and developers more direct ways to shape generated interfaces without having to turn every small adjustment into a carefully worded prompt.

The update, announced July 30, brings a more recognizably Figma-like editing experience to Make, the company’s AI-driven environment for creating and modifying working code. Instead of asking an agent to “make this card have more padding” or “move this button above the fold,” users can select elements and adjust visual properties directly. For work that needs more behavioral context, they can pin annotations onto specific areas of the interface and tell the agent what should happen there.

That may sound like a modest UI update. In practice, it speaks to one of the central problems with AI coding tools: prompting is useful for getting from zero to one, but it can become awkward once a project needs the kind of small, iterative decisions that make an interface feel finished.

A product designer may know immediately that a section needs 24 pixels of spacing rather than 16, or that a headline needs a little less line height. Translating those instincts into a text prompt is not difficult, exactly, but it is slower than simply changing the value. And when the requested update is tied to one particular component on a busy page, ambiguity becomes its own source of friction.

Figma’s answer is the new properties panel. It brings familiar design controls into Make, including options for spacing, typography, layout, opacity, borders, positioning, z-index, and other visual details. Users can also inspect a full DOM tree, select multiple instances of an element, and edit them together rather than changing each copy individually.

The important distinction is that these are not merely cosmetic overlays on top of an AI prototype. Figma says the edits are staged in Make’s chat panel for review, then applied to the underlying code once a user commits them. In other words, the visual adjustment is intended to change the product itself, not create another disconnected design representation of it.

That matters because design-to-code workflows have historically involved a handoff boundary. Designers refine screens in one place. Developers rebuild and interpret those screens somewhere else. Even with shared component libraries and Dev Mode, the gap can leave room for mismatched spacing, improvised styles, and a long tail of “almost like the mockup” compromises.

Figma Make is clearly trying to make that boundary less rigid. The company describes the properties panel as a form of direct manipulation: users interact with the interface on screen, while the system handles the necessary code updates behind it. The idea is not that designers must become developers, or that developers stop caring about code. It is that certain changes should not require a translation layer at all.

The second half of the update, annotations, is arguably more interesting. Visual controls are perfect for well-defined design attributes such as a font weight or border radius. But software behavior rarely fits into a dropdown menu.

A designer might want a thumbnail to enlarge slightly on hover, a button to fade into view after 300 milliseconds, or a navigation overlay to appear after someone taps a menu icon. Those requests involve interactions, timing, states, and intent. They need language – but they also need a precise pointer to the relevant part of the page.

Annotations combine both. In Figma Make, users can mark one or more locations on the canvas, add a written instruction, and send that localized context to the agent. Figma’s examples include hover animations, delayed fades, and tap effects, with the agent using the marked-up areas to understand what code should change.

This is a more natural mode of communication than asking an agent to infer which “image card,” “button,” or “menu” a person means from a text-only prompt. Anyone who has worked on a dense product screen knows the issue: there may be a dozen cards, four similar buttons, and multiple responsive variations of the same component. A pin on the canvas reduces the chances that an AI agent updates the wrong thing – or spends time looking for it.

The change also has a practical implication for Figma’s usage-based AI model. The company says direct manipulation gives Make a more precise target than a conventional text prompt, which can reduce the amount of searching and guesswork required from the model. Individual edits are staged without consuming credits, while credits are used when the staged changes are applied and the file is updated as a new version.

That approach could make Make feel less risky for teams experimenting with details. Users can try a few layout options, adjust values, review the resulting list of changes, and discard anything that does not work before committing. It is a workflow that resembles ordinary visual design iteration more than it resembles sending a series of expensive, one-shot instructions to an AI assistant.

There are limits, at least for now. The properties panel uses the color and typography tokens already present in a user’s codebase, rather than pulling directly from Figma Design components. Figma says Code Connect support is coming, which should allow Make to link those design components and code more closely.

The rollout also comes with an important caveat for existing projects: the new properties panel works only with new Make designs. Older designs will continue using the previous editing tool. Both the properties panel and annotations are rolling out across all Figma Make seats and plans, although using them consumes Make credits when changes are applied.

Figma has been steadily expanding Make beyond an AI playground for generating quick prototypes. In recent months, it has added support for local code, emphasized contextual prompting and collaboration, and continued positioning Make as a bridge between visual product work and production-minded development.

The properties panel and annotations fit neatly into that strategy. They acknowledge that building software is not just a matter of producing a first draft from a prompt. Most of the work happens in the next hundred small decisions: tightening the spacing, fixing a hierarchy problem, changing an interaction, testing a state, and making sure a detail feels right.

AI can generate an interface quickly. The harder question is how people retain control once that interface exists. Figma’s latest Make update is a fairly direct answer: let people point at the thing they mean, change what they can see, and use language only when language is actually the best tool for the job.


Discover more from GadgetBond

Subscribe to get the latest posts sent to your email.

Topic:Figma
Leave a Comment

Leave a ReplyCancel reply

Most Popular

How to block Siri AI and Google Gemini from accessing your sensitive app data
YouTube Playables adds six new games focused on learning, music, and mindfulness
NordVPN Black Friday deal cuts Complete plan by 78%
Limiting AI fair use could threaten internet freedoms, EFF says
LG’s 2026 G6 OLED TV gets its first big price break

Also Read

New MacBook Pro lineup with PROLED XDR displays, showing two laptops with matching abstract display wallpapers.

You’re getting a $100 gift card when buying Apple’s new MacBook Pro with PROLED XDR display

White Apple logo and the word "Developer" centered on a solid black background.

Apple cuts standard App Store commission to 26% in Taiwan

ExpressVPN Halloween banner featuring a purple moonlit sky, silhouetted pine trees, flying bats, and the ExpressVPN logo.

Save 80% on ExpressVPN with this 28-month deal

Flight check-in form showing Chrome autofill dropdown with "Suggested by Gemini · Gmail" booking code 123456 over a beach background.

Google Chrome adds enhanced autofill to pull order and flight details from Gmail

Mockup showing Google Search and Gemini app screens connected by an icon, illustrating dinner reservation and meditation app integrations.

Google launches Connected Apps Platform, letting developers build once for Search and Gemini

A man wearing XREAL AURA smart glasses at a wooden desk with multiple floating virtual app windows, including "Project Inkwell" and "ARCHVIEW DESIGN REVIEW."

Google and XREAL launch AURA as the first wired Android XR glasses

The glowing Apple logo on the back of the MacBook Pro with PROLED XDR Display, illuminated against a dark background.

The Apple logo glows again: A MacBook icon returns after 10 years

MacBook Pro touchscreen in a nighttime setting, showing a woman interacting with a laptop while seated beside a city skyline.

Apple adds a touchscreen and tandem OLED display to the MacBook Pro

Company Info
  • Homepage
  • Support my work
  • Latest stories
  • Company updates
  • GDB Recommends
  • Daily newsletters
  • About us
  • Contact us
  • Write for GadgetBond
  • Editorial guidelines
Legal
  • Privacy Policy
  • Cookies Policy
  • Terms & Conditions
  • DMCA
  • Disclaimer
  • Accessibility Policy
  • Security Policy
  • Do Not Sell or Share My Personal Information
Socials
Follow US

Disclosure: We love the products we feature and hope you’ll love them too. If you purchase through a link on our site, we may receive compensation at no additional cost to you. Read our ethics statement. Please note that pricing and availability are subject to change.

Copyright © 2026 GadgetBond. All Rights Reserved. Use of this site constitutes acceptance of our Terms of Use and Privacy Policy | Do Not Sell/Share My Personal Information.