skills.rest
OktayCopurlu
OktayCopurluCOMMUNITY
Explore all skills by this author →
GitHub

figma-mcp

Read Figma designs and node context via Figma MCP before browser fallbacks.

3|Updated Apr 2, 2026
Search Tags:#figma#mcp#playwright#design extraction#ui validation#design specs#node context
One-click install
npx skills add https://github.com/OktayCopurlu/ai-shared --skill figma-mcp-oktaycopurlu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-mcp
Source: https://github.com/OktayCopurlu/ai-shared/tree/main/.github/workflows/skills/figma-mcp
Command: npx skills add https://github.com/OktayCopurlu/ai-shared --skill figma-mcp-oktaycopurlu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When a user shares a Figma link, an AI agent often guesses at the wrong tool, hits a login wall in a simple browser, or retries weak fallbacks without diagnosing the real blocker. This Skill defines the local routing rules for reading Figma designs through the Figma MCP server first, with a clearly defined authenticated browser fallback. ## Core Features & Use Cases - Figma MCP routing: Reads design files, node context, specs, and copy through the Figma MCP tools exposed in the session, handling fileKey, branchKey, and node-id URL forms. - Blocker taxonomy: Classifies failures precisely as tool unavailable, unsupported URL, missing input, or auth/access issues instead of blindly retrying. - Authenticated fallback: Uses extension-backed Playwright MCP with an authenticated Chrome session when the MCP route fails, avoiding unauthenticated simple-browser dead ends. - Use Case: A designer shares a Figma URL with a node-id and asks whether the implemented UI matches. The Skill reads the node specs via Figma MCP, then hands off to a UI validation workflow for comparison. ## Quick Start Read the Figma design at this URL and extract the specs and copy for the selected node.

Frequently Asked Questions about figma-mcp

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

FAQPage Schema
How do I read a Figma design from a URL using MCP?▼

Pass the Figma URL to the Figma MCP tools exposed in the session, which parse the fileKey, branchKey, and node-id from the link. If no node-id is present, request metadata discovery first to locate the relevant node.

What should I use when Figma MCP cannot access a file?▼

Use the extension-backed Playwright MCP with an authenticated Chrome session as the fallback. Do not use the VS Code simple browser or read_page tools, since a login wall there indicates the wrong surface rather than a real access block.

Why does reading a Figma link fail with an auth error?▼

Auth failures occur when the file is unshared, belongs to a different workspace, or the session has expired on the remote MCP server. The Skill classifies this as an auth/access blocker and reports it instead of retrying weaker fallbacks.

Can this read Figma files without a node-id in the URL?▼

Yes, but only if metadata discovery is requested to locate nodes within the file. Without a node-id and without discovery, the Skill treats it as a missing-input blocker and asks the user for a more specific link.

Does this work with a local or desktop Figma MCP server?▼

No, this environment is remote-only with no desktop or local Figma MCP server configured. There is no desktop selection to read, so the user must always provide a Figma link.

Related Skills

Explore More Design & Creative Skills→
cano721cano721

figma-implement-design

Translate Figma designs into UI code using the Figma MCP server.

Community
Advanced
udecodeudecode
240

design-implementation-reviewer

Compare live UI implementations against Figma designs and report discrepancies.

Official
Advanced
satriadhmsatriadhm

polish

Audit UI alignment, typography, color contrast, and copy consistency.

Community
Advanced
Junior-Frontend-devJunior-Frontend-dev

figma-analyzer

Extract design assets, metadata, and design tokens from Figma files via the REST API.

Community
Intermediate