Parabeac Core 开源项目使用教程

项目概述

Parabeac Core 是一个用于将 Figma 设计转化为 Flutter 代码的工具，它旨在简化设计师与开发者之间的协作过程，通过自动化设计转换来提高工作效率。该项目支持连续设计与集成，特别是在处理大型应用时，能有效隔离并生成可复用的UI组件。

1. 项目目录结构及介绍

Parabeac Core 的目录结构通常具有以下核心组成部分：

• lib: 这是主要的业务逻辑存放处，根据不同的项目类型（主题、组件、屏幕）生成的Flutter代码会被组织在这里。
  • theme: 存储全局样式，如文本样式和颜色。
  • widgets: 用于存放独立且可重用的UI组件。
  • views: 包含完整UI屏幕的代码。
• bin: 包含主执行脚本parabeac.dart，这是命令行接口的入口点。
• example: 可能存在示例项目或演示如何使用该库的代码。
• test: 单元测试和集成测试文件存放地。
• pubspec.yaml: 项目的配置文件，定义了依赖关系和元数据。

2. 项目的启动文件介绍

• 主执行文件: bin/parabeac.dart 是项目的启动脚本。通过这个脚本，用户可以通过终端命令与Parabeac Core进行交互，触发从Figma设计到Flutter代码的转化过程。
• 运行生成的代码: 当Parabeac Core成功转换设计文件后，它会在指定的输出目录下生成一个Flutter项目。此项目的主入口点通常是 lib/main.dart，对于Widgetbook或Dashbook模式，则分别为 lib/main_widgetbook.dart 和 lib/main_dashbook.dart。使用 flutter run 命令即可运行对应的生成代码。

3. 项目的配置文件介绍

• pubspec.yaml: 此文件位于项目根目录，是Dart和Flutter项目的元数据中心。它包含了项目名称、版本、作者信息以及项目的依赖关系等重要信息。在使用Parabeac Core自身作为依赖时，其他项目会在这配置Parabeac Core的路径或版本。

• Parabeac特定配置: 在使用Parabeac Core时，配置不直接存储在一个固定的配置文件中，而是通过命令行参数进行设置。例如，使用 -f 设置Figma文件ID，-k 设置API密钥，以及通过--project-type选择项目类型（如 themes、components、screens）等。对于更高级的配置，如“componentIsolation”和响应式布局的“breakpoints”，则是在使用Parabeac Core的上下文中以参数形式提供或在相应的工程配置中实现。

为了开始使用Parabeac Core，首先确保安装了Dart和Flutter SDK，并且获取你的Figma API凭据。然后，你可以通过导入项目并遵循上述指南来启动设计到代码的转化流程。