Introduction

A MCP Tool for build up your figma design by one prompt

Install F2C Chrome extension

https://chromewebstore.google.com/detail/f2c/gmcgpjgoiidajfjhdooaajaeonnmikfc?utm_source=ext_app_menu

Settings for mcp.json

add mcp json config below to enjoy prompt to design for figma

Base Config

{
  "mcpServers": {
    "f2c-ptd": {
      "command": "npx",
      "args": [
        "-y",
        "@f2c/ptd",
        "--server=f2c-ptd.yy.com",
        "--figma-api-key="
      ],
    }
  }
}

Recommand add autoApprove

speed up for mcp tool run

{
  "f2c-ptd": {
    "autoApprove": [
      "join_channel",
      "get_user_components",
      "create_text",
      "create_rectangle",
      "set_fill_color",
      "set_stroke_color",
      "set_text_content",
      "set_multiple_annotations",
      "set_corner_radius",
      "create_frame",
      "set_multiple_text_contents",
      "set_layout_mode",
      "set_annotation",
      "set_padding",
      "set_axis_align",
      "set_layout_sizing",
      "set_item_spacing",
      "get_document_info",
      "get_selection",
      "get_node_info",
      "get_nodes_info",
      "get_component",
      "create_component_instance",
      "set_instance_overrides",
      "get_instance_overrides",
      "move_node",
      "clone_node",
      "resize_node",
      "delete_multiple_nodes",
      "export_node_as_image",
      "get_annotations",
      "scan_text_nodes",
      "scan_nodes_by_types",
      "read_my_design",
      "get_reactions",
      "set_default_connector",
      "delete_node",
      "create_connections"
    ]
  }
}

NVM env for node

{
  "f2c-ptd": {
    "env": {
      "PATH": "/Users/Ron0115/.nvm/versions/node/v21.6.1/bin:/bin"
    }
  }
}

Get Start

1. Join Channel in Chrome Extendsion

2. Copy ChannelID

3. Paste ChannelID and send prompt

4. Joined Channel

5. Send Prompt like "Please design an userInfo page for an IM APP"