---
title: "figma"
description: "Bring Figma design context into agent workflows: inspect design context, implement from design, map components, and compare code to design, via Figma's official MCP server."
canonical: https://agentpluginsdirectory.com/plugins/figma--hiai-gg
last-updated: 2026-09-22
---

# figma
Bring Figma design context into agent workflows: inspect design context, implement from design, map components, and compare code to design, via Figma's official MCP server.
- Slug: figma--hiai-gg
- Publisher: HiAI
- Repository: https://github.com/HiAi-gg/agent-plugins
- Manifest: plugins/figma/plugin.json
- Version: 0.0.2
- License: MIT
- Category (editorial): design-frontend
- Skills: 4 (compare-code-to-design, implement-from-design, inspect-design-context, map-design-components)
- MCP servers: 1 (figma)
- Stars: 1
- Repository created: 2026-08-08
- Repository last pushed: 2026-09-03
- Publisher type: Organization
- Listing: https://agentpluginsdirectory.com/plugins/figma--hiai-gg
- Schema: https://agent-plugins.org/schemas/1.0.0/plugin.schema.json

## What figma does, in the publisher's words

Bring Figma design context into agent workflows: inspect design context, implement from design, map components, and compare code to design, via Figma's official MCP server.

An Agent Plugin (spec 1.0.0).

A plugin that connects agents to Figma's official remote MCP server (https://mcp.figma.com/mcp) and adds four portable workflow skills for design-informed implementation and verification.

- First-party upstream: Figma's own remote MCP server.
- Workflow value: the skills teach how to use design context (tokens, components, screenshots) to implement and verify, not just what the tools do.
- Portable: the skills are original, portable workflows; Figma's client-specific plugin skills (Claude Code/Cursor) remain the recommended option inside those clients.
- Server: figma: streamable-http to https://mcp.figma.com/mcp (Figma-hosted, vendor-operated; endpoint version not pinnable).
- Skills: inspect-design-context, implement-from-design, map-design-components, compare-code-to-design.
- An MCP client that supports streamable-http and OAuth, and is in the Figma MCP Catalog.

From the project README, punctuation lightly normalized. Full text: https://raw.githubusercontent.com/HiAi-gg/agent-plugins/HEAD/plugins/figma/README.md

## Skills

- compare-code-to-design: Compare implemented UI code against its Figma design: fetch the design context and screenshot, inspect the implementation, and report visual/behavioral differences. Use when a feature was built from a design and needs verification, or when design and implementation drift.
- implement-from-design: Implement a UI from a Figma design: fetch design context, map to the project's framework and design system, and verify against the design. Use when the user provides a Figma link and asks for the implementation.
- inspect-design-context: Extract design context from a Figma file through the official Figma MCP: design tokens, variables, components, and layout structure for a selected frame or node. Use when implementing a design, checking design tokens, or understanding a Figma screen's structure.
- map-design-components: Map the components in a Figma file to the project's code components: identify reusable components, their properties, and where they are used. Use when building a design system, checking component coverage, or planning which components to extract or reuse.

Descriptions come from the frontmatter of each SKILL.md, punctuation lightly normalized.

## MCP servers

- figma: transport: streamable-http; url: https://mcp.figma.com/mcp

Read from the plugin's own mcp.json. Environment variable names only, never values.