20 boosters for "figma" — open source, verified from GitHub, ready to install
This skill helps you generate custom design system rules tailored to your project's specific needs. These rules guide AI coding agents to produce consistent, high-quality code when implementing Figma designs, ensuring that your team's conventions, component patterns, and architectural decisions are
Use this skill to create or update full-page screens in Figma by reusing the published design system — components, variables, and styles — rather than drawing primitives with hardcoded values. The key insight: the Figma file likely has a published design system with components, color/spacing variabl
Automates translation of Figma designs into production-ready code with pixel-perfect visual accuracy using the Figma MCP workflow. Ideal for developers and designers who need to implement designs quickly while maintaining design fidelity.
Use MCP to execute JavaScript in Figma files via the Plugin API. All detailed reference docs live in . Before anything, load plugin-api-standalone.index.md to understand what is possible. When you are asked to write plugin API code, use this context to grep plugin-api-standalone.d.ts for relevant t
This booster integrates Figma's MCP server into Claude Code to automatically fetch design context, screenshots, and variables, then translate Figma designs into production code. Developers working on design-to-code workflows benefit significantly from automated design asset retrieval and code generation.
This skill helps you connect Figma design components to their corresponding code implementations using Figma's Code Connect feature. It analyzes the Figma design structure, searches your codebase for matching components, and establishes mappings that maintain design-code consistency. Call to identi
Build professional-grade design systems in Figma that match code. This skill orchestrates multi-phase workflows across 20–100+ calls, enforcing quality patterns from real-world design systems (Material 3, Polaris, Figma UI3, Simple DS). Every design system build follows this phase order. Skipping o
Use the MCP tool to create a new blank Figma file in the user's drafts folder. This is typically used before when you need a fresh file to work with. This skill accepts optional arguments: Parse the arguments from the skill invocation. If editorType is not provided, default to . If fileName is not
"name": "figma-developer-mcp", "mcpName": "io.github.GLips/Figma-Context-MCP", "description": "Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.",
"name": "cursor-talk-to-figma-mcp", "description": "Cursor Talk to Figma MCP", "module": "dist/server.js",
"description": "Plugin that includes the Figma MCP server and Skills for common workflows",
"description": "A virtual design team for Claude Code, Cursor, Windsurf, Gemini CLI, and Copilot — powered by Naksha. Assembles specialist roles — UI designer, UX researcher, content designer, Figma expert, data viz, email, social, motion, presentation, brand strategy, illustration, video, conversat
This MCP server enables seamless conversion of Figma designs to Flutter code, allowing designers and developers to bridge the gap between design tools and mobile app development. It benefits design teams and Flutter developers looking to automate UI code generation from Figma mockups.
"name": "design-system-ops", "description": "Staff-level design system auditing, governance, documentation, validation, and communication — 39 skills, 4 agents, and 11 knowledge notes for the full design system lifecycle", "name": "Murphy Trueman"
Figma skill enables AI assistants to programmatically access and manage design files, components, and comments via the Figma REST API. Developers and designers benefit from automated design workflows, asset exports, and workspace integration.
A comprehensive Figma MCP system prompt that enables AI development tools (Claude, Cursor, Windsurf) to automatically extract design systems, components, and pixel-perfect code directly from Figma designs. Developers using design-to-code workflows benefit from automated analysis without manual extraction.
A Figma REST API skill that enables reading design files, exporting images, managing comments, and accessing design components—essential for developers and designers integrating Figma into automated workflows.
This MCP Server converts Figma designs into pseudo-code structures that LLMs can easily understand, enabling seamless design-to-code workflows for developers and designers building prototypes and applications.
"name": "abstract-to-concrete-design", "description": "Agentic workflow for designers — from abstract problem space to evidence-based design brief. Research, competitive analysis, and UX critique run in parallel to produce a design brief before you open Figma.", "author": { "name": "rizkiridha", "ur
Freya is a designer-developer agent that converts Figma designs into frontend code, bridging the gap between design systems and implementation. It's useful for design teams and full-stack developers who want to automate design-to-code workflows while maintaining visual fidelity.
