Figma UI 套件
提供可直接使用的 Figma UI 套件，设计师能在 Figma 里按 Fluent 2 的规范搭出界面，省去从零画组件的时间。
官方说明 ↗
Go to Fluent 1
AI TOOL PROFILE工具资料微软 Fluent 2 设计系统，统一从设计到开发的跨平台体验
价格官网未标价
平台Web / iOS / Android / Windows / React / Web Components
归类其他 AI 工具
收录2026-10-12
复核2026-10-12
编辑评分
4.3 / 5
★★★★☆
Go to Fluent 1编辑总结
Fluent 2 是微软推出的设计系统，把设计语言、组件库和开发文档合成一套跨平台的工具链。它面向设计师和开发者，提供 Figma UI 套件、Fluent UI 代码库，覆盖 React、Web Components、iOS、Android、Windows 五个平台，并附带辅助功能检测、图标缩放等实用工具。Fluent UI React 基于 React 和 TypeScript，样式用 CSS in JS，依托 Griffel 渲染。它没有公开的定价与付费档位，更像一套随取随用的官方规范与资源集合。
Go to Fluent 1是什么？
Fluent 2 是微软主导的设计系统，目标是把设计、开发到交付串成一条连贯的流程。它同时服务两类人：设计师用 Figma UI 套件直接搭界面，开发者用 Fluent UI 代码库把同一套视觉语言落地到应用里。
当前的主力形态是 Fluent UI React v9，基于 React 和 TypeScript，组件样式通过 CSS in JS 实现，由 Griffel 负责把样式插入 DOM。除了 React，还提供 Web Components、iOS、Android、Windows 的平台专用库，让同一套设计语言能落到不同平台上。
普通用户可以把它当设计规范的参考和现成素材来源；开发者按「起步开发」文档选平台、装依赖、在根节点引入 FluentProvider 并传入主题即可开始；团队则能借助它统一多端产品的视觉与交互一致性。
Go to Fluent 1核心功能
Fluent UI 代码库
覆盖 React、Web Components、iOS、Android、Windows 五个平台的库，每个平台都有针对性的实现，方便跨端统一体验。
官方说明 ↗辅助功能工具
提供 A11y – Focus Order 和 A11y – Color Contrast Checker 两款工具，帮助标注焦点顺序、检查文字对比度是否符合无障碍标准。
官方说明 ↗图标缩放工具
Icon Scaling Tool 支持画一次图标就一键生成多种尺寸，省去逐个尺寸手动调整的重复劳动。
官方说明 ↗开发起步文档
提供安装指南、工具要求和迁移说明，比如从旧版 Fluent UI React 迁到 v9 可参考 Storybook 里的 Migration 专题。
官方说明 ↗Go to Fluent 1值不值得用？
当你要做跨平台产品、尤其是 React 技术栈并且希望视觉上贴近微软系应用时，Fluent 2 值得用，设计套件和代码库能省掉大量重复劳动，辅助功能工具也顺手。当你的产品走的是完全不同的视觉体系、或团队不用 React 和 Figma 时，它的价值会大打折扣，强行套用反而增加改造成本。整体是一套成熟但偏微软生态的官方资源，适合需要统一多端体验的团队，不适合只想找现成 UI 模板的个人。
建议选它的情况
- 做跨平台产品、需要统一多端视觉与交互的团队
- React + TypeScript 技术栈，想直接用 Fluent UI React v9 的项目
- 设计师习惯用 Figma，想直接套用现成 UI 套件
- 产品需要满足无障碍标准，要检查焦点顺序和颜色对比度
不建议选它的情况
- 视觉风格完全独立、不打算贴近微软设计语言的产品
- 技术栈不是 React 或 Web Components、也不想迁移的团队
- 只想找现成 UI 模板直接套用、不做二次开发的个人
Go to Fluent 1使用建议
入门先把路子走对
- 先按平台选库打开「起步开发」页，在 React、Web Components、iOS、Android、Windows 里选你实际要用的平台，每个平台都有对应的安装步骤，避免装错包。
- 装 v9 而不是旧版React 项目要构建 Fluent 2 体验，需要装 Fluent UI React v9，而不是旧版本；同时准备好 node.js 和 yarn 这类包管理器。
- 根节点包一层 FluentProvider在应用根节点引入 FluentProvider 并把主题作为 prop 传进去，这样应用级设置才能生效，之后再往里渲染其他 v9 组件。
- 设计侧先拿 Figma 套件设计师先在首页进入 Figma UI 套件，按 Fluent 2 的组件规范搭界面，和开发用同一套视觉语言能减少来回返工。
进阶省时间也省钱
- 无障碍两件套先跑一遍用 A11y – Focus Order 标注焦点与 Tab 顺序，再用 Color Contrast Checker 按 WCAG 标准检查文字对比度，比上线后返工便宜得多。
- 图标只画一次用 Icon Scaling Tool 画一次图标后一键缩放到多个尺寸，避免为不同尺寸单独重画，保持各尺寸视觉一致。
- 迁移查 Storybook从旧版 Fluent UI React 升级时，直接看 Storybook 里的 Migration 专题，按官方迁移说明改，比自行摸索少踩坑。
Go to Fluent 1适合谁用？
跨平台产品团队
推荐产品要同时覆盖 Web、移动端和 Windows，希望各端视觉和交互保持一致，Fluent 2 的平台库能直接复用同一套设计语言。
React 前端开发者
推荐技术栈是 React + TypeScript，直接用 Fluent UI React v9，组件样式走 CSS in JS，和现有构建流程容易衔接。
Figma 设计师
推荐需要快速搭出符合规范的原型，Figma UI 套件能省去从零画组件的功夫，和开发交付的视觉一致性也更好。
无障碍合规负责人
推荐产品有 WCAG 合规要求，A11y – Focus Order 和 Color Contrast Checker 能直接用于检查焦点顺序与文字对比度。
非 React 技术栈团队
有条件主技术栈不是 React 或 Web Components，虽然 Fluent 2 有 iOS、Android、Windows 库，但核心组件生态仍围绕 Web 前端，接入成本偏高。
追求独立视觉风格的产品
不推荐希望产品有自己的品牌视觉、不想贴近微软设计语言，套用 Fluent 2 反而要花额外精力改造，不如自建组件库。
Go to Fluent 1优点和缺点
优点
- 覆盖 React、Web Components、iOS、Android、Windows 五个平台
- Fluent UI React v9 基于 React 和 TypeScript，样式走 CSS in JS
- 提供 Figma UI 套件，设计与开发使用同一套语言
- 自带 A11y 焦点顺序与颜色对比度检查工具
- Icon Scaling Tool 支持一次绘制缩放到多个尺寸
- 有 Storybook 迁移专题，旧版升级有官方路径
缺点
- 核心生态偏 React 和 Web 前端，非该栈团队接入成本高
- 视觉风格强烈绑定微软设计语言，独立品牌产品改造费劲
- 价格与付费档位未公布，商用授权范围也未说明
- 起步开发文档偏开发者向，纯设计师上手需要额外适应
Go to Fluent 1常见问题
Fluent 2 当前的主力版本是什么？＋
React 方向的主力是 Fluent UI React v9，基于 React 和 TypeScript 构建，组件样式使用 CSS in JS，由 Griffel 负责渲染样式并按需把 CSS 插入 DOM。构建和运行 v9 应用需要 node.js 以及 yarn 这类包管理器。除 React 外还有 Web Components、iOS、Android、Windows 的平台专用库。
它支持哪些平台？＋
Fluent 2 把设计语言分别落到五个平台库：React、Web Components、iOS、Android、Windows。也就是说同一套视觉与交互规范可以覆盖 Web、移动端和 Windows 桌面，产品跨端时不必为每个端重新定义一套设计规则。
怎么开始用它开发应用？＋
在「起步开发」页按平台选库，React 项目安装 Fluent UI React v9，然后在应用根节点引入 FluentProvider 并把主题作为 prop 传进去，定义好应用级设置，再在 FluentProvider 内渲染所需的 v9 组件即可。从旧版迁移的话可以参考 Storybook 里的 Migration 专题。
有辅助无障碍的工具吗？＋
有。A11y – Focus Order 用来快速标注设计的焦点与 Tab 顺序，让交互对象的流转更合理；A11y – Color Contrast Checker 用来确保文字可读，符合 Web Content Accessibility Guideline 标准。两个工具都在资源区，做无障碍检查时可以直接使用。
图标要每个尺寸都重画吗？＋
不用。Icon Scaling Tool 支持画一次图标后一键缩放到多个尺寸，省去为不同尺寸重复绘制的步骤，也能让各尺寸之间保持视觉一致，适合需要输出多套尺寸图标的项目。
遇到问题去哪里反馈？＋
官方在「起步开发」页的结尾给出了反馈入口：有问题或建议可以到 GitHub 上联系 Fluent 团队。此外每个平台的组件文档里也有对应的使用说明，遇到组件层面的问题可以先查组件文档，再考虑在 GitHub 上提问。
Go to Fluent 1竞品对比
| 工具 | 编辑评分 | 价格 | 核心功能 | 平台 |
|---|---|---|---|---|
| Go to Fluent 1本工具 | 4.3 | 未标价 | Figma UI 套件；Fluent UI 代码库；辅助功能工具；图标缩放工具 | Web / iOS / Android / Windows / React / Web Components |
| Teams本工具 | — | 未标价 | Teams 借助 Fluent 2 提升性能并降低复杂度 | — |
| Outlook本工具 | — | 未标价 | Outlook 与 Windows 及 Fluent 联动，提供可定制的枢纽体验 | — |
Fluent 2 与 Teams、Outlook 不是相互替代的关系，而是同一体系下的设计与产品案例：Teams 用 Fluent 2 提升性能、降低复杂度，Outlook 与 Windows 和 Fluent 联动做成可定制的枢纽体验。如果你在做类似微软系产品的界面，Fluent 2 提供的是底层设计语言和组件，Teams 和 Outlook 展示的则是这套语言在真实产品里的落地效果，可作参考而非竞品对比。
