Flutter设计变量获取插件figma_variables_api的使用

Figma Variables Api

Figma REST API for variables.

安装 💻

为了开始使用Figma Variables Api，你必须在你的机器上安装Dart SDK。

通过以下命令安装：

dart pub add figma_variables_api

持续集成 🤖

Figma Variables Api 包含一个内置的 GitHub Actions 工作流，但你也可以添加你偏好的CI/CD解决方案。

如何使用 Figma Variables Api

接下来，我们将通过一个完整的示例来展示如何使用 figma_variables_api 插件。

创建一个新的Flutter项目

首先，创建一个新的Flutter项目并添加 figma_variables_api 依赖：

flutter create figma_variable_example
cd figma_variable_example
dart pub add figma_variables_api

初始化插件

在你的项目中初始化 figma_variables_api 插件。这里是一个简单的示例代码：

import 'package:flutter/material.dart';
import 'package:figma_variables_api/figma_variables_api.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Figma Variables Example'),
        ),
        body: Center(
          child: Text('Loading Figma Variables...'),
        ),
      ),
    );
  }
}

获取Figma变量

为了获取Figma变量，你需要先配置一些必要的信息，比如你的Figma API密钥和文件ID。然后你可以调用 fetchVariables 方法来获取这些变量。

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _result = '';

  @override
  void initState() {
    super.initState();
    fetchVariables();
  }

  Future<void> fetchVariables() async {
    try {
      // 替换为你的Figma API密钥和文件ID
      final apiKey = 'YOUR_FIGMA_API_KEY';
      final fileId = 'YOUR_FIGMA_FILE_ID';
      
      // 初始化Figma API客户端
      final client = FigmaClient(apiKey);

      // 获取变量
      final variables = await client.fetchVariables(fileId);

      setState(() {
        _result = variables.toString();
      });
    } catch (e) {
      setState(() {
        _result = 'Error: $e';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Figma Variables Example'),
        ),
        body: Center(
          child: Text(_result),
        ),
      ),
    );
  }
}

运行项目

现在你可以运行项目并查看结果。如果你已经正确设置了API密钥和文件ID，你应该能够看到从Figma获取到的设计变量。

flutter run