如何将Figma生成的Material Design文件集成到Angular Material？

1. 放置样式文件 #

把包含colors.module.css、theme.dark.css、theme.light.css、tokens.css、typography.module.css的css文件夹，复制到Angular项目的src/assets/目录下，最终路径为src/assets/css/。

2. 全局引入基础样式 #

打开项目根目录的angular.json，找到projects -> [你的项目名] -> architect -> build -> options -> styles数组，按顺序添加以下路径（确保tokens先加载，因为其他样式依赖它）：

"styles": [
  "src/assets/css/tokens.css",
  "src/assets/css/colors.module.css",
  "src/assets/css/typography.module.css",
  "src/assets/css/theme.light.css",
  "src/styles.scss"
]

3. 适配深色主题 #

如果需要支持深色模式，有两种常用方式：

方式一：跟随系统深色模式 #

打开src/styles.scss，添加媒体查询自动切换：

@media (prefers-color-scheme: dark) {
  @import './assets/css/theme.dark.css';
}

方式二：手动切换主题类 #

在src/styles.scss中添加类切换逻辑：

body.dark-theme {
  @import './assets/css/theme.dark.css';
}

之后可以通过给body元素添加/移除dark-theme类来手动切换主题。

4. 让Angular Material复用自定义样式 #

如果你的项目已经有Angular Material的主题文件（比如src/theme.scss），可以直接用Figma生成的tokens替换原有变量：

@use '@angular/material' as mat;

// 引入Figma生成的tokens
@import './assets/css/tokens.css';

// 用生成的CSS变量定义Material调色板
$app-primary: mat.define-palette(mat.$custom-palette, var(--color-primary-500), var(--color-primary-100), var(--color-primary-700));
$app-accent: mat.define-palette(mat.$custom-palette, var(--color-accent-500));
$app-warn: mat.define-palette(mat.$red-palette);

// 定义主题并应用到所有组件
$app-theme: mat.define-light-theme((
  color: (
    primary: $app-primary,
    accent: $app-accent,
    warn: $app-warn
  ),
  typography: mat.define-typography-config(
    font-family: var(--font-family),
    headline-1: mat.define-typography-level(var(--font-size-headline-1), var(--line-height-headline-1))
  )
));

@include mat.all-component-themes($app-theme);

注意：如果生成的tokens是SCSS变量而非CSS变量，直接使用变量名即可（比如$color-primary-500）。

5. 验证集成效果 #

运行ng serve启动项目，检查组件的颜色、字体是否与Figma设计一致，同时测试深色主题切换是否正常。

内容的提问来源于stack exchange，提问作者robert trudel