1. 引言

在现代前端开发中，设计稿与代码之间的鸿沟一直是团队协作的痛点。TRAE SOLO 作为一款强大的 AI 编程助手，提供了直接从 Figma 设计稿导入并生成代码的能力，大幅缩短了从设计到开发的距离。本文将详细介绍 TRAE SOLO 的 Figma 导入功能，并通过丰富的代码实例展示如何高效地将设计稿转化为可运行的代码。

2. 环境准备

在开始之前，请确保你已经完成以下准备工作：

• 安装 TRAE SOLO 最新版本（v2.0+）
• 拥有 Figma 账号并安装了 TRAE SOLO Figma 插件
• 准备一个包含设计稿的 Figma 项目

2.1 安装 TRAE SOLO Figma 插件

打开 Figma，进入 Community > Plugins，搜索 "TRAE SOLO" 并安装。安装完成后，你可以在 Figma 的插件菜单中找到它。

2.2 配置 TRAE SOLO 项目

在 TRAE SOLO 中创建一个新项目，或打开已有项目。确保项目设置中启用了 Figma 导入功能：

// trae-solo.config.js
module.exports = {
  figma: {
    enabled: true,
    token: process.env.FIGMA_ACCESS_TOKEN,
    fileId: "YOUR_FIGMA_FILE_ID",
    outputDir: "./src/components",
    framework: "react", // 支持 react, vue, svelte
    styling: "tailwind", // 支持 tailwind, css-modules, styled-components
  },
};

3. 基础导入流程

本节将演示从 Figma 导入一个简单的按钮组件，并生成对应的 React 代码。

3.1 在 Figma 中选择图层

在 Figma 中选中你要导入的图层或组件，然后运行 TRAE SOLO 插件。插件会弹出一个对话框，显示选中图层的详细信息：

{
  "selectedLayers": [
    {
      "id": "1:23",
      "name": "Primary Button",
      "type": "COMPONENT",
      "width": 160,
      "height": 48,
      "fills": [{ "type": "SOLID", "color": "#1890FF" }],
      "cornerRadius": 6,
      "children": [
        {
          "id": "1:24",
          "name": "Label",
          "type": "TEXT",
          "characters": "点击登录",
          "fontSize": 16,
          "fontWeight": 500,
          "color": "#FFFFFF"
        }
      ]
    }
  ]
}

3.2 生成代码

点击 "生成代码" 按钮，TRAE SOLO 会根据你的配置生成对应的组件代码：

// src/components/PrimaryButton.tsx
import React from "react";

interface PrimaryButtonProps {
  label?: string;
  onClick?: () => void;
  disabled?: boolean;
}

const PrimaryButton: React.FC<PrimaryButtonProps> = ({
  label = "点击登录",
  onClick,
  disabled = false,
}) => {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`
        inline-flex items-center justify-center
        px-6 py-3 rounded-md text-base font-medium
        transition-colors duration-200
        ${disabled
          ? "bg-gray-300 text-gray-500 cursor-not-allowed"
          : "bg-[#1890FF] text-white hover:bg-[#40A9FF] active:bg-[#096DD9]"
        }
      `}
    >
      {label}
    </button>
  );
};

export default PrimaryButton;

4. 复杂布局导入

实际项目中，我们往往需要导入包含多个子组件的复杂布局。以下示例展示如何导入一个登录页面。

4.1 Figma 设计稿结构

假设 Figma 中有一个登录页面，包含以下层级：

LoginPage (Frame)
├── Header (Frame)
│   ├── Logo (Vector)
│   └── Title (Text: "欢迎回来")
├── Form (Frame)
│   ├── EmailInput (Input)
│   ├── PasswordInput (Input)
│   └── SubmitButton (Component: PrimaryButton)
└── Footer (Frame)
    ├── RegisterLink (Text: "没有账号？立即注册")
    └── Divider (Line)

4.2 导入并生成页面组件

选中整个 LoginPage 框架，点击导入。TRAE SOLO 会生成以下代码：

// src/pages/LoginPage.tsx
import React, { useState } from "react";
import PrimaryButton from "../components/PrimaryButton";

const LoginPage: React.FC = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = () => {
    console.log("登录请求", { email, password });
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="w-full max-w-md p-8 bg-white rounded-xl shadow-lg">
        {/* Header */}
        <div className="text-center mb-8">
          <img src="/logo.svg" alt="Logo" className="mx-auto h-12 w-auto" />
          <h1 className="mt-4 text-2xl font-bold text-gray-900">
            欢迎回来
          </h1>
        </div>

        {/* Form */}
        <form className="space-y-6" onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
          <div>
            <label htmlFor="email" className="block text-sm font-medium text-gray-700">
              邮箱地址
            </label>
            <input
              id="email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-[#1890FF] focus:border-[#1890FF]"
              placeholder="请输入邮箱"
              required
            />
          </div>

          <div>
            <label htmlFor="password" className="block text-sm font-medium text-gray-700">
              密码
            </label>
            <input
              id="password"
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-[#1890FF] focus:border-[#1890FF]"
              placeholder="请输入密码"
              required
            />
          </div>

          <PrimaryButton label="登录" onClick={handleSubmit} />
        </form>

        {/* Footer */}
        <div className="mt-6 text-center">
          <a href="/register" className="text-sm text-[#1890FF] hover:text-[#40A9FF]">
            没有账号？立即注册
          </a>
          <hr className="mt-4 border-gray-200" />
        </div>
      </div>
    </div>
  );
};

export default LoginPage;

5. 样式映射与自定义

TRAE SOLO 支持将 Figma 的样式属性映射到不同的 CSS 方案。以下示例展示如何自定义样式映射规则。

5.1 自定义样式映射配置

// trae-solo.config.js
module.exports = {
  figma: {
    // ... 其他配置
    styleMapping: {
      // 颜色映射
      colors: {
        primary: "#1890FF",
        success: "#52C41A",
        warning: "#FAAD14",
        error: "#FF4D4F",
        textPrimary: "#262626",
        textSecondary: "#8C8C8C",
      },
      // 字体映射
      typography: {
        "Heading 1": { fontSize: 28, fontWeight: 700, lineHeight: 1.4 },
        "Heading 2": { fontSize: 24, fontWeight: 600, lineHeight: 1.4 },
        "Body": { fontSize: 14, fontWeight: 400, lineHeight: 1.6 },
        "Caption": { fontSize: 12, fontWeight: 400, lineHeight: 1.5 },
      },
      // 间距映射
      spacing: {
        xs: 4,
        sm: 8,
        md: 16,
        lg: 24,
        xl: 32,
      },
    },
  },
};

5.2 使用 CSS Modules 方案

如果你偏好 CSS Modules，可以在配置中切换：

// trae-solo.config.js
module.exports = {
  figma: {
    styling: "css-modules",
    // ...
  },
};

生成的代码将使用 CSS Modules 导入样式：

// src/components/PrimaryButton.tsx (CSS Modules 版本)
import React from "react";
import styles from "./PrimaryButton.module.css";

interface PrimaryButtonProps {
  label?: string;
  onClick?: () => void;
  disabled?: boolean;
}

const PrimaryButton: React.FC<PrimaryButtonProps> = ({
  label = "点击登录",
  onClick,
  disabled = false,
}) => {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`${styles.button} ${disabled ? styles.disabled : styles.active}`}
    >
      {label}
    </button>
  );
};

export default PrimaryButton;

/* src/components/PrimaryButton.module.css */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.2s, opacity 0.2s;
  cursor: pointer;
  border: none;
}

.active {
  background-color: #1890FF;
  color: #FFFFFF;
}

.active:hover {
  background-color: #40A9FF;
}

.active:active {
  background-color: #096DD9;
}

.disabled {
  background-color: #D9D9D9;
  color: #8C8C8C;
  cursor: not-allowed;
}

6. 响应式适配

Figma 设计稿通常包含多个断点设计。TRAE SOLO 支持导入多断点设计并生成响应式代码。

6.1 配置响应式断点

// trae-solo.config.js
module.exports = {
  figma: {
    responsive: {
      breakpoints: {
        mobile: 375,
        tablet: 768,
        desktop: 1280,
      },
      defaultBreakpoint: "desktop",
    },
  },
};

6.2 生成的响应式组件

// src/components/ResponsiveCard.tsx
import React from "react";

interface ResponsiveCardProps {
  title: string;
  description: string;
  imageUrl: string;
}

const ResponsiveCard: React.FC<ResponsiveCardProps> = ({
  title,
  description,
  imageUrl,
}) => {
  return (
    <div className="
      flex flex-col
      md:flex-row
      bg-white rounded-lg shadow-md overflow-hidden
      max-w-sm md:max-w-2xl lg:max-w-4xl
      mx-auto
    ">
      {/* 图片区域 */}
      <div className="
        w-full md:w-1/3
        h-48 md:h-auto
        bg-cover bg-center
      " style={{ backgroundImage: `url(${imageUrl})` }} />

      {/* 内容区域 */}
      <div className="p-4 md:p-6 lg:p-8 flex-1">
        <h3 className="text-lg md:text-xl lg:text-2xl font-bold text-gray-900">
          {title}
        </h3>
        <p className="mt-2 text-sm md:text-base text-gray-600">
          {description}
        </p>
        <button className="
          mt-4 px-4 py-2
          text-sm md:text-base
          bg-[#1890FF] text-white rounded-md
          hover:bg-[#40A9FF] transition-colors
        ">
          了解更多
        </button>
      </div>
    </div>
  );
};

export default ResponsiveCard;

7. 高级技巧与最佳实践

7.1 组件复用与命名

在 Figma 中合理命名图层和组件，可以显著提升生成代码的可读性：

• 使用 PascalCase 命名组件（如 PrimaryButton）
• 使用 camelCase 命名实例（如 emailInput）
• 避免使用默认名称（如 "Frame 1"、"Rectangle 2"）

7.2 自动生成 TypeScript 类型

TRAE SOLO 可以根据 Figma 组件的属性自动生成 TypeScript 接口：

// 自动生成的类型定义
interface UserProfileCardProps {
  /** 用户头像 URL */
  avatarUrl: string;
  /** 用户昵称 */
  username: string;
  /** 用户简介 */
  bio?: string;
  /** 关注数 */
  followersCount: number;
  /** 是否已关注 */
  isFollowed: boolean;
  /** 关注/取消关注回调 */
  onFollowToggle?: () => void;
}

7.3 增量导入与差异更新

当 Figma 设计稿更新后，TRAE SOLO 支持增量导入，只更新发生变化的组件：

# 命令行增量导入
trae-solo figma:import --file-id "YOUR_FILE_ID" --diff-only

// 在代码中调用增量导入 API
import { figmaImport } from "@trae-solo/figma";

const result = await figmaImport({
  fileId: "YOUR_FILE_ID",
  diffOnly: true,
  lastSync: "2025-06-01T10:00:00Z", // 上次同步时间
});

console.log(`更新了 ${result.updatedComponents.length} 个组件`);
console.log(`新增了 ${result.newComponents.length} 个组件`);
console.log(`删除了 ${result.deletedComponents.length} 个组件`);

8. 总结

通过本文的实践，你已经掌握了 TRAE SOLO Figma 导入的核心功能：

• 基础导入：从 Figma 选中图层直接生成 React/Vue 组件
• 复杂布局：导入包含嵌套结构的页面级设计稿
• 样式映射：自定义颜色、字体、间距等设计 Token
• 响应式适配：导入多断点设计并生成响应式代码
• 高级技巧：组件复用、类型生成、增量更新

TRAE SOLO 的 Figma 导入功能不仅节省了手动编写样式和布局的时间，还确保了设计与代码的高度一致性。建议你在实际项目中逐步引入这一工作流，从简单的组件开始，逐步扩展到完整的页面导入。