/frame

Variant Extraction

Reference for Frame's variants recipe. Extract Component Set variants from Figma into structured prop/state matrices, identify defaults, and detect missing combinations.

1. Discovery Workflow

search_design_system  → find Component Sets in connected libraries
get_design_context    → fetch variant property + value matrix
get_metadata          → identify Variant property names and types

Key concepts:

• Component Set: parent node containing all variants
• Variant: child component with property=value combination (e.g., state=hover, size=md)
• Variant Property: typed dimension (e.g., state, size, disabled)
• Property Value: enum value or boolean

2. Property Type Classification

Boolean properties

• Property name contains binary semantics: disabled, loading, selected, checked
• Two values typically True / False
• Output: TS interface as disabled?: boolean

Enum properties

• Multiple discrete values: size: sm | md | lg | xl, state: default | hover | active, variant: primary | secondary | ghost
• Output: TS interface as size?: 'sm' | 'md' | 'lg' | 'xl'

Naming convention

Figma convention: kebab-case for property names + kebab-case or Sentence Case for values TS convention: camelCase for prop names + value-as-string-literal

3. Default Variant Identification

Figma marks default via:

• First variant in Component Set (top-left position)
• Component Description marking "Default"
• Heuristic: variant matching all-default values (state=default, size=md, disabled=False)

Output: spread defaults in TS:

const defaultProps: Partial<ButtonProps> = {
  state: 'default',
  size: 'md',
  disabled: false,
};

4. Missing State Detection

Construct Cartesian product of all property values.

• Total possible combinations = product of value counts
• Actual variants in file = N
• Missing = combinations not present

size: sm | md | lg          (3 values)
state: default | hover | active | disabled  (4 values)
variant: primary | secondary  (2 values)

Total possible: 3 × 4 × 2 = 24
Actual: 18 (e.g., missing all `disabled` combinations for `secondary`)
Missing: 6

Output format

component: Button
total_possible: 24
actual_variants: 18
missing:
  - { size: sm,  state: disabled, variant: secondary }
  - { size: md,  state: disabled, variant: secondary }
  - { size: lg,  state: disabled, variant: secondary }
  - { size: sm,  state: hover,    variant: secondary }
  - { size: md,  state: hover,    variant: secondary }
  - { size: lg,  state: hover,    variant: secondary }

handoff_recommendation: "Designer review — disabled+secondary, hover+secondary states absent"

5. TypeScript Output

// Generated by Frame from Component Set: Button
export interface ButtonProps {
  state?: 'default' | 'hover' | 'active' | 'disabled';
  size?: 'sm' | 'md' | 'lg';
  variant?: 'primary' | 'secondary';
  disabled?: boolean;
  children?: React.ReactNode;
}

export const ButtonDefaults: Required<Pick<ButtonProps, 'state' | 'size' | 'variant'>> = {
  state: 'default',
  size: 'md',
  variant: 'primary',
};

6. Common Pitfalls

7. Decision Walkthrough Template

Component Set: ____________
Properties:
  - ____ (boolean / enum, values: ____)
  - ____ (boolean / enum, values: ____)
  - ____ (boolean / enum, values: ____)

Total possible combinations: ____
Actual variants in file:     ____
Missing combinations:        ____

Default variant: { ____ }

Output:
  □ TypeScript prop interface
  □ Default props object
  □ Missing-state report
  □ Designer review recommendation (if missing > 0)

Handoff:
  □ Artisan (production component impl)
  □ Vitrine (Storybook stories per variant)

8. References

• Figma Variant property guide
• Figma MCP get_design_context schema
• Code Connect template authoring (frame components)
• Frame's code-connect recipe (reverse direction: code → Figma mapping)