Does this work with Figma in the browser?

No, this specific skill is designed to interface directly with the Figma desktop application running on your local machine.

Can I use this for FigJam boards?

Yes, there is a dedicated tool specifically for FigJam that handles wireframes and sticky notes differently than standard design files.

What are the technical requirements?

You need the Figma desktop app, Node.js 18+, mcp2rest running on localhost, and the figma-desktop server loaded into mcp2rest.

Which frameworks are supported for code generation?

It supports multiple frameworks including React, Vue, SwiftUI, and Svelte, along with language preferences like TypeScript and Swift.

How do I find the correct node ID for a component?

You can copy the ID from a Figma URL (replace the hyphen with a colon) or use the included metadata tool to browse the design structure.

Figma Desktop for Claude

Name: Figma Desktop for Claude
Author: ulasbilgen

byulasbilgen

•

Design Tools

Bridges the gap between design and development by extracting production-ready UI code, design tokens, and visual assets directly from the Figma desktop app.

The Figma Desktop Skill empowers developers to streamline the design-to-code workflow by interacting with live Figma files through the desktop application. It automates the extraction of framework-specific UI components for React, Vue, SwiftUI, and more, while also retrieving precise design tokens such as colors, typography, and spacing. By eliminating manual value copying and visual guessing, this skill ensures higher implementation fidelity and accelerates the creation of design-system-aligned component libraries directly within the Claude Code environment.

Key Features

01Framework-specific code generation including React, Vue, and SwiftUI

02Automated design token extraction for colors, spacing, and typography

03High-resolution screenshot capture for documentation and review

04Structural metadata extraction to navigate complex design hierarchies

051 GitHub stars

06FigJam wireframe-to-code conversion for rapid prototyping

Use Cases

01Generating visual documentation and technical specs with live design context

02Building and maintaining synchronized design systems and component libraries

03Implementing production-ready frontend components from Figma design specifications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ulasbilgen/mcp-skills-plugins mcp-figma-desktop

For use in Claude.ai and ChatGPT

Download Skill