Figma MCP Server Guide

```
Sử dụng Figma MCP server để trích xuất các đặc tả thiết kế từ file Figma [FIGMA_FILE_URL] cho component [COMPONENT_NAME]. Tạo một bản triển khai React component khớp với các design token (màu sắc, typography, khoảng cách) và bao gồm các trạng thái tương tác (hover, active). Đảm bảo đầu ra tuân thủ các quy chuẩn của [DESIGN_SYSTEM_FRAMEWORK] và bao gồm các kiểu TypeScript. Chia sẻ mã nguồn dưới định dạng sẵn sàng để sao chép.
```
Copy

```
Dựa trên file Figma `https://www.figma.com/file/abc123/Primary-Button?node-id=123:456` và component `PrimaryButton`, dưới đây là bản triển khai React khớp với hệ thống thiết kế (design system):

```tsx
import React from 'react';

type ButtonProps = {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
};

const PrimaryButton: React.FC<ButtonProps> = ({
  label,
  onClick,
  variant = 'primary',
  size = 'md',
  disabled = false,
}) => {
  const baseClasses = 'rounded-lg font-semibold transition-all duration-200';
  const variantClasses = {
    primary: 'bg-blue-500 text-white hover:bg-blue-600 active:bg-blue-700',
    secondary: 'bg-gray-100 text-gray-800 hover:bg-gray-200 active:bg-gray-300',
  };
  const sizeClasses = {
    sm: 'px-3 py-1 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg',
  };

  return (
    <button
      className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
      onClick={onClick}
      disabled={disabled}
    >
      {label}
    </button>
  );
};

export default PrimaryButton;
```

Các design token được sử dụng:
- Màu sắc: Blue-500 (#3B82F6), Gray-100 (#F3F4F6)
- Typography: Inter (font-family), 16px (kích thước cơ sở)
- Khoảng cách (Spacing): 1rem (padding), 0.5rem (gap)
- Trạng thái tương tác: Hover (tông màu tối hơn), Active (tông màu tối nhất)

Bản triển khai này tuân thủ các đặc tả component `Button` của hệ thống thiết kế và bao gồm các kiểu TypeScript để mang lại trải nghiệm lập trình tốt hơn.
```