figma_flutter_token_mapper

CLI 工具用于自动将 Figma 中的 Tokens Studio 转换为 Flutter 代码。

如何使用

1. 导出

从 Figma 中导出你的 token，并将其保存在项目的文件夹中。

2. 调整 JSON 文件（可选）

如果你没有 Tokens Studio for Figma 的专业版，但想使用主题，你可以手动调整 JSON 文件。你需要为每个想要使用的主题提供语义 token。参见以下示例中的 $metadata 部分。然后你必须将主题名称添加到 $themes 数组中，并为每个主题设置 selectedTokenSets。

{
  "$themes": [
    {
      "name": "light",
      "selectedTokenSets": {
        "primitives/Value": "enabled",
        "semantic/light": "enabled"
      }
    },
    {
      "name": "dark",
      "selectedTokenSets": {
        "primitives/Value": "enabled",
        "semantic/dark": "enabled"
      }
    }
  ],
  "$metadata": {
    "tokenSetOrder": [
      "primitives/Value",
      "semantic/light",
      "semantic/dark"
    ]
  }
}

请注意，$themes 数组中的第一个主题会将颜色写入 primaryAppColors 常量，第二个主题则写入 secondaryAppColors 常量。

3. 生成 Flutter 代码

figma_flutter_token_mapper 工具允许你将设计 token 集成到 Flutter 项目中，支持单个 JSON 文件和包含多个 JSON 文件的目录。

使用单个 JSON 设计 token 文件

当你有一个包含 $metadata、$theme 和定义的单个 JSON 文件时，在项目的根目录下执行以下命令：

dart run figma_flutter_token_mapper --input <path_to_json_file> --output <path_to_output_folder>

默认配置值：

--input: ./design/tokens.json
--output: ./lib/assets/tokens/

使用多个 JSON 设计 token 文件的目录

对于使用多个 JSON 文件的项目，确保输入目录包括一个 $metadata 文件和一个 $themes 文件，以及 token 文件。从项目的根目录运行以下命令：

dart run figma_flutter_token_mapper --input <path_to_json_folder> --output <path_to_output_folder>

默认配置值：

--input: ./design/tokens
--output: ./lib/assets/tokens/

4. 使用生成的代码

该工具将在输出文件夹中生成一个名为 app_colors.g.dart 的文件，用于颜色。在那里你会找到 primaryAppColors 常量（第一个主题）和 secondaryAppColors 常量（第二个主题），这些常量包含来自 Figma 文件的颜色。

同时，你还会在输出文件夹中得到一个名为 app_typography.g.dart 的文件，用于文本样式。在那里你会找到你的 TextStyles 常量，这些常量包含来自 Figma 文件的样式。

更多关于Flutter Figma设计映射插件figma_flutter_token_mapper的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

h691938207 1楼

更多关于Flutter Figma设计映射插件figma_flutter_token_mapper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何使用 figma_flutter_token_mapper 插件的示例代码案例。这个插件主要用于将 Figma 设计中的元素转换为 Flutter 中的样式和组件。

首先，确保你已经在 pubspec.yaml 文件中添加了 figma_flutter_token_mapper 依赖：

dependencies:
  flutter:
    sdk: flutter
  figma_flutter_token_mapper: ^最新版本号

然后运行 flutter pub get 来安装依赖。

使用示例

准备 Figma 文件：
- 在 Figma 中设计你的 UI 元素，并确保你已经将设计元素导出为 Figma Tokens（颜色、字体、间距等）。
生成 Flutter 代码：
- 使用 figma_flutter_token_mapper 提供的命令行工具将 Figma Tokens 转换为 Flutter 代码。假设你已经有一个 Figma 文件，并且其中的 Tokens 已经设置好。
```
figma-flutter-token-mapper --figma-file-id YOUR_FIGMA_FILE_ID --output-dir lib/generated
```
- 替换 YOUR_FIGMA_FILE_ID 为你的 Figma 文件 ID。这将生成一个包含所有 Tokens 的 Dart 文件，通常位于 lib/generated 目录下。

在 Flutter 项目中使用生成的代码：

假设生成的代码文件名为 figma_tokens.dart，你可以在 Flutter 项目中导入并使用这些 Tokens。

import 'package:flutter/material.dart';
import 'generated/figma_tokens.dart'; // 导入生成的 Figma Tokens 文件

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Figma Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        // 使用生成的 Figma 颜色 Token
        primaryColor: FigmaColors.primary,
        textTheme: TextTheme(
          headline1: TextStyle(
            fontSize: FigmaSizes.headline1,
            fontFamily: FigmaFonts.primary,
            color: FigmaColors.textPrimary,
          ),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Figma Demo'),
      ),
      body: Center(
        child: Text(
          'Hello, Figma!',
          style: TextStyle(
            fontSize: FigmaSizes.body1,
            color: FigmaColors.textSecondary,
          ),
        ),
      ),
    );
  }
}

注意事项

确保 Figma 文件中的 Tokens 已经正确设置，并且命令行工具可以访问到你的 Figma 文件。
生成的代码文件名和路径可能会根据你的配置有所不同，请根据实际情况调整导入路径。
figma_flutter_token_mapper 插件可能需要定期更新以适应 Figma API 的变化，请检查其文档以获取最新信息。

这个示例展示了如何将 Figma 设计中的 Tokens 映射到 Flutter 项目中，并通过生成的代码在 Flutter 应用中使用这些设计元素。