skills.rest
guicheffer
guichefferCOMMUNITY
Explore all skills by this author →
Website𝕏@guichefferGitHub

figma-researcher

Extract design specifications and implementation details from Figma designs via MCP.

3|Updated Dec 30, 2025
Search Tags:#design#research#implementation#figma#tokens#specs
One-click install
npx skills add https://github.com/guicheffer/devorch-cli --skill figma-researcher
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-researcher
Source: https://github.com/guicheffer/devorch-cli/tree/main/templates/skills/figma-dev-mode/figma-researcher
Command: npx skills add https://github.com/guicheffer/devorch-cli --skill figma-researcher

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers quickly gather implementation details from Figma designs, reducing the time spent on manual design spec extraction and auditing.

Core Features & Use Cases

  • Extract Design Specs: Get colors, spacing, typography, and layout information.
  • Audit Design Tokens: Map visual elements to design system tokens.
  • Verify Implementations: Ensure code matches the approved designs.
  • Use Case: When implementing a new UI component based on a Figma design, use this skill to extract all necessary properties like colors, spacing, and font details to ensure accurate development.

Quick Start

Use the figma-researcher skill to get design context for the Figma file at https://www.figma.com/file/example_file_id/example_node_id.

Frequently Asked Questions about figma-researcher

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

FAQPage Schema
How do I extract design specs from a Figma file for UI implementation?▼

To extract design specs from Figma, you need a specific Figma node ID and the Figma MCP server configured. This allows you to retrieve colors, spacing, typography, and layout information required for accurate UI implementation.

What is the best way to audit design tokens from Figma designs?▼

Auditing design tokens from Figma involves mapping visual elements to your design system. This requires using the Figma MCP server to pull specific node data, ensuring your coded components match the approved design properties.

Do I need a specific Figma node ID to extract implementation details?▼

Yes, you need a specific Figma node ID for targeted data retrieval. Extracting implementation details requires passing this node ID to the Figma MCP server to fetch the exact design specifications and properties.

Can I use this to verify if my code matches the approved Figma designs?▼

Yes, you can verify implementations against approved Figma designs. By extracting the exact colors, spacing, and layout details from the Figma file, you can ensure your code accurately reflects the visual specifications.

How does the Figma MCP server work with design spec extraction?▼

The Figma MCP server enables design spec extraction by acting as the bridge to fetch data. It requires configuration within your environment to access Figma files and retrieve targeted implementation details using specific node IDs.

Related Skills

Explore More Design & Creative Skills→
ChatAndBuildChatAndBuild
1

figma

Translate Figma design elements into production code from URLs and node IDs.

Official
Advanced
Envy-7zEnvy-7z

figma-to-flutter-widget

Converts Figma design specifications into Flutter widgets using existing design system components, styles, and tokens.

Community
Intermediate
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate
bigeasyfreemanbigeasyfreeman
2

figma-integration

Extract Figma design tokens and validate PRD specifications against current designs.

Community
Advanced