figma

Fetch Figma design data and assets via Framelink MCP.

Updated Feb 5, 2026

Search Tags:#ui #components #figma #mcp #assets #tokens #design-data

Ready to run

npx skills add https://github.com/Khoiwall/be_vidify --skill figma-khoiwall

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/Khoiwall/be_vidify/tree/main/.opencode/skill/figma
Command: npx skills add https://github.com/Khoiwall/be_vidify --skill figma-khoiwall

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Access Figma design data via the Framelink MCP to fetch layout, styles, and components from files/frames for UI implementation and design-token extraction.

Core Features & Use Cases

Retrieve comprehensive design data for an entire Figma file or a specific node to inform UI development.
Download assets (SVG/PNG) and extract component information to accelerate build workflows.
Use Case: A designer hands off a file; the developer fetches the file data and assets to reproduce the UI precisely.

Quick Start

Use the Figma MCP tools to fetch file data and assets for a given fileKey and nodeId.

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 for UI implementation?▼

You can fetch Figma design data by providing a specific fileKey and an optional nodeId to retrieve layout, styles, and components for accurate UI implementation.

Can I extract design tokens from a specific Figma node?▼

Yes, you can extract design tokens from a specific Figma node by targeting its nodeId, which returns structured global variables and style details for downstream processing.

How do I download SVG and PNG assets from Figma?▼

Downloading SVG and PNG assets from Figma is achieved by fetching file data and components via the Framelink MCP, accelerating your build workflows with extracted resources.

Does this Figma MCP integration require any external dependencies?▼

No external dependencies are required to use this Figma MCP integration, allowing you to directly retrieve metadata, node details, and global variables without additional setup.

What is the best way to get Figma component information for development?▼

The best way to get Figma component information is using the Framelink MCP to retrieve structured layout and style data for a given fileKey, ensuring precise UI reproduction.

Why retrieve global variables when fetching Figma file data?▼

Retrieving global variables when fetching Figma file data enables design-token extraction and provides downstream processing context for styles across entire files and targeted nodes.