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.

About

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

Framework-specific code generation including React, Vue, and SwiftUI
Automated design token extraction for colors, spacing, and typography
High-resolution screenshot capture for documentation and review
Structural metadata extraction to navigate complex design hierarchies
1 GitHub stars
FigJam wireframe-to-code conversion for rapid prototyping

Use Cases

Generating visual documentation and technical specs with live design context
Building and maintaining synchronized design systems and component libraries
Implementing production-ready frontend components from Figma design specifications

About

Key Features

Framework-specific code generation including React, Vue, and SwiftUI
Automated design token extraction for colors, spacing, and typography
High-resolution screenshot capture for documentation and review
Structural metadata extraction to navigate complex design hierarchies
1 GitHub stars
FigJam wireframe-to-code conversion for rapid prototyping

Use Cases

Generating visual documentation and technical specs with live design context
Building and maintaining synchronized design systems and component libraries
Implementing production-ready frontend components from Figma design specifications