Figma Connect for WebStorm: Stage One of a Better Design-to-Code Experience

Where time actually goes in design-to-code

Every design implementation starts the same way: find the Figma tab, find the right frame, screenshot it, paste it somewhere, switch back to the terminal. By the time you write the first line of code, you’ve already done five minutes of busywork, and you’ll do it again when you forget a value.

Your AI agent skips that ritual and goes straight to generating code. The problem: it has even less context than you did. It reaches for a custom button when you’re on shadcn/ui, or builds a dialog from scratch instead of using Base UI’s. You fix it in review, or after the designer flags it. Either way, you’re fixing something that didn’t need to happen.

The reason: Figma lives outside the IDE. The spec gets checked once, then abandoned.

Figma Connect closes that gap. It brings your Figma file directly into WebStorm. The design is right there as you build, so you catch mismatches before they reach review.

Pass that context to AI to automate the tedious part of design-to-code. Your agent implements from the actual spec – reaching for the right shadcn/ui component, the correct Base UI primitive, or your internal design tokens – instead of approximating. You get the right component variants and hardcoded values from the get-go instead of having to fix them after the fact.

Figma Connect is supported in WebStorm 2026.2.1. Select any layer from your Figma file, get the full design context straight from the source via Figma MCP, and pass it to the AI chat. Your agent (Junie, Claude, Copilot, Cursor, etc.) or agentic IDE, like Air, generates code that fits your actual codebase, not a generic approximation. Figma Connect requires a one-time setup.

Get started

Work through a screen without leaving the IDE

When you’re building from someone else’s design, you want the right piece of that design in front of your agent without losing your place in the code. Here’s what usually gets in the way, and what Figma Connect for WebStorm does about it.

“I keep switching to Figma just to find the right frame.” The Layers list sits in the Figma Connect tool window. Expand it, click a layer, and the matching node is focused in Figma. Select something in Figma instead, and it appears under Currently selected with a thumbnail. Both directions, in real time.

“Every time I want to use a design, I’m copying a URL into the chat.” Your current selection is attached to every new AI chat automatically. Need something else, or several things at once? Add to Context, straight from the list.

“Attaching designs bloats my context.” Figma Connect attaches a reference to the node, its identifier, not a screenshot or the full design. Attach as often as you like.

A Forrester study found that developers with access to Figma design specs during implementation save over 90 minutes a week. Figma Connect makes that access automatic, without requiring you to switch tabs.

Better AI code generation as a bonus

When you pass the same design context to the AI chat, code generation improves, too. Your agent works from the actual spec instead of approximating your design system, which means less output needs to be corrected.

Stage one of WebStorm’s design-to-code workflow optimization

The Figma MCP server and required configuration are set up and optimized automatically by WebStorm, you only need to set it up once (see how). Unlike when you add a generic MCP connection yourself, this integration is maintained with each WebStorm release. It works on day one.

Figma Connect is the first step in a larger workflow we’re building to keep design, code, and the running app visually aligned throughout the development lifecycle. The spec in your IDE is where that starts.

Thanks for choosing WebStorm. Stay tuned to see what’s coming next.

The WebStorm team