Appearance

Star

/formhaus:formhaus-figma-connect ​

Find your form components in a Figma library and bind them to the Figma plugin.

Prerequisites ​

Install the plugin:

bash
claude plugin marketplace add ignsm/formhaus
claude plugin install formhaus@formhaus

Inside a Claude Code session, /plugin marketplace add ignsm/formhaus and /plugin install formhaus@formhaus do the same after a confirmation prompt.

Setting up Figma MCP ​

The Figma MCP server connects Claude Code to the Figma API.

1. Install the Figma MCP server ​

Follow the official guide: Figma MCP Server Setup

2. Verify the connection ​

Ask Claude: "Can you connect to Figma? Try whoami."

If it returns your Figma user info, the connection works. The skill runs the same check before searching a file.

What Figma MCP enables ​

Once connected, the skill can:

  • Search components by name
  • Show screenshots for confirmation
  • Read variants, properties, and layer names
  • Write the confirmed bindings into your Figma file

Usage ​

/formhaus:formhaus-figma-connect

Plugin skills are namespaced with the plugin name. Claude also picks the skill on its own when the request matches.

The skill checks the MCP connection and asks for the URL of the file where you design forms. It searches your libraries for inputs, selects, selection controls and buttons, and shows each match as a screenshot. After you confirm, it writes the bindings into that file. Open the plugin's Components tab to check them.

Typical workflow ​

  1. Describe the form to Claude, or run /formhaus:formhaus-create-form
  2. Claude generates the form definition
  3. Run /formhaus:formhaus-figma-connect to map your design system (one-time setup)
  4. Paste the definition into the plugin's JSON mode, or build the form in Fields
  5. Click Generate form to create it with your components

After the initial setup, you only need steps 1, 4, and 5 for each new form.

Next steps ​

Formhaus is MIT licensed. Legal