figma-component-generator

name	figma-component-generator
description	Generates detailed, Figma-ready component specifications from requirements. Produces comprehensive specs covering all states, variants, design token mappings, interaction definitions, responsive behavior, and accessibility requirements. Specializes in clinical trial EDC components such as CRF fields, visit schedule cells, query badges, and audit trail entries.
argument-hint	[component-name]

Figma Component Generator

Purpose

Produce a complete component specification document that a designer can implement directly in Figma without ambiguity. Every state, variant, token, interaction, and edge case is defined up front, eliminating back-and-forth during design implementation.

Inputs

• Component name: The name of the component to specify.
• Purpose: What the component does and where it is used (provided by user or inferred).
• Variants needed: Optional list of variants; if not provided, infer from the component type.

Workflow

Step 1: Gather Context

1. Search the existing codebase for any prior implementation or reference to this component.
2. Search for design system documentation or token files.
3. If the component relates to a Jira story, use mcp__claude_ai_Atlassian__getJiraIssue to pull requirements.
4. If design system docs are in Confluence, use mcp__claude_ai_Atlassian__getConfluencePage to retrieve them.
5. Ask the user for any additional context not found.

Step 2: Define the Component Anatomy

Break the component into its structural parts:

Component: CRF Text Field
Anatomy:
  - Container (outer wrapper)
    - Label Row
      - Label text
      - Required indicator (asterisk)
      - Help icon (tooltip trigger)
    - Input Container
      - Input field
      - Unit label (optional, e.g., "mmHg")
      - Clear button (optional)
    - Feedback Row
      - Help text OR Error message OR Warning message
      - Character count (optional)
    - Meta Row (optional)
      - Query indicator icon
      - SDV indicator icon
      - Audit trail link

Include a text-based layout diagram:

+------------------------------------------+
| Label Text *                         [?] |
| +--------------------------------------+ |
| | Input value                    | unit | |
| +--------------------------------------+ |
| Help text or error message        0/200  |
| [Q] [SDV] [Audit]                        |
+------------------------------------------+

Step 3: Define All States

For each component, define every possible visual state:

Core States:

State	Description	Visual Treatment
Default	Empty, ready for input	Gray border, placeholder text
Focused	User has clicked into the field	Primary blue border (2px), subtle blue glow
Filled	Contains user-entered value	Dark text, gray border
Hover	Mouse cursor over the field	Slightly darker border
Disabled	Cannot be interacted with	Gray background, 50% opacity, no cursor
Read-Only	Displays value but cannot be edited	No border, value displayed as text, gray background
Error	Validation has failed	Red border, red error icon, red error text below
Warning	Soft check triggered	Amber border, amber warning icon, amber text below
Loading	Value being loaded or validated	Skeleton pulse animation or spinner in field
Success	Value accepted/verified	Green checkmark icon, brief green border flash

Clinical Trial Specific States:

State	Description	Visual Treatment
Queried	Open query on this field	Red query badge icon to the left of the field
Query Answered	Query has been responded to	Yellow query badge icon
Query Closed	Query resolved	Green query badge icon (fades after 5s)
SDV Verified	Source data verified by monitor	Blue checkmark SDV icon
SDV Unverified	Not yet source data verified	Gray circle SDV icon
Locked	Form is signed/locked	Read-only appearance + lock icon
Frozen	Data is frozen for analysis	Read-only appearance + snowflake icon

Step 4: Define All Variants

Size Variants:

Size	Field Height	Font Size	Label Size	Padding
Small (sm)	32px	14px	12px	6px 8px
Medium (md)	40px	14px	14px	8px 12px
Large (lg)	48px	16px	14px	12px 16px

Default: Medium (md).

Type Variants (for CRF fields):

Type	Input Element	Additional Elements
Text	<input type="text">	Character count (optional)
Numeric	<input type="text" inputmode="numeric">	Unit label, range hint
Date	Date picker input	Calendar icon, format hint (DD-MMM-YYYY)
Dropdown	Custom select	Chevron icon, option list overlay
Checkbox	Checkbox input	Checkmark icon within box
Radio	Radio group	Filled circle indicator
Textarea	<textarea>	Character count, resize handle
File Upload	Drop zone / file input	Upload icon, file list, progress bar

Theme Variants (if applicable):

Theme	Use Case	Background	Border
Default	Standard data entry	White	Gray-200
Highlighted	Flagged for review	Yellow-50	Yellow-300
Verified	SDV verified fields	Blue-50	Blue-200

Step 5: Map Design Tokens

Provide exact token references for every visual property:

tokens:
  container:
    background:
      default: color.neutral.white        # #FFFFFF
      disabled: color.neutral.100         # F3F4F6
      readOnly: color.neutral.50          # F9FAFB
      error: color.red.50                 # FEF2F2
      warning: color.amber.50            # FFFBEB
    border:
      default: color.neutral.200          # E5E7EB
      hover: color.neutral.300            # D1D5DB
      focused: color.primary.500          # 2563EB
      error: color.red.500               # EF4444
      warning: color.amber.500           # F59E0B
      disabled: color.neutral.200         # E5E7EB
    borderWidth:
      default: border.width.1             # 1px
      focused: border.width.2             # 2px
    borderRadius: border.radius.md        # 6px
    shadow:
      focused: shadow.ring.primary        # 0 0 0 3px rgba(37,99,235,0.1)
                   

  
    
                 
                
                      
                     
             
              
                    

  
                       
                     
                    

  
    
                 
             
                
    
                           
                           
                         
             
    
                   
                     
                     

  
                   
                     
                       

  
                       
                     
             
                       
              

  
                    
                     
             
                       
            

Step 6: Define Interaction Specifications

Transitions and Animations:

Interaction	Property	Duration	Easing	Details
Focus in	border-color, box-shadow	150ms	ease-in-out	Border transitions to primary, ring appears
Focus out	border-color, box-shadow	150ms	ease-in-out	Border returns to default, ring fades
Hover in	border-color	100ms	ease-in	Border slightly darkens
Hover out	border-color	100ms	ease-out	Border returns
Error appear	opacity, transform	200ms	ease-out	Error text fades in and slides down 4px
Error dismiss	opacity, transform	150ms	ease-in	Error text fades out and slides up
Loading pulse	opacity	1500ms	ease-in-out	Skeleton shimmer animation, infinite
Success flash	border-color	300ms	ease-out	Green border flash, then return to default

Keyboard Interactions:

Key	Action
Tab	Move focus to next field
Shift+Tab	Move focus to previous field
Enter	Submit form (if last field) or move to next field
Escape	Clear field / close dropdown / cancel edit
Arrow Up/Down	Navigate dropdown options
Space	Toggle checkbox / select radio

Mouse Interactions:

Action	Result
Click field	Focus the input
Click label	Focus the associated input
Click help icon	Show tooltip popover
Click clear button	Clear field value, maintain focus
Click query icon	Open query detail panel
Click SDV icon	Toggle SDV status (if authorized)
Click audit link	Open audit trail sidebar

Step 7: Define Responsive Behavior

Breakpoint	Behavior
Mobile (< 640px)	Full width, label above input, meta row wraps
Tablet (640-1023px)	Full width or half width in 2-column form grid
Desktop (1024-1279px)	Follows form grid (1, 2, or 3 columns as configured)
Wide (>= 1280px)	Same as desktop, max field width 600px

Label positioning:

• Mobile/Tablet: Always above the input (stacked).
• Desktop/Wide: Above by default; optionally left-aligned (label width 200px) for dense forms.

Step 8: Define Accessibility Requirements

accessibility:
  role: "textbox" (implicit from <input>)
  aria:
    - aria-label: Set if no visible label (rare)
    - aria-labelledby: Points to label element ID
    - aria-describedby: Points to help text or error message ID
    - aria-required: "true" if field is required
    - aria-invalid: "true" when validation error is present
    - aria-errormessage: Points to error text element ID
    - aria-disabled: "true" when 
        
  
          
            
          
  
         
          
           
         
             
  
        
             

Step 9: Generate the Specification Document

Output the complete specification as a structured document:

# Component Specification: [Component Name]

## Overview
[One paragraph describing purpose and usage context]

## Anatomy
[Structural breakdown with layout diagram]

## States
[Table of all states with visual descriptions]

## Variants
[Tables for size, type, and theme variants]

## Design Tokens
[Complete token mapping in YAML]

## Interactions
[Animation, keyboard, and mouse interaction tables]

## Responsive Behavior
[Breakpoint behavior table]

## Accessibility
[ARIA attributes, focus management, contrast requirements]

## Usage Guidelines
- DO: [Correct usage examples]
- DON'T: [Anti-pattern examples]

## Clinical Trial Context
[EDC-specific usage notes and regulatory considerations]

Clinical Trial EDC Component Templates

When one of these components is requested, use the detailed template as a starting point:

CRF Field Types

• Text Field: Free text entry with optional character limit.
• Numeric Field: Number entry with unit label and range validation display.
• Date Field: Date picker with DD-MMM-YYYY format enforcement.
• Dropdown/Select: Single or multi-select from coded list.
• Checkbox Group: Multiple selection from a set of options.
• Radio Group: Single selection from mutually exclusive options.
• Textarea: Multi-line text for narrative fields (AE descriptions, medical history).
• File Upload: Document attachment with type/size restrictions.
• Lab Value Field: Numeric with normal range display and out-of-range flagging.

Visit Schedule Cell

• States: Scheduled, In Progress, Complete, Overdue, Missed, Not Required.
• Click behavior: Navigate to CRF list for that subject-visit.
• Hover: Show visit window dates and completion percentage.
• Badge: Number of incomplete CRFs.

Query Badge

• States: Open (red), Answered (amber), Closed (green).
• Size variants: Inline (next to field), Count (on tab/section header).
• Click behavior: Open query detail panel.
• Tooltip: Query text preview on hover.

Signature Button

• States: Ready to Sign, Signing (loading), Signed, Signature Broken.
• Click behavior: Open e-signature modal.
• Display: Signer name, date/time, meaning statement after signing.

Audit Trail Entry

• Layout: Timestamp | User | Action | Field | Old Value | New Value | Reason.
• Grouping: By date, by field, by user.
• Read-only presentation (no interactive elements).

Status Indicator

• Types: Subject status, CRF status, Visit status, Query status, Study status.
• Visual: Colored dot + text label.
• Consistent color mapping across the application.

Quality Checklist

• Every state is defined with specific visual properties.
• Every variant combination is specified.
• All design tokens reference the token system (not raw values).
• Interaction specifications include timing and easing.
• Responsive behavior is defined for all breakpoints.
• Accessibility requirements are complete and specific.
• Usage guidelines include do/don't examples.
• Clinical trial regulatory context is addressed.
• The spec is detailed enough for a designer to implement without questions.