MCP

bunx --bun @seed-design/mcp socket

# ComponentHandler Implementation Guide

## Initial Context Gathering

1. **Analyze Figma Selection**:
   - Use \`get_selection()\` to examine the currently selected node(s)
   - If no selection exists, prompt the user to select a specific component node
   - Verify the selected node is a component that can be transformed

2. **Retrieve Component Information**:
   - Use \`get_component_info(nodeId)\` to extract detailed information about the component
   - Collect the component key, all component properties, and variant definitions
   - Identify any nested components or instances that might need special handling

## Component Analysis and Planning

3. **Determine Component Structure**:
   - Analyze the component's visual structure, layout, and behavior patterns
   - If the target React component implementation is unknown, request an example or props interface
   - Identify which Figma properties should map to which React props

4. **Define Transformation Strategy**:
   - Plan how to handle variants, properties, nested components and children
   - Determine if additional utilities or helper functions are needed
   - Consider edge cases and special requirements for this component

## Implementation

5. **Create Component Handler**:
   - Implement the handler using the following pattern:

\`\`\`typescript
import {
  createElement,
  defineComponentHandler,
  type InferComponentDefinition,
  type react,
} from "@seed-design/figma";

// Define component properties based on Figma definition
export type ComponentNameProperties = InferComponentDefinition<{
  // Map all component properties from Figma
  // Example:
  "PropertyName": {
    type: "VARIANT" | "TEXT" | "BOOLEAN" | "INSTANCE_SWAP",
    variantOptions?: string[], // For VARIANT type
    defaultValue?: string | boolean
  }
}>;

// Create and export the handler
export const createComponentNameHandler = (_deps: react.ComponentHandlerDeps) => defineComponentHandler<ComponentNameProperties>(
  "component-key-from-figma", // Replace with actual component key
  ({ componentProperties: props }) => {
    // Transform Figma properties to React props
    // Use conditionals for variants and property handling
    
    return createElement(
      "ComponentName", // The React component name
      {
        // Map properties appropriately
        propName: props.PropertyName.value,
        // Add additional props as needed
      },
      [], // Nested elements if any (undefined or omitted if not needed)
      "Optional comment for accessibility or development notes, use sparingly"
    );
  }
);
\`\`\`

## Validation and Testing

6. **Verify Handler Functionality**:
   - Test the handler with different component variants
   - Ensure all properties are correctly mapped and transformed
   - Check that nested components and children are handled properly

## Best Practices

- Create reusable helper functions for common transformation patterns
- Handle edge cases and optional properties gracefully
- Add descriptive comments for complex transformations
- Consider performance implications for deeply nested components
- Ensure type safety throughout the transformation process

@CustomButton.tsx @ComponentHandlerRule.md CustomButton 컴포넌트의 ComponentHandler를 구현해주세요.

import {
  createElement,
  defineComponentHandler,
  type InferComponentDefinition,
  type react,
} from "@seed-design/figma";

export type CustomButtonProperties = InferComponentDefinition<{
  tone: {
    type: "VARIANT";
    variantOptions: ["neutral", "brand"];
  };
}>;

export const createCustomButtonHandler = (_deps: react.ComponentHandlerDeps) => defineComponentHandler<CustomButtonProperties>(
  "figma_component_key",
  ({ componentProperties: props }) => {
    const tone = props.tone.value.toLowerCase();
    
    return createElement(
      "CustomButton", 
      {
        tone
      }
    );
  }
)

import { type react } from "@seed-design/figma";
import { createCustomButtonHandler } from "./CustomButton";

export default {
  extend: {
    componentHandlers: [
      createCustomButtonHandler,
    ]
  },
} satisfies react.CreatePipelineConfig;