Material 2 还是 Material 3parabeac_core 设计系统迁移实战指南【免费下载链接】parabeac_coreContinuous Design / Continuous Integration for Figma to Flutter项目地址: https://gitcode.com/gh_mirrors/pa/parabeac_coreparabeac_core是一款将Figma 设计稿直接转换为 Flutter 代码的开源工具支持持续设计 / 持续集成的工作流。它内置了Material 2 与 Material 3 两套设计系统导出模式只需一行配置就能决定生成代码中的TextTheme使用哪一代 Material 命名规范。本文将从零基础讲起帮你快速完成设计系统选择与迁移。为什么 Material 2 与 Material 3 的选择如此重要很多 Flutter 新手遇到过这样的困惑TextTheme里既有headline1、bodyText1又有headlineLarge、bodyLarge到底该用哪套这是 Google Material Design 升级留下的遗产Material 2使用headline1~6、bodyText1/2、caption、button等字段目前已全部标记为废弃deprecatedMaterial 3重新命名为语义化字段headlineLarge/Medium/Small、titleLarge/Medium/Small、bodyLarge/Medium/Small、labelLarge/Medium/Small官方 README 也明确提示Material 2 最终会被移除。如果你的生成代码基于 Material 2 字段未来升级 Flutter 时会出现大量编译告警甚至报错。parabeac_coreFigma 转 Flutter 的自动化桥梁parabeac_core 会解析 Figma 文件中的屏幕、组件与全局样式自动输出结构清晰的 Flutter 工程集成级别project-type导出内容themes全局文字样式、全局颜色components主题 可复用组件screens默认主题 组件 完整可运行屏幕比如这样一个 Figma 屏幕会被直接转换为一屏可运行的 Flutter 页面而 Figma 中的组件会被转换为可复用的独立 Widget快速上手三种方式指定设计系统方式一修改配置文件推荐 打开项目内的 lib/configurations/configurations.json将designSystem字段改为你需要的值{ designSystem: material3 }该配置由 pb_configuration.dart 读取默认值就是material3见文件第 56 行的defaultValue: material3所以什么都不改也会走 Material 3。方式二命令行参数运行时通过-d/--design-system参数覆盖配置文件dart parabeac.dart -f Figma文件ID -k Figma密钥 -o 输出路径 -d material3方式三保持默认新建项目什么都不做即可——项目已将 Material 3 作为默认设计系统配置会随 PBDL 中间格式一路传递见 figma_to_pbdl_service.dart 中的designSystemType字段最终决定生成代码的样式命名。两种模式生成的主题代码有什么区别选中设计系统后全局样式聚合器 global_styling_aggregator.dart 会拆解出三个后处理任务分别由独立文件负责生成 颜色常量 → colors_post_gen_task.dart✏️ 文字样式常量 → text_styles_post_gen_task.dart 主题组装TextTheme / ColorScheme / ThemeData→ theming_post_gen_task.dart最终产出的主题文件示意Material 3 模式final textTheme TextTheme( bodyLarge: FooTextStyles.bodyLarge, headlineMedium: FooTextStyles.headlineMedium, // ... 全部为非废弃的 M3 字段 );字段命名对照表帮你一眼看懂两代差异用途Material 2已废弃Material 3推荐大标题headline1 ~ 6headlineLarge / Medium / Small小标题subtitle1 / subtitle2titleLarge / Medium / Small正文bodyText1 / bodyText2bodyLarge / Medium / Small按钮文字buttonlabelLarge / Medium / Small辅助说明captionbodySmall值得一提的是聚合器内部维护了一份新旧命名双兼容的样式清单_textStyleList同时包含bodyText1与bodyLarge等因此无论你的 Figma 设计稿按哪套命名书写全局样式都能被正确识别并归一导出。相关行为可由黄金测试 global_styling_test.dart 验证。迁移实战新手怎么选、怎么迁新项目直接用 Material 3 ✅保持默认配置即可无需任何额外操作。生成代码零废弃告警天然面向未来。老项目从 Material 2 迁移到 Material 3 将configurations.json中designSystem改为material3或删除该字段使用默认值重新运行生成替换旧的lib/theme目录下的*_theme、*_text_styles.g.dart、*_colors.g.dart全局搜索旧字段名headline1、bodyText1、caption等按上方对照表替换为新命名运行flutter analyze确认无废弃告警 小建议由于 parabeac_core 的核心价值是设计稿改一次代码自动重生成迁移最佳时机是趁手边正好要重新生成一版代码时顺手完成改动成本几乎为零。常见问题 FAQQMaterial 2 模式还会支持多久A官方文档已明确 Material 2 属于过渡选项最终会被废弃移除建议不要在新项目中使用。Q不指定 designSystem 会怎样A自动使用material3这是 pb_configuration.dart 中写死的默认值。Q设计系统会影响颜色吗A不影响。颜色常量文件两种模式下完全一致差异只在TextTheme的字段命名上。写在最后一句话总结新项目无脑 Material 3老项目借下一次生成完成平滑迁移。parabeac_core 把设计系统选择收敛成一行配置让你可以把精力留在设计稿本身而不是命名规范的迁移细节上。【免费下载链接】parabeac_coreContinuous Design / Continuous Integration for Figma to Flutter项目地址: https://gitcode.com/gh_mirrors/pa/parabeac_core创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考