figma-reader

Community

Extract Figma data via MCP with smart tool picks

AuthorLPdsgn
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill provides structured access to Figma designs through the MCP Remote Server, enabling seamless extraction and transformation of design data for development pipelines.

Core Features & Use Cases

  • MCP-based data extraction: retrieve design context, tokens, and metadata for frames and components.
  • Visual verification: generate screenshots and layer structures to validate designs.
  • Design-to-code mapping: identify corresponding components and map designs to code components.

Quick Start

Use the figma-reader skill to extract design data from a Figma file via MCP. Provide a Figma URL or nodeId and choose a target tool (e.g., get_design_context for code generation, get_variable_defs for tokens).

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: figma-reader
Download link: https://github.com/LPdsgn/claude-toolkit/archive/main.zip#figma-reader

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.