skills.rest
Peterson-Benhame
Peterson-BenhameCOMMUNITY
Explore all skills by this author →
GitHub

figma

Fetches Figma design context, screenshots, and assets via the Figma MCP server for code implementation.

Updated Sep 15, 2026
Search Tags:#oauth#figma#mcp#design tokens#screenshot#design-to-code#ui implementation
One-click install
npx skills add https://github.com/Peterson-Benhame/agent-skills --skill figma-peterson-benhame
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/Peterson-Benhame/agent-skills/tree/main/packages/skills-catalog/skills/%28design%29/figma
Command: npx skills add https://github.com/Peterson-Benhame/agent-skills --skill figma-peterson-benhame

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Translating Figma designs into production code manually is slow and error-prone, and developers often lack direct access to design tokens, variables, and assets when implementing UI from Figma links. ## Core Features & Use Cases - Design Context Fetching: Retrieves structured design data, screenshots, variables, and metadata from Figma nodes using the Figma MCP server. - Design-to-Code Translation: Converts Figma node output (React + Tailwind) into your project's conventions, reusing existing components, tokens, and typography. - MCP Setup & Troubleshooting: Provides configuration guidance for the Figma MCP server, including OAuth tokens, region headers, and verification steps. - Use Case: Paste a Figma frame link into your agent, and it fetches the design context and screenshot, downloads assets, and implements the UI with 1:1 visual parity against the design. ## Quick Start Ask your agent to implement the UI from a specific Figma frame link using the Figma MCP server.

Frequently Asked Questions about figma

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement code from a Figma design link?▼

Copy the Figma frame or layer link and give it to your MCP-enabled agent. The server extracts the node ID from the URL, then the agent runs get_design_context and get_screenshot before translating the output into your project's code conventions.

How do I set up the Figma MCP server?▼

Register the server URL https://mcp.figma.com/mcp in your agent config with a bearer token from the FIGMA_OAUTH_TOKEN environment variable and an X-Figma-Region header. Restart your agent and verify by listing Figma tools.

What tools does the Figma MCP server provide?▼

Core tools include get_design_context for structured design data, get_screenshot for visual reference, get_metadata for node outlines, get_variable_defs for design tokens, and code connect mapping tools for linking nodes to existing components.

Why is my Figma MCP server not authenticating?▼

Authentication fails when FIGMA_OAUTH_TOKEN is not exported in the shell launching your agent or the RMCP client feature is disabled. Verify the token prints non-empty, remove surrounding quotes, and restart your agent after config changes.

When should I not use this Figma skill?▼

Do not use it when the goal is specifically pixel-perfect code implementation from a Figma design; use the figma-implement-design skill instead. This skill covers general Figma data fetching, exploration, and MCP setup.

Related Skills

Explore More Design & Creative Skills→
ChatAndBuildChatAndBuild
1

figma-use

Execute JavaScript code within the Figma file context to manipulate nodes, pages, and components.

Official
Advanced
GuicedEEGuicedEE
5

figma

Translate Figma designs into React components styled with Tailwind.

Official
Advanced
HellKaiser45HellKaiser45

frontend-design-review

Analyze UI implementations against design system tokens and accessibility guidelines.

Community
Advanced
CoRLab-TechCoRLab-Tech

pix

Implement UI components from Figma designs with pixel-perfect accuracy.

Official
Advanced