How to integrate Figma MCP with OpenClaw | Composio

How to integrate Figma MCP with OpenClaw

Connect OpenClaw to Figma MCP. Add a comment to this figma file, convert design tokens to tailwind css, and more using natural language, with authentication handled for you.

Introduction

OpenClaw is the fastest growing agent harness out there, which can work 24/7 to automate almost any kind of tasks. However, its capabilities are limited to the tools it has access to. Composio allows your OpenClaw to access Figma with authentication management handled for you. You can execute actions on Figma via your favorite OpenClaw interface (Telegram, WhatsApp, TUI, etc), whichever you prefer.

Why use Composio?

Apart from a managed and hosted MCP server, you will get:

Programmatic tool calling allows LLMs to write its code in a remote workbench to handle complex tool chaining. Reduces to-and-fro with LLMs for frequent tool calling.
Handling Large tool responses out of LLM context to minimize context rot.
Dynamic just-in-time access to 20,000 tools across 1000+ other Apps for cross-app workflows. It loads the tools you need, so LLMs aren't overwhelmed by tools you don't need.

How to install Figma with OpenClaw

Using Composio API Key and Setup Prompt

Go to dashboard.composio.dev
Copy the setup prompt
Run it in your OpenClaw chat interface.
Authenticate Figma from the dashboard
Go back to your OpenClaw interface and start asking questions.

Using OpenClaw/Composio Plugin

Install OpenClaw Composio plugin

    openclaw plugins install @composio/openclaw-plugin
    ```

2. Copy the API Key from [dashboard.composio.dev](https://dashboard.composio.dev/login?next=/~/org/connect/clients/openclaw&utm_source=toolkits&utm_medium=framework_template&utm_campaign=openclaw&utm_content=api_key)

3. Setup OpenClaw Config

```bash
    openclaw config set plugins.entries.composio.config.consumerKey "ck_your_key_here"
    ```

4. Restart OpenClaw

```bash
    openclaw gateway restart
    ```

5. Go to your chat interface and start asking questions.
6. When prompted, authenticate the app and you're all set.

## How It Works

The plugin connects to Composio's MCP server at `https://connect.composio.dev/mcp` and registers all available tools directly into the OpenClaw agent. Tools are called by name — no extra search or execute steps needed.

## What is the Figma MCP server, and what's possible with it?

The Figma MCP server is an implementation of the Model Context Protocol that connects your AI agent and assistants like Claude, Cursor, etc direct to your Figma account. It provides structured and secure access to your Figma workspace, so your agent can perform actions like commenting on designs, managing design tokens, linking developer resources, and automating collaboration workflows on your behalf.

- **Automated commenting and feedback loops:** Have your agent add, reply to, or delete comments on Figma files and branches to streamline design reviews and team discussions.
- **Design token management and conversion:** Let the agent extract, update, or convert design tokens in your files, including generating Tailwind CSS configurations for seamless dev handoff.
- **Developer resource integration:** Automatically attach, update, or remove dev resources linked to Figma nodes, bridging the gap between design and development with contextual documentation or code references.
- **Webhook setup and automation:** Enable your agent to create or delete webhooks for team events, making it easy to trigger notifications or workflows based on design activity.
- **Collaborative variable management:** Empower the agent to batch-create, modify, or delete variables, collections, and modes across your design system, keeping everything consistent and up to date.

## Conclusion

You've successfully integrated Figma with OpenClaw using Composio plugin. Now interact with Figma directly from your terminal, Web UI, or any messenger app using natural language commands.

**Key benefits of this setup:**

- Seamless integration across TUI, Web UIs, and Messenger apps.
- Natural language commands for Figma operations.
- Managed authentication through Composio.
- Access to 20,000+ tools across 1000+ apps for cross-app workflows.
- Programmatic tool calling for complex tool chaining.

## Supported Tools

Every Figma action and event your agent gets out of the box.

- **Add a comment to a file**: Posts a new comment to a Figma file or branch, optionally replying to an existing root comment.
- **Add a reaction to a comment**: Posts a specified emoji reaction to an existing comment in a Figma file or branch.
- **Create a webhook**: Creates a Figma webhook to receive notifications when specific events occur.
- **Create dev resources**: Creates and attaches multiple uniquely-URLed development resources to specified Figma nodes.
- **Create, modify, or delete variables**: Manages variables, collections, modes, and their values in a Figma file via batch create/update/delete operations.
- **Delete a comment**: Deletes a specific comment from a Figma file or branch.
- **Converts design tokens to Tailwind CSS**: Converts design tokens to Tailwind CSS configuration.