skills.rest
Kuass
KuassCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma

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

1|Updated Mar 4, 2026
Search Tags:#design#ui#api#figma#assets#developer
One-click install
npx skills add https://github.com/Kuass/kiro-gateway-plus --skill figma-kuass
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/Kuass/kiro-gateway-plus/tree/main/.opencode/skill/figma
Command: npx skills add https://github.com/Kuass/kiro-gateway-plus --skill figma-kuass

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill allows developers and designers to programmatically access and extract design data and assets directly from Figma files, streamlining the UI implementation and design token extraction process.

Core Features & Use Cases

  • Fetch Design Data: Retrieve detailed layout, style, and component information from Figma files and specific nodes.
  • Download Assets: Export images (SVG, PNG) from Figma designs to a local directory.
  • Use Case: Implement a new UI component by fetching its design specifications (dimensions, colors, typography) from Figma, or download all icons from a design library into your project's asset folder.

Quick Start

Use the figma skill to get design data for the Figma file with key 'abc123' and node ID '1234:5678'.

Frequently Asked Questions about figma

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

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

You can retrieve Figma layout, styles, and component details programmatically by specifying the file key and node ID to fetch design data via the Framelink MCP, streamlining your UI implementation process.

Can I download SVG and PNG assets directly from Figma designs?▼

Yes, you can download SVG and PNG images from Figma designs to a local directory path, allowing you to programmatically export and save design assets directly into your project's asset folder.

Do I need a Figma API key to fetch component specifications?▼

Yes, fetching component specifications requires the FIGMA_API_KEY environment variable for authentication, enabling the Skill to securely access your Figma files and extract design data.

What is the best way to get layout dimensions and typography from Figma for UI implementation?▼

The best way to get layout dimensions and typography for UI implementation is to fetch specific node data from Figma programmatically, retrieving detailed style and component information directly from the design file.

Does this Figma data extraction tool work with specific Figma file nodes?▼

Yes, this tool works with specific Figma file nodes, allowing you to target individual components by providing the file key and node ID to fetch localized layout, style, and component details.

Related Skills

Explore More Design & Creative Skills→
aydendenaydenden

figma

Retrieve Figma file structure, node details, and style metadata via REST API.

Community
Advanced
farmanlabfarmanlab
1

converting-figma-to-html

Convert Figma MCP design data into Tailwind-based HTML/CSS with data attributes.

Community
Advanced
KhoiwallKhoiwall

mockup-to-code

Convert UI mockups into React, Vue, or plain HTML code.

Community
Advanced
opzero1opzero1
3

figma-design

Extract design tokens, component details, and assets from Figma files.

Official
Intermediate