{"slug": "figma-connect-for-webstorm-stage-one-of-a-better-design-to-code-experience", "title": "Figma Connect for WebStorm: Stage One of a Better Design-to-Code Experience", "summary": "JetBrains released Figma Connect for WebStorm 2026.2.1, integrating Figma design files directly into the IDE to streamline design-to-code workflows. The tool lets developers select layers, attach design context to AI chats, and generate code from the actual spec, potentially saving over 90 minutes per week according to a Forrester study. This is the first stage of JetBrains' broader effort to align design, code, and running apps throughout development.", "body_md": "[News](/webstorm/category/news/)\n\n[Releases](/webstorm/category/releases/)\n\n# Figma Connect for WebStorm: Stage One of a Better Design-to-Code Experience\n\n## Where time actually goes in design-to-code\n\nEvery 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.\n\nYour 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.\n\nThe reason: Figma lives outside the IDE. The spec gets checked once, then abandoned.\n\nFigma 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.\n\nPass 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.\n\nFigma Connect is supported in [WebStorm 2026.2.1.](https://jb.gg/2mkcj8) 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.\n\n## Work through a screen without leaving the IDE\n\nWhen 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.\n\n**“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.\n\n**“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.\n\n**“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.\n\nA [Forrester study](https://www.figma.com/reports/forrester-tei-dev-mode/) 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.\n\n## Better AI code generation as a bonus\n\nWhen 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.\n\n## Stage one of WebStorm’s design-to-code workflow optimization\n\nThe Figma MCP server and required configuration are set up and optimized automatically by WebStorm, you only need to set it up once ([see how](https://www.jetbrains.com/help/webstorm/2026.2/figma.html)). Unlike when you add a generic MCP connection yourself, this integration is maintained with each WebStorm release. It works on day one.\n\nFigma 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.\n\nThanks for choosing WebStorm. Stay tuned to see what’s coming next.\n\n*The WebStorm team*\n\n#### Subscribe to WebStorm Blog updates", "url": "https://wpnews.pro/news/figma-connect-for-webstorm-stage-one-of-a-better-design-to-code-experience", "canonical_source": "https://blog.jetbrains.com/webstorm/2026/08/figma-connect-webstorm/", "published_at": "2026-08-06 10:43:04+00:00", "updated_at": "2026-08-09 13:50:20.549202+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools", "generative-ai"], "entities": ["JetBrains", "WebStorm", "Figma", "Junie", "Claude", "Copilot", "Cursor", "Air"], "alternates": {"html": "https://wpnews.pro/news/figma-connect-for-webstorm-stage-one-of-a-better-design-to-code-experience", "markdown": "https://wpnews.pro/news/figma-connect-for-webstorm-stage-one-of-a-better-design-to-code-experience.md", "text": "https://wpnews.pro/news/figma-connect-for-webstorm-stage-one-of-a-better-design-to-code-experience.txt", "jsonld": "https://wpnews.pro/news/figma-connect-for-webstorm-stage-one-of-a-better-design-to-code-experience.jsonld"}}