Flutter设计变量转换插件figma_vars_to_dart的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter设计变量转换插件figma_vars_to_dart的使用

通过从Figma API直接生成Dart代码，将您的Figma设计系统和Flutter应用程序实现更紧密地结合在一起。

我们试图解决什么问题？

  • Flutter/Dart的Figma代码生成功能有限。
  • 需要手动与Figma UI进行交互，并且在大型项目中耗时。
  • 没有简单的方法来检测哪些变量已更改/更新，而无需手动检查。

使用场景

  • 明亮模式/暗黑模式
  • 自适应布局

安装

在pubspec.yaml文件中添加依赖：

dev_dependencies:
  figma_vars_to_dart: ^0.0.4

或者使用命令行添加：

flutter pub add figma_vars_to_dart --dev

准备您的Figma

确保您的Figma项目使用了变量。

示例输入

输入1 输入2

创建令牌

为了与Figma API交互，您需要一个个人访问令牌。您可以按照此教程创建该令牌。

运行命令

dart pub run figma_vars_to_dart generate \
	 --token $FIGMA_TOKEN \
	 --fileId $YOUR_FIGMA_FILE_ID \ # 您可以在文件URL中找到此字符串值
	 --dartOutputFolder lib/shared/ui_constants \
	 --jsonOutputFile vars.json

使用生成的代码

生成的文件

color_primitives.dart
import 'package:flutter/widgets.dart';

class ColorPrimitives {
  final Color white;
  final Color pink;
  final Color green;
  final Color black;
  final Color blue;

  ColorPrimitives({
    required this.white,
    required this.pink,
    required this.green,
    required this.black,
    required this.blue,
  });

  // 提供默认值
  factory ColorPrimitives.value() => ColorPrimitives(
        white: const Color(0xFFF2ECEC),
        pink: const Color(0xFFDD006A),
        green: const Color(0xFF8CC93E),
        black: const Color(0xFF2C2C2C),
        blue: const Color(0xFF3000F2),
      );
}
color_semantics.dart
import 'package:flutter/widgets.dart';
import 'ui_constants.dart';

class ColorSemantics {
  final Color background;
  final Color buttonPrimary;

  ColorSemantics({
    required this.background,
    required this.buttonPrimary,
  });

  // 为浅色主题生成颜色
  factory ColorSemantics.light(ColorPrimitives colorPrimitives) =>
      ColorSemantics(
        background: colorPrimitives.white,
        buttonPrimary: colorPrimitives.blue,
      );

  // 为深色主题生成颜色
  factory ColorSemantics.dark(ColorPrimitives colorPrimitives) =>
      ColorSemantics(
        background: colorPrimitives.black,
        buttonPrimary: colorPrimitives.green,
      );
}
ui_constants.dart
export 'color_primitives.dart';
export 'color_semantics.dart';

更多关于Flutter设计变量转换插件figma_vars_to_dart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter设计变量转换插件figma_vars_to_dart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用figma_vars_to_dart插件将Figma设计变量转换为Dart代码的示例。这个插件可以帮助开发者自动化地从Figma中提取颜色、间距、字体大小等设计变量，并在Flutter项目中直接使用它们。

安装figma_vars_to_dart

首先，你需要在你的Flutter项目中安装figma_vars_to_dart插件。你可以通过添加以下依赖到你的pubspec.yaml文件中来完成这一步：

dependencies:
  flutter:
    sdk: flutter
  figma_vars_to_dart: ^最新版本号  # 请替换为最新的版本号

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

使用figma_vars_to_dart

假设你已经从Figma中导出了一份包含设计变量的JSON文件（通常这个文件可以通过Figma的插件或API获取）。以下是一个示例，展示如何使用figma_vars_to_dart将这个JSON文件转换为Dart代码。

1. 准备Figma设计变量JSON文件

假设你的Figma设计变量JSON文件名为figma_design_variables.json，内容如下：

{
  "colors": {
    "primary": "#6200EA",
    "secondary": "#03DAC5",
    "background": "#FFFFFF"
  },
  "spacing": {
    "small": 8,
    "medium": 16,
    "large": 32
  },
  "fonts": {
    "body": "Roboto",
    "heading": "Montserrat"
  }
}

2. 编写Dart脚本转换JSON为Dart代码

你可以编写一个Dart脚本来读取这个JSON文件并生成对应的Dart代码。以下是一个示例脚本：

import 'dart:convert';
import 'dart:io';
import 'package:figma_vars_to_dart/figma_vars_to_dart.dart';

void main() async {
  // 读取Figma设计变量JSON文件
  File jsonFile = File('path/to/your/figma_design_variables.json');
  String jsonContent = await jsonFile.readAsString();

  // 解析JSON内容
  Map<String, dynamic> figmaVars = jsonDecode(jsonContent);

  // 使用figma_vars_to_dart插件转换JSON为Dart代码
  String dartCode = FigmaVarsToDartConverter(figmaVars).convert();

  // 将生成的Dart代码写入文件
  File dartFile = File('lib/design_system/design_variables.dart');
  await dartFile.writeAsString(dartCode);

  print('Design variables have been successfully converted to Dart code.');
}

请注意，你需要将'path/to/your/figma_design_variables.json'替换为你的JSON文件的实际路径。

3. 运行Dart脚本

你可以通过命令行运行这个Dart脚本。假设你的脚本文件名为convert_figma_vars.dart，你可以使用以下命令来运行它：

dart convert_figma_vars.dart

运行成功后，你应该会在你的Flutter项目的lib/design_system/目录下看到一个名为design_variables.dart的文件，里面包含了从Figma JSON文件中转换来的Dart代码，例如：

// GENERATED CODE - DO NOT EDIT BY HAND

part of 'design_system.dart';

class DesignSystem {
  static const Color primaryColor = Color(0xFF6200EA);
  static const Color secondaryColor = Color(0xFF03DAC5);
  static const Color backgroundColor = Color(0xFFFFFFFF);

  static const double smallSpacing = 8.0;
  static const double mediumSpacing = 16.0;
  static const double largeSpacing = 32.0;

  static const String bodyFont = 'Roboto';
  static const String headingFont = 'Montserrat';
}

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

现在，你可以在你的Flutter项目中导入并使用这些设计变量了。例如：

import 'package:your_app/design_system/design_variables.dart';

void main() {
  runApp(MaterialApp(
    theme: ThemeData(
      primaryColor: DesignSystem.primaryColor,
      // 其他主题配置...
    ),
    home: Scaffold(
      appBar: AppBar(
        title: Text('Flutter App', style: TextStyle(fontFamily: DesignSystem.headingFont)),
      ),
      body: Center(
        child: Text('Hello, Flutter!', style: TextStyle(fontFamily: DesignSystem.bodyFont)),
      ),
    ),
  ));
}

这样，你就成功地使用figma_vars_to_dart插件将Figma设计变量转换为了Dart代码，并在你的Flutter项目中使用了它们。

回到顶部