Flutter设计稿转代码插件figma_flutter_generator的使用

figma_flutter_generator 是一个强大的命令行工具，可以从Figma中提取SVG图标并将其转换为图标字体，同时处理Flutter主题文件中的Figma变量。以下是详细的使用指南。

特性

• 🔄 从Figma直接获取SVG图标
• 🎨 将SVG转换为图标字体，并生成对应的Flutter类
• 🎯 从Figma变量生成Flutter主题文件
• 📥 支持PDF和SVG图标的下载
• 📝 详细的操作日志模式

文档

完整的文档可以在 docs.page 查看，包括以下内容：

• Getting Started - 安装和基本设置
• Icon Generation - 如何从Figma生成图标字体
• Theme Generation - 如何从Figma变量生成主题文件
• Figma Setup Guide - 如何设置你的Figma文件
• Examples - 代码示例和用例
• Troubleshooting - 常见问题及解决方案

安装

首先需要安装 figma_flutter_generator：

dart pub global activate figma_flutter_generator

步骤指南

1. 获取Figma访问令牌

1. 登录到你的Figma账户
2. 进入 Settings > Account Settings
3. 在 Personal access tokens 部分点击 “Create new token”
4. 复制你的访问令牌以备后续使用

2. 获取Figma文件和节点ID

1. 打开包含图标的Figma文件
2. 文件ID在URL中：https://www.figma.com/file/XXXXXX/... （XXXXXX是你的文件ID）
3. 右键点击包含图标的框架
4. 选择 Copy/Paste as → Copy link
5. 节点ID是复制链接的最后一部分，位于 node-id= 后面

3. 设置项目

1. 创建一个目录用于存放图标字体项目
2. 如果需要，初始化一个新的Flutter/Dart项目
3. 创建一个输出目录用于存放生成的文件

使用示例

图标字体生成（不同下载类型）

使用PDF下载（默认推荐）

figma_flutter_generator icons \
  --token YOUR_FIGMA_TOKEN \
  --file abc123xyz \
  --node 456:789 \
  --output ./lib/icons

使用直接SVG下载

figma_flutter_generator icons \
  --token YOUR_FIGMA_TOKEN \
  --file abc123xyz \
  --node 456:789 \
  --output ./lib/icons \
  --direct-svg

主题生成（从变量）

figma_flutter_generator variables \
  --token YOUR_FIGMA_TOKEN \
  --file abc123xyz \
  --output ./lib/theme

输出文件结构

运行命令后，你将得到如下文件结构：

your_project/
├── lib/
│   ├── icons/
│   │   ├── icons.ttf              # 生成的图标字体文件
│   │   ├── icons.dart             # Flutter图标类定义
│   │   ├── pdf/                   # （如果使用默认的PDF下载）
│   │   │   ├── icon1.pdf
│   │   │   └── icon2.pdf
│   │   └── svg/                   # （最终的SVG文件，无论是哪种方法）
│   │       ├── icon1.svg
│   │       ├── icon2.svg
│   │       └── ...
│   └── theme/                     # （如果使用了变量命令）
│       ├── colors.dart            # 颜色定义
│       ├── typography.dart        # 字体样式定义
│       └── theme.dart             # 主题配置文件

在Flutter中使用生成的图标

import 'package:your_project/icons/icons.dart';

// 使用图标在你的小部件中
Icon(MyIcons.menu)
Icon(MyIcons.search, size: 24.0, color: Colors.blue)

使用生成的主题

生成的主题文件会根据不同的主题模式（如浅色、深色）进行分类。以下是使用这些变量的例子：

// 导入生成的主题文件
import 'package:your_project/theme/light_theme.dart';
import 'package:your_project/theme/dark_theme.dart';

// 示例：在小部件中使用主题变量
Container(
  color: lightTheme.primary_background,
  padding: EdgeInsets.all(lightTheme.spacing_medium),
  child: Text(
    'Hello World',
    style: TextStyle(
      color: lightTheme.text_primary,
      fontSize: lightTheme.font_size_body,
    ),
  ),
)

// 示例：创建ThemeData
ThemeData getLightTheme() {
  return ThemeData(
    primaryColor: lightTheme.primary_color,
    backgroundColor: lightTheme.background_color,
    textTheme: TextTheme(
      bodyLarge: TextStyle(
        color: lightTheme.text_primary,
        fontSize: lightTheme.font_size_body,
      ),
      titleLarge: TextStyle(
        color: lightTheme.text_primary,
        fontSize: lightTheme.font_size_title,
      ),
    ),
  );
}

// 使用在MaterialApp中
MaterialApp(
  theme: getLightTheme(),
  darkTheme: getDarkTheme(),
  // ...
)

生成的主题结构

生成的主题文件具有以下结构：

// light_theme.dart
class LightTheme {
  // 颜色
  final Color primary_color = Color.fromRGBO(0, 122, 255, 1.0);
  final Color background_color = Color.fromRGBO(255, 255, 255, 1.0);
  
  // 字体样式
  final double font_size_body = 16.0;
  final double font_size_title = 24.0;
  
  // 间距
  final double spacing_small = 8.0;
  final double spacing_medium = 16.0;
  final double spacing_large = 24.0;
}

final lightTheme = LightTheme();

变量按类别分组（由Figma变量路径定义），并保留其原始命名约定。

示例代码

以下是一个完整的示例代码，展示了如何生成图标和主题：

import 'package:figma_flutter_generator/figma_flutter_generator.dart';
import 'package:figma_flutter_generator/figma_variables_fetcher.dart';

void main() async {
  // 示例1：生成图标
  await generateIcons();

  // 示例2：生成主题
  await generateTheme();
}

Future<void> generateIcons() async {
  // 配置
  const figmaToken = 'YOUR_FIGMA_TOKEN';
  const fileId = 'YOUR_FILE_ID';
  const nodeId = 'YOUR_NODE_ID';
  const outputDir = './lib/icons';

  // 初始化生成器
  final generator = SvgFetchToIconFont(figmaToken, fileId, nodeId);

  // 生成图标
  try {
    await generator.fetchAllImages(outputDir);
    print('Icons generated successfully in $outputDir');
  } catch (e) {
    print('Error generating icons: $e');
  }
}

Future<void> generateTheme() async {
  // 配置
  const figmaToken = 'YOUR_FIGMA_TOKEN';
  const fileId = 'YOUR_FILE_ID';
  const outputDir = './lib/theme';

  // 初始化生成器
  final generator = FigmaVariablesFetcher(figmaToken, fileId);

  // 生成主题文件
  try {
    await generator.generateThemeFiles(outputDir);
    print('Theme files generated successfully in $outputDir');
  } catch (e) {
    print('Error generating theme files: $e');
  }
}

通过以上步骤，你可以轻松地将Figma设计稿转换为Flutter代码，从而加快开发流程。希望这个指南对你有所帮助！