skills.rest
tuantiensiu
tuantiensiuCOMMUNITY
Explore all skills by this author →
GitHub

figma

Fetch Figma layouts, styles, components, and tokens via Framelink MCP.

1|Updated Jan 10, 2026
Search Tags:#figma#mcp#assets#ui-design#design-tokens#design-data
One-click install
npx skills add https://github.com/tuantiensiu/todo-app --skill figma-tuantiensiu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/tuantiensiu/todo-app/tree/main/.opencode/skill/figma
Command: npx skills add https://github.com/tuantiensiu/todo-app --skill figma-tuantiensiu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Access to Figma design data, including layouts, styles, components, tokens, and assets, often requires manual steps across tools. This skill provides a Framelink MCP-based gateway to fetch and download design data programmatically.

Core Features & Use Cases

  • Fetch layout, styles, components, and design tokens from Figma files/frames via the Framelink MCP.
  • Retrieve tokens, color and typography data for design-to-development handoff.
  • Download assets (images) from Figma files for use in UI projects.

Quick Start

After loading this skill, use skill_mcp to invoke Figma tools with a fileKey and optional nodeId to fetch data.

Frequently Asked Questions about figma

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

FAQPage Schema
How do I fetch Figma design data programmatically?▼

To fetch Figma design data programmatically, use the skill to invoke Framelink MCP tools with a fileKey and optional nodeId. This retrieves layouts, styles, components, and design tokens directly from Figma files.

Can I download assets from Figma files via MCP?▼

Yes, you can download assets from Figma files via MCP. The Skill exposes Framelink MCP server tools that enable programmatic retrieval and downloading of images for UI projects.

What do I need to retrieve design tokens from Figma?▼

To retrieve design tokens from Figma, you need a valid Figma API key. The Skill uses this key to run the Framelink MCP server, which exposes the tools required to fetch token data.

Does the Figma MCP integration support design-to-development handoff?▼

Yes, the Figma MCP integration supports design-to-development handoff by retrieving tokens, color, and typography data from Figma files, centralizing UI data retrieval for developers.

What is the best way to centralize UI data retrieval from Figma?▼

The best way to centralize UI data retrieval from Figma is using an MCP-based gateway. This Skill provides a Framelink MCP gateway to fetch layouts, styles, components, and assets programmatically.

Related Skills

Explore More Design & Creative Skills→
KuassKuass
1

figma

Fetch Figma layout, style, and component data and download SVG and PNG assets.

Community
Intermediate
takapomtakapom

figma

Extract Figma design data and generate React Native components and design tokens.

Community
Advanced
hoshiyar-singh8hoshiyar-singh8

figma-analysis

Parses Figma URLs and generates design-context diffs with token mappings and ASCII layouts.

Community
Intermediate
HellKaiser45HellKaiser45

figma

Translate Figma design frames into production-ready UI code via MCP.

Community
Advanced