There's nothing quite like the excitement of integrating a new AI tool into your workflow. When I heard about Amazon Q Developer and its promise to generate code directly from Figma components, I was all in. The dream is to bridge that gap between design and code, to select a component in a Figma file and have a powerful AI assistant in my IDE generate the front-end code for it instantly.
I use PHPStorm for most of my development, so I was thrilled to see the Amazon Q Developer plugin available. I got everything installed, fired up Figma's Dev Mode, and prepared for a massive productivity boost.
And then... I hit a wall.
The connection between Amazon Q and Figma's Dev Mode relies on something called an MCP (Message-oriented Communication Protocol) server. While Figma's documentation explains how to start the server, it was missing the specific arguments I needed to get it talking to the Amazon Q plugin. After a bit of digging and some trial and error, I pieced together the solution by combining information from an AWS community post and the official Figma guide.
It was one of those classic developer moments—frustrating, but incredibly satisfying to solve. In this post, I'm going to share my exact setup so you can skip the frustration and get right to the good part.
Part 1: The "Why" - What This Connection Unlocks
Before we dive into the technical details, let's quickly cover why this is worth the effort. Once this connection is established, the workflow is seamless. I can have Figma open on one screen, select a fully-designed component, and then, inside PHPStorm, ask Amazon Q to generate the React or Vue code for it. It's not just about saving typing; it's about reducing the mental context-switching between design specs and my code editor. It’s a genuine accelerator.
Part 2: The Missing Piece of the Puzzle: The MCP Command
The key to this entire setup was figuring out the correct command-line arguments to pass to the Figma MCP server process. The official Figma documentation gets you started, but it was an AWS community post that provided the final, crucial pieces.
The full command you need to run, if you were to do it manually in your terminal, looks like this:
npx mcp-remote http://YOUR-MCP-URL-HERE/sse --allow-http --transport sse
The two arguments that were the missing link for me were --allow-http and --transport sse. Without these, the Amazon Q plugin simply couldn't establish a connection.
Part 3: The Setup: My Step-by-Step Guide for PHPStorm
Now for the core of it. Here is the exact configuration I used to get this working in the Amazon Q Developer plugin settings within PHPStorm. You can set this up per-project or globally—that's your choice.
- In PHPStorm, open the Amazon Q plugin settings.
- Find the section for MCP server configurations.
- Add a new server configuration with the following details:
- Name:
FIGMA(You can name this whatever you like, but keeping it simple is best.) - Transport:
stdio(This was not editable for me in the plugin.) - Command:
npx - Arguments: This is the most important part. You need to add each part of the command as a separate argument.
mcp-remotehttp://127.0.0.1:3845/sse(This local URL is provided by the Figma Dev Mode server when you start it.)--allow-http--transportsse
- Timeout:
60(I left this at the default value.)
Once I saved this configuration, the connection worked perfectly.
Part 4: The Generic Config File Method
If you're using a different IDE or tool that relies on a generic JSON configuration file for this, the structure would look like this. This is essentially what the PHPStorm plugin is building behind the scenes.
{
"mcpServers": {
"Figma Server": {
"command": "npx",
"args": ["mcp-remote", "http://YOUR-MCP-URL-HERE/sse", "--allow-http", "--transport", "sse"]
}
}
}
Part 5: The Critical Prerequisite: Use the Figma Desktop App
This is a crucial "gotcha" that can cause a lot of headaches if you're not aware of it. You must be running the Figma Desktop app for this to work.
The entire connection relies on a local server that Figma's Dev Mode creates on your machine. The Amazon Q plugin needs to connect to this local server. If you are using Figma in a web browser, that local server won't be running, and the connection will fail every time.
Part 6: Putting It to the Test: My First Real-World Run
Once I had everything connected, I wanted to give it a real test—something beyond a simple button. I decided to ask Amazon Q Developer to create a WordPress plugin that would work with Elementor, and specifically, to provide a fully working template of a page section I had selected in my open Figma design.
My first prompt was admittedly a bit lazy:
"I need to add the selected website page section into a pre-made template for Elementor in WordPress"
This prompt wasn't great. I hadn't explicitly told it to use the Figma selection (which is what triggers the MCP connection), nor did I specify what kind of Elementor component I wanted. Elementor has widgets, page templates, section templates, and more. After Amazon Q asked a few clarifying questions, it got to work.
About two to three minutes later, it had generated a complete folder and file structure for a new WordPress plugin. At first glance, it looked good, but we all know that AI-generated code often has subtle bugs.
And there was something to fix, but not what I expected.
I uploaded the generated plugin to a test site and activated it without a single error. I opened a page with the Elementor editor, found my new widget, and dragged it onto the page. After a few seconds of loading... there it was. A nearly perfect Elementor widget of the exact page section I had selected in Figma.
The one and only issue? The AI hadn't made the three inner "card" components clickable. I started a new conversation with Q, asked it to add a URL field to each card, and within a minute, the plugin was done. It was working perfectly.
Interestingly, it had created an Elementor Widget rather than a page Template. But in retrospect, I think the AI made the better architectural decision. The new widget had 100% valid and working fields for every heading, sub-section, and all three card components—each with its own image, subtitle, description, and the newly added URL field.
Total time from prompt to fully functional, custom Elementor widget: five minutes, tops.
Heck, it even provided me with an extremely good changelog, an explanation of its architectural choices, and a perfectly formatted README file. There were a few tiny design inconsistencies (the inner images had a border-radius when they shouldn't have), but those were trivial CSS fixes.
After this experience, I know exactly how I'll be creating website themes, pages, templates, and plugins from now on. This single successful test is moving our company even closer to being an AI-first agency.
Conclusion: Bridging the Gap Between Design and Code
After figuring out the right combination of settings, the workflow is everything I hoped it would be. It's a powerful example of how AI tools can genuinely enhance our development process when we can get them configured correctly. The initial roadblock was a classic case of documentation not quite keeping up with a specific, real-world use case.
I hope sharing my setup saves you the time and effort I spent troubleshooting. Now, with Amazon Q and Figma properly connected, my workflow from design to code is significantly faster and more fluid.
Let me know in the comments if this guide worked for you or if you have any questions. Happy coding!