skills.rest
duongdev
duongdevCOMMUNITY
Explore all skills by this author →
Website𝕏@duongdevGitHub

figma-integration

Convert Figma designs into implementation-ready component specifications and styling guidelines.

9|1|Updated Nov 20, 2025
Search Tags:#figma#cache#design-to-code#design-tokens#component-detection#ccpm#spec-generation
One-click install
npx skills add https://github.com/duongdev/ccpm --skill figma-integration-duongdev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-integration
Source: https://github.com/duongdev/ccpm/tree/main/skills/figma-integration
Command: npx skills add https://github.com/duongdev/ccpm --skill figma-integration-duongdev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps transform Figma designs into implementation-ready specifications and cache design data for rapid iteration.

Core Features & Use Cases

  • Design metadata extraction: Detect Figma links and analyze frames, components, and tokens.
  • Spec generation: Produce component breakdowns, styling guidelines, and accessibility notes.
  • Cache management: Store design data for quick reuse in planning and implementation.

Quick Start

Attach a Figma link to a Linear task and run /ccpm:plan TASK-123 to generate design-backed specs.

Frequently Asked Questions about figma-integration

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

FAQPage Schema
How do I convert Figma designs into implementation-ready specifications?▼

Design-to-code conversion extracts Figma frames, components, and tokens, then generates detailed component specifications with styling guidelines, props, states, and accessibility notes. Attach a Figma link to a task and run the plan command to produce implementation-ready specs automatically.

Can I extract design tokens and component metadata from Figma automatically?▼

Yes. The Skill detects Figma links, analyzes frames and components, extracts design tokens, and generates component breakdowns with responsive rules and accessibility guidelines. Metadata is cached for rapid reuse across planning and implementation workflows.

What design data does Figma specification generation include?▼

Spec generation produces component detection results, prop definitions, state variations, styling guidelines, accessibility notes, responsive rules, and design token extraction. All data is cached to enable quick iteration during planning, refinement, approval, and design refresh cycles.

How does cache management speed up design-to-code workflows?▼

Cached design data eliminates repeated Figma analysis. The Skill stores extracted metadata, specs, and tokens across plan, refine, approve, and refresh operations, enabling instant access and reducing processing time for iterative design updates.

Do I need Figma links attached to tasks to generate design specifications?▼

Yes. The Skill automatically activates on Figma-related triggers when a Figma link is present. Attach the link to your Linear task, then run the plan command to trigger metadata extraction and specification generation.

Related Skills

Explore More Design & Creative Skills→
VitorAndTxrVitorAndTxr

figma-desktop

Extract Figma design data via REST API into structured JSON reports.

Community
Advanced
atovkatovk

component-builder

Generate UI component code for React, Vue, and Svelte frameworks.

Community
Basic
yonatangrossyonatangross
217

figma-design-handoff

Extract Figma design tokens and generate TypeScript component interfaces.

Community
Advanced
takapomtakapom

figma

Extract Figma design data and generate React Native components and design tokens.

Community
Advanced