skills.rest
Khoiwall
KhoiwallCOMMUNITY
Explore all skills by this author →
GitHub

figma

Fetch Figma design data and assets via Framelink MCP.

Updated Feb 5, 2026
Search Tags:#ui#components#figma#mcp#assets#tokens#design-data
One-click install
npx skills add https://github.com/Khoiwall/be_vidify --skill figma-khoiwall
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
thesammykinsthesammykins

figma-implement-design

Translate Figma design nodes into React UI code using design tokens.

Community
Advanced
pelcherspelchers

integrating-figma

Automate Figma design-to-code workflows by reading files, exporting assets, and extracting tokens.

Community
Advanced
LAF-USLAF-US

figma-implement-design

Convert Figma frames or components into reusable UI code with design tokens.

Official
Advanced
Pythagora-ioPythagora-io
9

figma

Extract structure, components, styles, and assets from Figma files via the REST API.

Official
Intermediate