skills.rest
stagewise-io
stagewise-ioOFFICIAL
Explore all skills by this author →
Website𝕏@stagewise_ioGitHub

figma

Accesses Figma designs via REST API and monitors real-time selections with Chrome DevTools Protocol.

6.8k|508|Updated Apr 26, 2025
Search Tags:#design#development#api#components#figma#assets#cdp
One-click install
npx skills add https://github.com/stagewise-io/stagewise --skill figma-stagewise-io
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/stagewise-io/stagewise/tree/main/apps/browser/bundled/plugins/figma
Command: npx skills add https://github.com/stagewise-io/stagewise --skill figma-stagewise-io

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill bridges the gap between design and development by providing seamless integration with Figma, allowing developers to interact with designs directly within their workflow.

Core Features & Use Cases

  • Figma REST API Access: Retrieve design details, components, and export assets.
  • Real-time Selection Monitoring: Track user selections within Figma tabs via CDP for immediate context.
  • Interactive UI: Display selected nodes as live badges in a dedicated app for quick reference.
  • Use Case: When a designer asks to export a specific set of components, this Skill can use the API to fetch them and the selection monitoring to ensure the correct elements are targeted.

Quick Start

Use the figma skill to get the current selection from the Figma tab.

Frequently Asked Questions about figma

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

FAQPage Schema
How do I export Figma components and assets directly within my development workflow?▼

You can export Figma components and assets by using the Skill to access the Figma REST API. This integration retrieves design details and visual assets directly, bridging the gap between design and development without leaving your environment.

How does real-time selection monitoring work with Figma designs?▼

Real-time selection monitoring uses the Chrome DevTools Protocol (CDP) to track user selections within open Figma tabs. It displays selected nodes as live badges in a dedicated app, providing immediate context for design-to-development workflows.

Do I need a Figma Personal Access Token to retrieve file structures and components?▼

Yes, accessing Figma file structures, components, and visual assets requires authentication via a Figma Personal Access Token. This token authorizes the REST API requests needed to fetch design details.

Can I fetch design details from Figma through the REST API?▼

Yes, you can fetch design details through the Figma REST API. The Skill enables programmatic interaction with file structures and components, allowing developers to retrieve and export necessary design elements directly.

What's the best way to ensure the correct Figma elements are targeted when exporting components?▼

The best way to target correct elements is combining the Figma REST API with real-time selection monitoring via CDP. This ensures the specific nodes a user selects in the Figma tab are accurately fetched and exported.

Why use Chrome DevTools Protocol for Figma integration?▼

Chrome DevTools Protocol (CDP) is used for Figma integration to monitor real-time selections within Figma tabs. It enables interactive feedback by displaying selected nodes as live badges, ensuring immediate design context.

Related Skills

Explore More Design & Creative Skills→
tanaka-mambingetanaka-mambinge

electron

Automate Electron desktop apps via Chrome DevTools Protocol.

Community
Intermediate
iressiress
1

figma-to-ids

Translates Figma designs into React/TypeScript code with IDS components and tokens.

Official
Intermediate
ajilantonyajilantony

chrome-devtools

Automate browser interactions and inspections via the Chrome DevTools Protocol.

Community
Advanced
stellarlinkcostellarlinkco
2.7k

browser

Automate Chrome browser interactions via the Chrome DevTools Protocol.

Official
Intermediate