GadgetBond

  • Latest
  • How-to
  • Tech
    • AI
    • Amazon
    • Apple
    • CES
    • Computing
    • Creators
    • Google
    • Meta
    • Microsoft
    • Mobile
    • Samsung
    • Security
    • Xbox
  • Transportation
    • Audi
    • BMW
    • Cadillac
    • E-Bike
    • Ferrari
    • Ford
    • Honda Prelude
    • Lamborghini
    • McLaren W1
    • Mercedes
    • Porsche
    • Rivian
    • Tesla
  • Culture
    • Apple TV
    • Disney
    • Gaming
    • Hulu
    • Marvel
    • HBO Max
    • Netflix
    • Paramount
    • SHOWTIME
    • Star Wars
    • Streaming
Add GadgetBond as a preferred source to see more of our stories on Google.
Font ResizerAa
GadgetBondGadgetBond
  • Latest
  • Tech
  • AI
  • Deals
  • How-to
  • Apps
  • Mobile
  • Gaming
  • Streaming
  • Transportation
Search
  • Latest
  • Deals
  • How-to
  • Tech
    • Amazon
    • Apple
    • CES
    • Computing
    • Creators
    • Google
    • Meta
    • Microsoft
    • Mobile
    • Samsung
    • Security
    • Xbox
  • AI
    • Anthropic
    • ChatGPT
    • ChatGPT Atlas
    • Gemini AI (formerly Bard)
    • Google DeepMind
    • Grok AI
    • Meta AI
    • Microsoft Copilot
    • OpenAI
    • Perplexity
    • xAI
  • Transportation
    • Audi
    • BMW
    • Cadillac
    • E-Bike
    • Ferrari
    • Ford
    • Honda Prelude
    • Lamborghini
    • McLaren W1
    • Mercedes
    • Porsche
    • Rivian
    • Tesla
  • Culture
    • Apple TV
    • Disney
    • Gaming
    • Hulu
    • Marvel
    • HBO Max
    • Netflix
    • Paramount
    • SHOWTIME
    • Star Wars
    • Streaming
Follow US
AICreatorsTech

Figma Make rolls out local code editing for real-world apps

By
Shubham Sawarkar
Shubham Sawarkar's avatar
ByShubham Sawarkar
Editor-in-Chief
I’m a tech enthusiast who loves exploring gadgets, trends, and innovations. With certifications in CISCO Routing & Switching and Windows Server Administration, I bring a sharp...
Follow:
- Editor-in-Chief
May 29, 2026, 9:00 AM EDT
Share
We may get a commission from retail offers. Learn more
Screenshot of a Figma design editor interface with a selected event card component highlighted in blue. A floating AI prompt box overlays the design, containing the instruction “Add an icon for attendees.” The interface shows event details including attendee count, duration, date, time, and location, while the prompt box includes attachment, microphone, and submit controls, illustrating AI-assisted design editing within a visual design tool.
Image: Figma
SHARE

Figma is turning a quiet experiment into a pretty loud statement: your local codebase is now invited into Figma Make. And that simple shift – from “AI playground in the cloud” to “AI that edits the code running on your machine” – could end up changing how design and engineering teams actually work day to day.

For anyone who has been watching the design-to-code space over the last couple of years, Figma Make already felt like a glimpse of the future. Launched as a prompt-to-app tool, it let you describe an interface in plain language, attach visual references, and get back a functional prototype backed by real code. Now Figma is going a step further: instead of generating greenfield projects that live in a sandbox, Make can connect to your existing repository, run your app locally from the Figma desktop beta, and directly edit the production UI code driving that live preview.

That’s a big elevation from “toy” to “tool.”

The core idea behind this update is surprisingly straightforward: Make becomes another client of your dev environment. Inside the Figma desktop beta, you can create a Make file, point it to a local folder or clone a GitHub repo, and Figma will wire things up so your app runs inside the Make canvas. Behind the scenes, Make drops configuration into a .figma/make folder, installs dependencies, starts your dev server, and hooks into the preview. Instead of asking AI to hallucinate new code from scratch, you’re asking it to read and modify the code that already exists in your project.

From there, Figma layers a new interaction model on top of traditional coding. You select an element in the live app preview and tweak properties—layout, spacing, colors, fonts, sizing—in a side panel, as if you were editing a design file. Make’s agent then goes off to find the relevant React component, CSS, Tailwind class, or layout logic in your codebase and edits it so the UI and preview reflect your change. It’s not a detached WYSIWYG abstraction that writes inline styles; it’s intended to be real, structured edits to your own code.

Where it gets more interesting is the way Figma mixes visual editing, annotation, and prompting. Simple property changes are point-and-click. For behavior or more complex UI updates, you can drop annotations directly onto the interface, describing an interaction, animation, or multi-element change in natural language. Those annotations act as rich context: Make knows which parts of the DOM or component tree you’re talking about, and can bundle several annotations into a single “transaction” to apply across multiple components. And if you prefer the classic AI workflow, you can still just type a prompt in the Make chat telling it what you want and let it propose code changes.

In practice, this feels like Figma is trying to carve out middle ground between rigid “no-code” builders and raw code editors. You don’t lose the abstraction and speed of design tools, but you’re not trapped behind an export layer that engineers then have to throw away. The edits happen in the same repository the team uses, with version control, branches, and pull requests. Once Make has applied its changes, you can spin up a branch and open a PR from within Figma, then let your standard review process take over.

That workflow matters more than any individual AI feature. It’s Figma signaling that AI-powered design tools shouldn’t stop at prototype exports; they should sit inside the real development loop.

To understand the significance of this, it helps to rewind to what Figma Make was originally pitched as. When Figma announced Make, it framed it as a “prompt-to-app” capability that could generate high-fidelity, interactive prototypes from plain English descriptions and visual references. You’d describe your product idea, target device, core features, and design style, optionally attach screenshots or wireframes, then select a model like GPT-4 or Claude to generate production-style code and a live preview. It was perfect for idea testing and early exploration, especially for people who weren’t comfortable writing code. But there was always an awkward handoff moment: how do you get from AI-generated playground code to the messy, opinionated codebase your team actually maintains?

Developers quickly started hacking around this gap. Community guides popped up showing how to download Make projects, wire them into a Vite-based React setup, apply config patches, and run the result locally. Some folks even built VS Code extensions and scaffolding repos to streamline pulling Make-generated code into local projects. That grassroots energy was a signal: people wanted Make to live closer to their real development workflows, not just in a browser preview silo.

“Make on your local code” is Figma’s answer to that demand, but with a much more integrated approach. Rather than exporting and importing zips manually, you connect the repo directly—either by pointing to a folder on disk or cloning from GitHub via the Make interface. Make adds its configuration, initializes Git if needed, and from that point on you’re working inside a proper version-controlled project. It’s closer to an AI-enhanced design client for your existing app than a one-off generator.

What makes this especially interesting for design and engineering teams is the potential shift in who can safely touch the code. Historically, most designers in a product team wouldn’t dare open the app repo, let alone push changes. Even “design systems” work often ends at a component spec, with engineers implementing the pixel-perfect details later. With Make plugged into local code, the pitch is that designers, PMs, or other non-traditional coders can make constrained, reversible edits to UI code while staying in a familiar Figma environment.

Figma is careful not to present this as a free-for-all. Code editing in Make is restricted to certain seat types on paid plans—Full seats can edit, Full or Dev seats can view and download code—reinforcing that this still lives inside the professional stack rather than as a casual toy for anyone with a free login. And because the whole thing is Git-aware, teams can keep using branches, reviews, and approvals as guardrails.

From a technical perspective, Figma is also quietly acknowledging that “AI editor” doesn’t mean “text box that spits out code.” There’s a full code editor view in Make where you can inspect and manually tweak the underlying files. You can format the code with a quick keyboard shortcut, keep an eye on what the agent changed, and stay grounded in reality. That’s important if you don’t want AI edits to become mysterious black boxes that break your build or silently introduce regressions.

If you zoom out to the broader AI tooling landscape, Make’s local code integration puts Figma into more direct territory with tools like v0, Bolt, Lovable, and the growing crop of AI-native app builders. Many of those tools excel at greenfield generation—type a prompt, get an app—but they often sit apart from existing repos, production infrastructure, or team workflows. Figma’s bet is that existing teams don’t want a separate AI sandbox; they want AI that plays nicely with their current stack, and they want it in the same surface where their design work already lives.

It’s also part of a larger strategy. Over the last two years, Figma has been rolling out a wider slate of AI features—image editing, resolution boosting, smarter prototyping—positioned as ways to “unblock creativity” and speed up the product development cycle. When Figma announced Make’s general availability in 2025, it explicitly linked Make and those AI tools as a suite, not a one-off experiment. Bringing Make into local code is consistent with that trajectory: AI isn’t an extra button, it’s a core part of how Figma imagines teams will move from idea to implementation.

Of course, this also raises the usual concerns that come with AI touching production code. How readable are the edits Make produces? Do they respect team conventions and architecture decisions? How well does the agent navigate real-world complexity—feature flags, legacy components, bespoke styling systems, or heavily customized build pipelines? Figma’s documentation emphasizes that Make uses contextual prompts, annotations, and the live UI to ground its edits, and that developers remain in the loop through branches and code review. But as with every AI coding assistant, the burden is on teams to treat it as a collaborator, not an autopilot.

For now, the rollout is limited. Figma is offering “Make on your local code” in a beta that runs through the Figma beta desktop app, with early access framed as a testbed to refine the experience. In parallel, Make itself has already exited beta and is generally available across Figma plans with tiered access, so this local code piece is more of an advanced capability than the baseline AI feature. If it lands well, you can imagine it becoming one of the flagship reasons to use Figma for design-to-code workflows, not just for mockups.

For US-based teams, especially those juggling distributed collaboration and tight release cycles, that proposition will sound familiar: fewer handoff docs, more direct edits, tighter loops between design intent and shipping code. The optimistic version of this future is one where designers can safely adjust a layout for a marketing experiment, a PM can prototype a flow in the real app, and an engineer can spend more time on architecture and less time nudging pixels via PRs—all inside a Figma file that doubles as both design canvas and AI-assisted code client.

Whether it plays out that way will depend on how well Make actually handles the messiness of production projects once this beta spreads beyond polished demos. But the direction is clear: Figma doesn’t just want to be where your product looks like it works. It wants to be where your product actually runs, with AI ready to help you change it.


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

Apple rolls out iOS 26.5.1 and macOS 26.5.1 with important fixes

Apple starts age verification in Texas

Apple Intelligence comes back to WWDC with more to prove

Apple teases WWDC 2026 with ‘All systems glow’ and a big Siri reboot incoming

iOS 27 rumored to skip four older iPhone models

Also Read
Abstract black-and-white geometric artwork featuring a symmetrical network of interconnected cell-like shapes arranged within a square composition. Thin white lines form an intricate web resembling cracked glass, biological tissue, or a microscopic cellular structure, layered over a textured mosaic background. The design is mirrored across both vertical and horizontal axes, creating a highly ordered, scientific, and architectural visual pattern against a solid black backdrop.

Anthropic opens Project Glasswing to 150 new global defenders

Promotional graphic showing an AI chat prompt interface against a blue gradient background. The prompt asks: “Use my Function Health lab results to analyze changes in my vitamin D levels over time and build a dashboard showing trends, progress, and how each result compares to optimal ranges.” Tool chips labeled “Computer” and “Function Health” appear below the prompt, alongside an “Orchestrator” label, microphone icon, and send button, illustrating AI-assisted health data analysis and personalized wellness insights.

Perplexity’s health push connects Apple Health, Function labs, and other sources into Computer

Conceptual illustration showing a person seated in an armchair within a dark, dreamlike landscape, watching a glowing upward-trending financial chart projected across the scene. Above the chart floats a transparent sphere containing a computer icon, illuminated by beams of light from above. The image combines elements of technology, artificial intelligence, investing, and market analysis, symbolizing the use of AI-powered tools to monitor trends, research data, and support financial decision-making.

Perplexity’s Main Street AI push arrives with $250 credits per business

Dreamlike digital landscape featuring rolling hills and distant mountains illuminated by dramatic beams of light. Several floating glass spheres hover above the terrain, reflecting the environment, with one larger sphere displaying a computer icon. The scene combines natural scenery with futuristic visual elements, creating a surreal representation of artificial intelligence, personal computing, and technology integrated into an imaginative virtual world.

Perplexity’s AI “Personal Computer” steps onto Windows desktops

Conceptual technology-themed illustration featuring an open book on a desk beneath floating translucent digital panels and a glass sphere containing a computer icon. Blurred light streaks, code-filled interface windows, and layered geometric frames hover above the book against a dark background, symbolizing the intersection of knowledge, artificial intelligence, computing, and digital research. A pen rests beside the book, reinforcing themes of learning, analysis, and human-computer collaboration.

Perplexity Computer now decides what runs local vs cloud

Apple showing off Siri’s updated logo at WWDC 2024.

Siri’s AI reboot could run on NVIDIA chips inside Google Cloud

Apple Arcade Family Feud Pocket trailer

Apple Arcade adds Family Feud Pocket and eight more games

The App Store logo in white, set against a shiny metallic blue background

Apple touts $1.4 trillion in App Store-driven sales

Company Info
  • Homepage
  • Support my work
  • Latest stories
  • Company updates
  • GDB Recommends
  • Daily newsletters
  • About us
  • Contact us
  • Write for us
  • 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.