moai-mcp-figma
About
This Claude Skill integrates Figma designs into development workflows through MCP server connectivity. It extracts design systems, syncs design tokens, and generates framework-specific components from Figma files. Use it when converting Figma designs to code or integrating design systems into your project.
Quick Install
Claude Code
Recommendednpx skills add modu-ai/moai-adk -a claude-code/plugin add https://github.com/modu-ai/moai-adkgit clone https://github.com/modu-ai/moai-adk.git ~/.claude/skills/moai-mcp-figmaCopy and paste this command in Claude Code to install this skill
GitHub Repository
Frequently asked questions
What is the moai-mcp-figma skill?
moai-mcp-figma is a Claude Skill by modu-ai. Skills package instructions and resources that Claude loads on demand, so Claude can perform moai-mcp-figma-related tasks without extra prompting.
How do I install moai-mcp-figma?
Use the install commands on this page: add moai-mcp-figma to Claude Code as a plugin, or clone its repository into your skills directory, then restart Claude so it picks up the skill.
What category does moai-mcp-figma belong to?
moai-mcp-figma is in the integration category, tagged mcp, figma, design-system, design-tokens and components.
Is moai-mcp-figma free to use?
Yes. moai-mcp-figma is listed on AIMCP and free to install. It runs inside Claude, so no separate service account is required to use the skill itself.
Related Skills
This Claude Skill integrates Nano-Banana AI services for AI-powered content and image generation within developer workflows. It provides capabilities for text processing, code generation, and multi-modal AI operations. Use it when you need to incorporate content creation and image generation services directly into your development environment.
This Claude Skill provides integration with Nano-Banana AI services for content generation, image creation, and text analysis workflows. It enables developers to incorporate AI-powered content generation, image editing, and multi-modal operations into their applications. Use this skill when you need to add AI service capabilities for automated content creation within your projects.
This Claude Skill provides MCP-based Figma integration for extracting design systems, generating code components, and syncing design tokens. It enables design-to-code workflows by converting Figma files, auto-layouts, and assets into development-ready code for frameworks like React and Vue. Use it when integrating Figma designs into your development process to automate component generation and maintain design consistency.
This MCP skill provides Notion workspace integration for developers, enabling database operations, page management, and automated knowledge extraction. It's designed for automating documentation workflows and managing Notion content through Claude Code. Key capabilities include querying/updating databases, creating pages, and structuring extracted information.