skills.rest
fanguyun
fanguyunCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma

Fetch Figma design context and translate nodes into production code.

Updated May 31, 2026
Search Tags:#translation#MCP server#Figma#design-to-code#automated design
One-click install
npx skills add https://github.com/fanguyun/SkillManager --skill figma-fanguyun
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/fanguyun/SkillManager/tree/main/figma
Command: npx skills add https://github.com/fanguyun/SkillManager --skill figma-fanguyun

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires figma-mcp-server, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the process of fetching design context, screenshots, variables, and assets from Figma, and translates Figma nodes into production code, streamlining the design-to-code workflow.

Core Features & Use Cases

  • Automated Design Context Fetching: Fetch structured design context, screenshots, variables, and assets from Figma.
  • Node Translation: Translate Figma nodes into production code compatible with your project's conventions.
  • Use Case: For a task involving Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting, this Skill can be triggered to automate the process.

Quick Start

Trigger the figma skill when you need to implement a Figma design into your project.

Frequently Asked Questions about figma

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

FAQPage Schema
How do I translate Figma nodes into production code automatically?▼

To translate Figma nodes into production code, this Skill automates fetching design context, screenshots, variables, and assets from Figma URLs and node IDs, converting them into code compatible with your project conventions.

How does design-to-code workflow automation work with Figma?▼

Design-to-code workflow automation works by using the Figma MCP server to fetch structured design context and assets from Figma, which are then automatically translated into production code without manual extraction.

Do I need a Figma MCP server to fetch design context and assets?▼

Yes, you need the Figma MCP server installed and configured, along with access to your Figma designs, to automate the retrieval of design context, screenshots, variables, and assets for code translation.

Can I use a Figma URL to implement design-to-code in my project?▼

Yes, you can trigger the design-to-code implementation using a Figma URL or node ID, which allows the Skill to automatically fetch the necessary design context and translate it into production code.

What is the best way to troubleshoot Figma MCP setup for design translation?▼

The best way to troubleshoot Figma MCP setup for design translation is to ensure the figma-mcp-server dependency is correctly installed and that your Figma designs are accessible, which the Skill is specifically designed to help automate and resolve.

Related Skills

Explore More Software Engineering Skills→
thanhquan3010thanhquan3010

figma

Convert Figma designs into React and Tailwind CSS code.

Community
Intermediate
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
pawan0631pawan0631

figma

Translate Figma designs into React and Tailwind UI code.

Community
Intermediate
nesihaver-ILnesihaver-IL

figma

Transform Figma designs into React components and design tokens.

Community
Intermediate