A side-by-side look at the Figma Context MCP and Flowbite MCP MCP servers: transport, auth, tools, quality signals, and the config to install either one in Claude, Cursor, Windsurf or VS Code.
Verdict: choose Figma Context MCP for architecture & design work as a local process; choose Flowbite MCP for architecture & design as a local process. You can also run both side by side in one mcpServers block.
FIGMA_API_KEY, PORT.get_figma_data, download_figma_images.FIGMA_ACCESS_TOKEN, MCP_TRANSPORT_MODE, MCP_PORT, MCP_HOST, MCP_CORS_ORIGINS.convert-figma-to-code, generate-theme.Rows where the two servers differ are marked.
| Spec | ||
|---|---|---|
| Category | Architecture & Design | Architecture & Design |
| Quality signal | 71/100 · Great | 61/100 · Good |
| Install command | Confirmed | Confirmed |
| Transport | Local subprocess (stdio) | Local subprocess (stdio) |
| Auth | API key required | API key required |
| Pricing | Free | Free |
| Required env vars | FIGMA_API_KEYPORT | FIGMA_ACCESS_TOKENMCP_TRANSPORT_MODEMCP_PORTMCP_HOSTMCP_CORS_ORIGINS |
| Verified owner | Community listing | Community listing |
| GitHub stars | 16,019 | 42 |
| Directory activity | 8 views 0 installs 0 upvotes | 3 views 0 installs 0 upvotes |
| Tools | 2 | 2 |
| Full listing | View Figma Context MCP | View Flowbite MCP |
get_figma_dataGet comprehensive Figma file data including layout, content, visuals, and component informationdownload_figma_imagesDownload SVG and PNG images used in a Figma file based on the IDs of image or icon nodes. Images will be saved relative to the server's image directory: /home/userconvert-figma-to-codeFetches a Figma node and its rendered image from the Figma API and converts it to a code block. Requires FIGMA_ACCESS_TOKEN environment variable to be set.generate-themeGenerates a custom Flowbite theme CSS file based on a brand color (hex format) and user instructions. The AI will intelligently analyze the instructions and customize ALL theme variables (border radius, spacing, colors, typography, etc.) to match the desired aesthetic. This tool creates color shades and variations, adapting the entire theme system to match your brand identity.Paste either block (or both) into your client config, e.g. claude_desktop_config.json or ~/.cursor/mcp.json. We only show a config when the install command is confirmed.
{
"mcpServers": {
"glips-figma-context-mcp": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp"
],
"env": {
"FIGMA_API_KEY": "YOUR_FIGMA_API_KEY_HERE",
"PORT": "YOUR_PORT_HERE"
}
}
}
}
{
"mcpServers": {
"themesberg-flowbite-mcp": {
"command": "npx",
"args": [
"-y",
"flowbite-mcp"
],
"env": {
"FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_ACCESS_TOKEN_HERE",
"MCP_TRANSPORT_MODE": "YOUR_MCP_TRANSPORT_MODE_HERE",
"MCP_PORT": "YOUR_MCP_PORT_HERE",
"MCP_HOST": "YOUR_MCP_HOST_HERE",
"MCP_CORS_ORIGINS": "YOUR_MCP_CORS_ORIGINS_HERE"
}
}
}
}