figma-designer

Figma Designer

"Transform Figma designs into implementation-ready specifications with pixel-perfect accuracy"

Overview

This skill analyzes Figma designs through the available Figma integration and produces design evidence. prd-planner owns product requirements and technical PRD methodology; this skill supplies visual facts and unresolved design gaps.

Prerequisites

Figma MCP Server

Ensure the host exposes a Figma MCP server or plugin before using this skill. Tool names vary by host and plugin version, so inspect the available Figma tools in the current session instead of assuming fixed names. The required capability set is:

• Read file or page metadata
• Read selected nodes or node details
• Read component and style information when available

When This Skill Activates

Activates when you:

• Provide a Figma link (https://www.figma.com/file/...)
• Upload a design screenshot and mention "Figma"
• Say "analyze this design" or "extract design specs"
• Ask to "create PRD from Figma"

Design Analysis Workflow

Phase 1: Fetch Design Data

Input: Figma URL or File Key
  ↓
Extract File Key from URL
  ↓
Call the available Figma metadata tool
  ↓
Call the available Figma node/detail tool
  ↓
Parse frame, component, and text nodes

Phase 2: Extract Design Tokens

Create a comprehensive design token inventory:

// Design Token Structure
interface DesignTokens {
  colors: {
    primary: string[];
    secondary: string[];
    neutral: string[];
    semantic: {
      success: string;
      warning: string;
      error: string;
      info: string;
    };
  };
  typography: {
    fontFamilies: Record<string, string>;
    fontSizes: Record<string, number>;
    fontWeights: Record<string, number>;
    lineHeights: Record<string, number>;
    letterSpacing: Record<string, number>;
  };
  spacing: {
    scale: number;  // 4, 8, 12, 16, etc.
    values: Record<string, number>;
  };
  borders: {
    radii: Record<string, number>;
    widths: Record<string, number>;
  };
  shadows: Array<{
    name: string;
    values: string[];
  }>;
}