F0 代表了视觉语言的变革性再起,用于“因子” 平台。 其核心任务是加强整个组织的一致性和连贯性 阶乘的用户界面,同时确保快速、高效和令人愉快 用户和开发者的经验.

为什么是F0?

随着"阶地"的演化,它扩展为一套复杂的特征和 功能,导致用户体验分散. 各部门 平台显示不一致的视觉样式和互动.

这样一来,我们两个用户的维护和可扩展性就变得复杂了 经验与代码库. 我们经常发现自己 投入过多的时间去 重塑方向盘并解决错误和不一致之处而不是 增强我们的产品, 我们的用户被留下一个混乱, 脱节 经历.

为什么重启我们的设计系统?

我们现有的设计系统叫做"Gamma" 是在非正式的基础上建立的 限制是无法经受时间考验的。 尽管增加了新的 基础已经削弱到 他们大多变得无用.

经过彻底评估,我们决定一个新的开始是至关重要的. 我们 需要将我们的旧设计规则与新的设计规则明确区分开来 支持未来增长的基础.

以下是重启设计系统的几个好处:

• 清晰的视野:设计系统受制约而兴起. 以前,我们 添加没有明确方向的组件和样式, 复杂性增加, 导致一个难以有效利用的系统.
• 完全响应:我们的目标是提供有助于 在所有设备之间创建反应性接口,以补充我们的移动 应用并确保一致性.
• 外部开发者的可用性:有详细记录和易于使用 外部开发者可以和我们 观想觉想以因果生态系统为依托.
• 无障碍:确保我们的平台对所有人开放, 无论他们的能力如何,都是优先事项。 这意味着侧重于 利用我们的组件.
• 强健性:我们的目标是让与F0的每一次互动都具有特异性. 这包括对各组成部分进行全面测试,以保持一致性 一致性.

原则

• 一致性: 以"因果"的庞大特征,一种连贯的视觉语言 是帮助用户导航和利用其经验的关键 平台.
• 效率: 设计效率,F0辅助用户完成任务 迅速而无缝.
• 可享用性: 我们的目标是让用户享受他们与"因素"的互动. 具有视觉吸引力和连贯的经验对F0至关重要.

技术选择

F0是使用主要技术设计的:

• 反应: 此设计系统基于 React, 领先的 JavaScript 用于构建用户界面的库.
• 类型脚本: 用于坚固、可维护的代码和增强的开发者 体验惊人的开发者工具.
• 尾风:我们选择了通用第一CSS框架,促进快速, 持续UI发展.
• 沙克恩语Name 财务报告和审定财务报表 半径 为我们提供一个强大和可及的基准 组件.

如何使用 F0 ?

为整合F0, 安装为依赖性:

$pnpm 安装 @ factorialco/ f0- react

在您的应用程序中导入其样式( 通常是主. tsx 或类似的) :

import "@factorialco/f0-react/dist/styles.css"

F0与Inter一起设计. 如果您的应用程序尚未为 Inter 服务, 请导入 F0的拷贝也:

import "@factorialco/f0-react/assets/fonts/style.css"

然后,您可以利用其任何组成部分:

import { Button } from "@factorialco/f0-react"