1、共建前端基础设施,解放设计开发生产力TDesign 的对外开源之路孙哲TDesign 简介推行统一的设计/UI 组件体系设计与开发流程打通维护跨技术的组件库产品目录TDesign 简介TDesign 简介具有统一的设计语言和视觉风格,帮助用户形成连续、统一的体验认知,提供开箱即用的 UI 组件库和设计资源减少设计和研发的重复劳动。是腾讯各业务团队协同共建的企业级设计体系。TDesign 简介官网上线主题生成器 1期提供多端转化模板设计方案提供web 三期组件/mobile 二期组件starter 快速上手项目,支持 React 技术栈Mobile-Vue 设计验收完成,代码对外开源桌面端提供f
2、igma变体版本桌面端提供figma页面模板Starter 支持1套移动端模板迭代物料市场,确定新定位移动端提供figma变体版本完成桌面端组件动效优化Starter 上线主题配置能力Mobile-React 版本建设和对外开源为设计师提供 Figma UIKit Variant腾讯内部 Tea 升级到 TD上线多端转化解决方案模板和生态工具合作,内置 TDesign 基础组件库发布正式版本,孵化至少2个成功案例支持 国际化支持无障碍与适老化适配物料市场迭代2月4月6月3月5月8月11月12月卷入更多的oteam,例如 flutter oteam、数据可视化oteam,一起协同和完善新增 智慧
3、零售、医疗、金融 行业组件库,并对外开源9月总结设计体系和组件库专业文章/课程,建立技术影响力TDesign 简介为什么还要做组件库?统一公司设计体系同一个公司体系下,不同产业线用户体验却有比较大的差别01满足腾前端团队技术需求业界还没有哪一种技术栈产品占据明显优势地位0TDesign 简介 大企业产品体验统一的痛点02TDesign 简介 官方多技术栈/多端支持桌面端 50+组件移动端 40+组件腾讯第一个对外开源的公司级前端通用 UI 组件库与设计体系推行统一的设计/UI 组件体系TDesign 简介 从设计源头做起一般设计-研发流程统一 UI/设计体系 化繁为简,轻而易用包容多元进化连接
4、TDesign 的设计价值观统一 UI/设计体系 物料市场承载组件分享和复用需求物料市场通过标签区分不同资源类型从组件、页面模板、行业类型、下载热度等不同维度推荐第三方物料,在逐步运作中沉淀出优秀的社区产品统一 UI/设计体系 解决业务“最后一公里”的需求行业组件通用组件解决项目 40%的 UI 需求行业组件解决剩下的大部分需求统一 UI/设计体系 公司内已有组件库产品共建共赢统一 UI/设计体系 主流设计工具支持统一 UI/设计体系 方便快捷的全局定制主题Style Code可视化编辑设计与开发流程打通设计与开发流程打通 TDesign 组件上线流程新组件需求发起招募生成 APIUI 开发交
5、付技术栈 PRCRPMC 例会交互稿API 评审设计指南设计稿设计走查缩略图物料评估阶段准备阶段开发阶段验收阶段PMC 例会交互稿API 评审设计指南设计稿设计走查缩略图物料设计与开发流程打通 Design Token 贯穿设计开发流程FigmaStyle Code可视化编辑设计与开发流程打通 Figma Variants 对应组件 APIFigma组件 API官网 live demo维护跨技术栈的组件库产品维护跨技术的组件库产品 API 设计先行API 线上评审维护跨技术的组件库产品 工具化维护 API自动生成各技术栈对应组件产物维护跨技术的组件库产品 工具化维护 API抽象 Tnode 概念,各自表达实现跨技术栈维护 代码复用组件库分层治理跨技术栈维护 代码复用组件 UI/公共逻辑复用谢谢观看THANKS