Skip to content
OwnlyPlans

MCP server

Figma MCP Server

Framelink server that gives your AI coding tool the layout, styles and assets of a Figma design so it can build the UI accurately.

Admin @bhaskar
Remix

Use it with Claude or any AI tool. Copy the prompt and paste it in. The link inside gives the AI the whole page as Markdown.

Markdown

Install

Terminal 
claude mcp add-json figma '{"command":"npx","args":["-y","figma-developer-mcp","--figma-api-key=YOUR-FIGMA-TOKEN","--stdio"]}'

Adds the server to Claude Code. For other apps, copy the config below.

About

This server reads a Figma file or frame through the Figma API and returns a simplified view of layout, colors, typography and spacing. Your AI tool uses it to build the component instead of guessing from a screenshot.

Paste a Figma link into your prompt and ask for the component. You need a Figma personal access token with read access. Keep the token in your own config and never commit it.

Files and links

  • Figma MCP Server config MCP config Add this to your MCP client's config, or use the install line.
    Download

    Check it before you connect it. This server runs with your permissions: npx -y figma-developer-mcp --figma-api-key=YOUR-FIGMA-TOKEN --stdio

    Claude Code 
    claude mcp add-json figma '{"command":"npx","args":["-y","figma-developer-mcp","--figma-api-key=YOUR-FIGMA-TOKEN","--stdio"]}'
  • Official setup docs (opens in a new tab) github.com Client-specific setup, options and permissions.

  • Habit tracker app screen

    A pastel phone screen: four habits are ticked one by one while the daily progress ring fills from 0 to 100 percent.

    Plan @bhaskar Stars:0 Views:2 4 steps

  • Community moderation queue

    A dark moderation queue: one report is removed, another approved, the rest move up and the open count drops from 12 to 10.

    Plan @bhaskar Stars:0 Views:1 4 steps

Your AI tool
Starter prompt 

		

		


		

			Download the plan