skills.rest
maplin-co
maplin-coOFFICIAL
Explore all skills by this author →
GitHub

figma

Fetch Figma design data and download SVG and PNG assets via MCP server.

Updated Jan 9, 2026
Search Tags:#design#ui#figma#mcp#design tokens#assets
One-click install
npx skills add https://github.com/maplin-co/ai-course --skill figma-maplin-co
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/maplin-co/ai-course/tree/main/.opencode/skill/figma
Command: npx skills add https://github.com/maplin-co/ai-course --skill figma-maplin-co

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill allows you to programmatically access and extract design information directly from Figma files, streamlining the UI implementation and design tokenization process.

Core Features & Use Cases

  • Fetch Design Data: Retrieve layout, styles, text content, and component structures from Figma files or specific frames.
  • Download Assets: Export SVG and PNG images directly from your Figma designs.
  • Use Case: Implement a UI component by fetching its design specifications from Figma, ensuring pixel-perfect accuracy and consistency.

Quick Start

Use the figma skill to fetch design data for the Figma file with key 'abc123xyz' and node ID '100-200'.

Frequently Asked Questions about figma

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

FAQPage Schema
How do I extract design tokens and layout data from Figma files programmatically?▼

You can extract design tokens and layout data by using a dedicated MCP server to fetch styles, text content, and component structures directly from specified Figma files and nodes. This provides programmatic access to your design data.

Can I download SVG and PNG assets directly from Figma frames for UI implementation?▼

Yes, you can download SVG and PNG assets directly from Figma frames. The Skill exports images from your designs to streamline UI implementation and ensure visual consistency without manual export steps.

Do I need a Figma API key to fetch component information through the MCP server?▼

Yes, fetching component information requires a FIGMA_API_KEY environment variable for authentication. This key allows the MCP server to securely access your Figma files and retrieve design specifications.

How do I retrieve design specifications for a specific frame using a Figma file key and node ID?▼

To retrieve design specifications, provide the Figma file key and the specific node ID. The system fetches layout, styles, and component information for that exact frame, ensuring pixel-perfect accuracy for UI implementation.

What is the best way to automate UI implementation using Figma design data?▼

Automating UI implementation is best achieved by programmatically fetching design specifications like layout, styles, and component structures from Figma. This ensures pixel-perfect accuracy and consistency directly from the source file.

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
johnnyelwailerjohnnyelwailer

figma-to-code

Convert Figma designs into React components with token-based styling.

Community
Intermediate
artosetrovartosetrov

figma-implement-design

Translate Figma frames into reusable frontend components aligned with design tokens.

Community
Advanced
CoRLab-TechCoRLab-Tech

figma-storybook-workflow

Implement Figma designs as Storybook components with exact specifications.

Official
Advanced