Skip to content

README.md

Latest commit

 

History

History
60 lines (42 loc) · 2.08 KB

README.md

File metadata and controls

60 lines (42 loc) · 2.08 KB
Raw
gigachad

✨ Figma Boy ✨
Figma support for IntelliJ & Junie


  • Explore and edit your design files in an IntelliJ panel
  • Ask Junie to edit your prototypes
  • Ask Junie to implement the prototypes in your codebase
Figma.Boy.Demo.mp4

Figma Boy is an alternative to Figma’s official Dev Mode MCP that lets agents generate code from designs. We aim for more capabilities and tighter integration with Junie & IntelliJ.

How to use

✨ For now, you need to build Figma Boy locally (see the instructions below). The project consists of an IntelliJ plugin and a Figma plugin that work together. When we publish both plugins, the setup will be as easy as saving them on the marketplaces.

✨ This is a hackathon project—please star it and show support if you want us to continue our work. We are open to actively working on Figma Boy if there is a request from the community.

Running dev version

  1. Run the Figma plugin

    1. Go to figma-plugin directory and run the following commands: 
      npm install
npx tsc -p .
    2. Run Figma Desktop app
    3. Select Plugins > Development > Open > Import plugin from manifest... and choose figma-mcp/manifest.json
    4. Run the Figma Boy plugin

  2. Start an IntelliJ instance with the IntelliJ plugin:

    ./gradlew runIde

  3. Save Figma Boy MCP server: in Settings -> Tools -> Junie -> MCP Settings, paste the config below

    {
  "mcpServers": {
    "figma-boy": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "http://127.0.0.1:4114/sse"
      ]
    }
  }
}

  4. The integration should work now! You can open the Figma panel (the Google authentication won't work for now) and ask Junie to build your UI