TDesign 企业级设计体系自开源后，备受大家关注，它除了支持主流的技术框架之外，还官方提供桌面端和移动端四大设计工具的设计资源。过去 TDesign Figma 设计资源曾登上社区全球趋势榜的第二和第三，通过 Figma 构建设计体系革新了以往设计资源很多完成不了的事情，因此系统、标准和效率成为了 TDesign 设计资源开源后重要的目标。而设计资源作为与开发交接重要视觉化文档，如何执行完美的设计到开发落地成为团队内同学更关注的事情。本文带大家快速了解 TDesign 桌面端 Figma 设计资源是如何构建的。
腾讯通过内部的开源共建，正式在2021年12月21日对外开源 TDesign 设计体系。TDesign 官方提供目前主流的四大设计工具资源，团队的设计同学们努力通过不同的设计工具给大家创造了一样设计资源，希望可以让不同的使用者们都能使用上最新最全的资源，以保证设计的质量和标准。以往 Sketch 的文档维护占用了团队同学很多的时间，在过去大部分的设计贡献者们工作流正在从 Sketch 到 Figma 的转变。Figma 在线协同的能力可以让团队内共同维护同一份设计文档，并且通过分支文件合并进行更改，极大地提高构建大型的设计体系工作流程。开源后 TDesign Figma 设计资源曾登上社区全球趋势榜的第二和第三，随着时间的推移，设计资源的使用者持续的增加，更大的动力驱使团队想为整个行业带来更专业的资源。带着思考，过去团队希望一套设计资源可以在不同的设计工具中使用，看起来或听起来是“不错”的设计时，其实并没有满足内部团队使用，根据不同设计工具的功能和特性进行适配。另外据统计目前使用 TDesign 设计资源 Figma 使用者较多，这次决定由 Figma 先行适配全新的能力，紧接着根据规范化的命名进行约束，逐步统一所有的设计工具的资源中。前面说到开源后团队正在批判性地审视不同设计资源的特性，不同设计资源犹如不同技术框架具备不同的特性，针对大型设计体系的设计资源则需要使用开发系统思维进行构建。身为设计师，以往大家都知道是通过 Figma，Sketch， AdobeXD、Axure 和 Photoshop 进行设计创作，例如在进行产品设计时可以通过以上的工具打包设计资源，紧接着给到不同设计师再进行二次设计，从而形成另一个全新的设计资源。3.1 用户群体的转变
开源后使用设计资源用户群体的转变，团队发现一套设计资源会涉及不同的用户角色，设计资源难以满足其他角色的工作流程，过去仅围绕着设计师考虑，但开源后发现角色多了，从产品经理，技术产品，UI开发，前端开发，后台开发等等同学都会使用到设计资源进行拼装再开发，因为每个角色都希望通过设计资源可视化的拼装，能够确保设计的标准和规范。围绕着设计师用户群体的设计资源仅统一了全局的样式，但组件的嵌套设计或者复合组件设计都是单一且割裂的，设计资源并不能满足按类拼装的需求。根据问题，团队拉出使用设计资源或者说使用 TDesign 的用户角色，了解他们的诉求：产品同学：更关注是组件类型，他们可以按类拼装，同时简单的进行内容或者布局上修改。
设计同学：更关注的是组件的样式，同时也需要按类拼装，样式修改，甚至还要进行演示demo。
开发同学：更关注是组件的能力，他们可以通过设计资源按类拼装，同时按能力还原，假设没有满足能力或者类型，往往自己对照着 API 重新修改。
3.2 简化设计资源的复杂性
通过上述用户角色的分类可以发现，设计资源不再是单一提供给设计师使用的任务流程。在大部分开发组件流程中，通过设计师定义规范，开发者定义标准，最后完成组件的开发。这套开发组件逻辑同样的需要用在设计资源当中，但设计资源毕竟是视觉化的二进制文档，除了组件样式和开发文档保持一致之外，连接不同技术框架组件的能力成为了设计资源需要解决的问题。多技术框架统一 API 是 TDesign 优势，唯有组件 API 可以对齐设计资源的设定，加强设计与开发 API 的关联性，从而去封装组件的样式，组件的类型和组件能力。3.2.1 统一四大框架 API
使用 Figma 的用户都知道 Variant（变体）功能，用户可以使用 Variant 功能配置组件的不同类型。属性（Property）是组件的可变参数，相当于一个变体组件的大分类。例如：按钮组件可以分为「类型」「尺寸」以及「状态」。值（Value）是每个变体组件属性下的可选择项。比如：在按钮类型里分「主要/次要/···」等。通过 Variants 功能可拉通各组件变体能力，一致的命名可以很好对齐开发组件能力的 API prop，让组件变体和代码一一对应。举个例子，以下是 TDesign 按钮组件的代码块内容，不难发现组件的类型和样式是通过代码中的 API 的名称来调用的，按钮这里的 theme 对应是主题，而 variant 对应是类型，通过不同配置项来调用对应的组件。团队同学将组件类型和组件样式的 API 进行归类，保持 Variants 命名和 API 名称一致。按钮是一个很好的例子，可以看到以下配置项，采用和 API 一样的命名，类型、主题和尺寸等等都可以进行配置。与此同时，匹配API的特性，使用开关使其可扩展且易于使用，大家可以看到 disabled 采用开关的形式进行配置，可以轻松切换变体并与 API 强相关。另外也可以通过不同的 variants 配置，生成配置表，给到开发同学一一对应，开发同学只需要找到对应命名进行配置就可以，极大提高了拼装组件的效率。3.2.2 打造全角色使用能力
开发同学使用设计资源时找到一一对应 API 即可按类调用代码，对于设计师而言如果涉及修改样式则面对的是大量的工作，因为创建变体带来是倍增的组件数量。使用 .master 的方法可以更好同步修改最小颗粒度原子组件样式问题，同时为了避免过多的展示 component，添加“.” 在名称之前，可以将原组件进行隐藏。但因采用 .master 相当于 master 组件为基础组件，variant 组件相当于是 symbol 套 symbol 的情况，会衍生出大量隐藏图层，因此曾激活浏览器报警，不得已在大型组件中取消此能力，后续待浏览器技术方案支持时再同步添加。除了拉通组件类型和能力之外，还需要满足设计同学或者产品同学也能通过变体去演示不同状态。举个例子，导航菜单中选项需要满足二级三级菜单类型，通过变体嵌套变体的方法，满足其展开类型的区分，控制子组件进行配置数量，让设计资源组件更智能。3.2.3 数量之庞大
以按钮，下拉菜单，输入框，标签和树结构组件的变体工作量展示，可想而知变体带来是个巨大工作量，设计资源毕竟是二进制文档，通过视觉化来展示内容，在这里其实只是冰山一角，以按钮为例，团队就做了 2680 个变体，意思是 2680 个按钮，围观整个设计资源，所有组件约等于 20000 个。但使用者引用的组件仅存在一个或几个，通过变体的能力极大简化设计资源多类型多状态复杂性。
就在上周 Figma 在 Config 2022 中发布了更新的内容，共推出了 15 个新功能。TDesign 桌面端设计资源共针对自动布局和定位描边进行了适配，让组件更加合理设计样式更匹配开发能力。4.1 AutoLayout 自动布局 4.0
布局更新绝对定位，减少使用空画板。以下拉菜单为例子，设计资源是无法在嵌套变体情况下进行二级展开菜单，以往的设计方法使用的空画板进行设计，更新后可以使用绝对定位不占位置，减少了大量的空图层。负间距，堆叠组件更易于管理。以头像组件为例子，过去需要通过手动设置 frame 宽度满足头像折叠的效果，更新后折叠头像不用再套一层画板。排列顺序，内容展开更智能。以日期选择器或表单为例子，过去需要使用冗余图层和反转的方法设置组件自动布局的排列顺序，更新后只需要简单设置顺序即可，通过新的能力，在时间选择器的日期选择和年份选择上，用户也可以通过展开选择器组件展示交互内容，并保证上层元素置于顶层，让设计资源的组件具备更多交互状态可能。填充内容超出显示省略符号，文案内容更智能。以输入框为例子，过去需要建立多一层包裹层级来满足文案截断或文案超出不显示，尽可能保证组件的合理性。现在用户拖动输入框到达最小值会省略展示。除了输入框以外，团队将整个设计资源尽最大能力匹配超出显示省略符号能力。4.2 Individual Strokes 更新描边定位
描边组件设计更合理。以单选按钮组为例，过去设计资源单边描边更多是使用的阴影样式来进行叠加样式，如果更换全局的颜色使用阴影的设计方法会造成样式不同步的问题。更新描边定位后，不再使用阴影作为样式，描边组件更合理。组件分割线更合理，减少使用空图层。以选项卡为例，过去通过分割线组件与容器绑定，虽然复合设计逻辑，但在开发侧更多通过描边定位进行样式叠加。现在减少图层情况下，就能保持和开发组件样式的一致。随着开源后的发展，保持设计资源的一致是非常有挑战性的。为了让设计师设计组件之初能够具备系统使用组件和了解组件的嵌套关系，重新区分组件优先级，按组件复合度归类，分为高复用基础组件，低复用基础组件，复合组件，和定制化复合组件等级进行设计，保证整体系统管理，让组件嵌套关系更加合理和系统。例如最底层按钮和标签会套用到下拉菜单、标签输入框、列表等等地方，再往上通过按钮和输入框还会延伸出数字输入框对话框等较为高级的复合组件。新贡献者将带来的新的设计方法，尤其是在快速迭代时期，一个有据可查的设计资源将帮助多名设计师协作时保持组件的一致性。不同贡献者能够创建新组件、流程和功能都无需担心一致性，这使得新贡献者变得更加容易，每个人都能够为设计系统做出贡献。TDesign 桌面端设计资源在 5月21 日正式开源到 Figma 社区中，希望所有的使用者们都可以体验设计资源的能力。围绕着系统、标准和效率的目标，用户根据业务场景搭建系统变得异常简单和高效。设计系统是永远不会完成的产品，还有很多需要改进的地方，团队持续的努力将代码中所有能力迁移到设计资源中。目前 TDesign 官网桌面端也正式上线各技术栈 Live Demo 功能，用户也可以通过官网在线配置组件，给大家带来了更一致的用户体验。感谢阅读，希望大家可以在这里了解到 TDesign 是如何构建 Figma 设计资源的，欢迎反馈参与 TDesign 设计资源的体验，并给出你的建议和意见，帮助 TDesign 社区更好的服务大家。如果觉得满意，看文章的你，别忘了“这次一定”点上设计资源爱心。https://www.figma.com/community/file/1053279236128724321