Back to Flash News

Figma Dev Mode Enters Codex Plugin

Figma announced that Dev Mode is now integrated into Codex, accessible through the Figma plugin. This move connects the developer-focused inspection and annotation view to OpenAI's coding agent, rather than being limited to the canvas or VS Code extension.

Figma's help documentation states that after installing Figma from the plugin bar in the upper left corner of the Codex application and completing authorization, it can be used; on the desktop, MCP services can be enabled in Dev Mode, allowing the agent to read components, variables, layouts, FigJam, and Make resources, generate code based on the selected canvas, and align real components using Code Connect. Conversely, runnable interfaces can be written back to the canvas, turning them into editable layers. In February, both parties made MCP bidirectional: design into code, live interfaces into Figma.

Dev Mode itself has been in testing from 2023 and will become official in 2024, offering inspection, multilingual code snippets, version comparison, readiness status, and integrations with Jira, Storybook, and GitHub, requiring paid plans for Full or Dev seats. The official MCP directory lists Codex alongside Cursor, Claude, and VS Code. During DevDay, OpenAI introduced native applications and plugins into ChatGPT conversations, and this Figma post integrates the inspection view into the same agent workflow.

There is another plugin with the same name in the community, which is not the same product as OpenAI Codex. Figma did not announce new seat prices or usage limits in the short post; existing documentation states that collaborative seats have monthly limits on MCP calls, and deep usage requires Dev or Full seats.

In market mechanics, teams that buy Codex to write front-end code but do not want to lose spacing and variables in design files are the buyers, while the sellers are design systems as agent contexts. Funding still flows through Figma seats and OpenAI coding usage; the beneficiaries are the two platforms aiming to improve the first-pass rate of design to code, while the pressured parties are plugins that only convert screenshots to code and cannot read variables. The event driver is the DevDay plugin position, not a new design editor.

After the inspection view enters the agent, the handover changes from "designers mark it, engineers copy it" to "the agent reads Dev Mode directly." The canvas remains the design authority, the code repository remains the implementation authority, and the middle layer of specifications is consumed by the plugin.

Source: Public Information

ABAB AI Insight

Figma has turned Dev Mode into a read-only operating system for developers and integrated it into another coding agent, acknowledging that implementation is moving away from human editors. In February, MCP addressed that "design can be seen by the model," and today the plugin resolves that "the way to see must be Dev Mode, not screenshots." Code Connect serves as a moat: generating code must align with the real components in the repository, rather than recreating a set of styles. OpenAI is rolling out plugin shelves at DevDay, and Figma is seizing the default position for design systems, similar to how ElevenLabs is competing for voice positions—standing on the bill that enterprises are already paying.

The capital path is seat usage stacking. Figma charges design system rent per person and seat, while Codex charges implementation rent based on agent duration, allowing both charges to occur within the same task. Writing back to the canvas turns the engineer's live interface into a review object for the designer, reducing meetings. The motivation is that if design tools only output images, agents will bypass Figma to directly draw interfaces; it must become a structured context to remain in the generation chain.

Analogous cases include Zeplin being replaced by Dev Mode and GitHub embedding pull request checks into the editor. The industry phase is moving from handover documents to agent-readable specifications for design to code. If Sketch and Adobe do not have the same depth of MCP, they will cede the implementation layer to Figma files already in Codex. VS Code extensions still serve human developers, while plugins serve agents; both will coexist, with budgets leaning towards the agent side.

The structural judgment indicates a reconstruction of the industry chain. The mechanism is that the specification layer receives design system databases from PDFs and annotation plugins, which are then distributed to coding agents by MCP. Reconstruction occurs because agents will not click on layers but will adjust interfaces. Whoever controls the true source of variables and components controls the default appearance of front-end generation.

ABAB News · Cognitive Laws

  1. Agents do not look at annotated images, only read structured specifications.

  2. For design tools to survive, they must become the context for others' agents.

  3. The default position on the plugin shelf determines who the next round of handover belongs to.