江苏龙网

  1. 首页 > 资讯 > 科技 > >

|美团积木Sketch插件进阶开发指南


前段时间 ， 美团外卖技术团队积木Sketch插件“意外走红” 。 为了帮助更多的设计师小哥哥、小姐姐落地设计规范 ， 提升产研效率 ， 积木Sketch团队开始着手打造一个平台化的产品 。 本文介绍了积木Sketch插件进阶开发指南 。 希望通过本篇内容的学习 ， 大家可以知道如何真正实现一款可以与业务强关联且功能可定制的成熟工具 。
|美团积木Sketch插件进阶开发指南
本文插图

The fewer sources of truth we have for a design system, the more efficient we are.——Jon Gold
设计系统的真理来源越少 ， 效率就越高 。 ——Jon Gold
背景
1. 积木工具链体系
前段时间我们在美团技术团队公众号上发表了《积木Sketch Plugin：设计同学的贴心搭档》一文 ， 不曾想到 ， 这个仅在美团外卖C端使用的插件受到了更多的关注 ， 美团多个业务团队纷纷向我们抛出“橄榄枝” ， 表示想要接入以及并表达了愿意共同开发的意向 ， 其它互联网同行也纷纷询问相关的技术 ， 一时让我们有些“受宠若惊” 。 回想起写第一篇文章的时候 ， 我们的内心还是有些不安的 。 作为UI同学的一个设计工具 ， 有些RD甚至没有听说过Sketch这个名字 ， 我们很认真地修改过上一篇文章的每一句措辞 ， 争取让内容更丰富有趣 ， 当时还很担心不会被读者接受 。
积木Sketch插件的“意外走红” ， 确实有些出乎我们的意料 ， 但正是如此 ， 才让我们知道UI一致性是绝大部分开发团队面临的共性问题 ， 大家对落地设计规范 ， 提高UI中台能力 ， 提升产研效率都有着强烈的诉求 。 为了帮助更多团队提升产研效率 ， 我们成立了袋鼠UI共建项目组 ， 将门户建设、工具链建设以及组件建设统一管理统一规划 ， 并将工具链的品牌确定为“积木” ， 而积木Sketch插件便是其中重要的一环 。
|美团积木Sketch插件进阶开发指南
本文插图

积木品牌Logo
我们通过建立包含相同设计元素的统一物料市场 ， PM通过Axure插件拾取物料市场中的组件产出原型稿；UI/UE通过Sketch插件落地物料市场中的设计规范 ， 产出符合要求的设计稿；而物料市场中的组件又与RD代码仓库中的组件一一对应 ， 从而形成了一个闭环 。 未来 ， 我们希望通过高保真原型输出 ， 可以给中后台项目、非依赖体验项目提供更好的服务体验 ， 赋予产品同学直接向技术侧输出原型稿的能力 。
|美团积木Sketch插件进阶开发指南
本文插图

袋鼠UI工具链体系
2. 积木插件平台化
伴随着“积木”品牌的确立 ， 越来越多的团队希望可以接入积木Sketch插件 ， 其中部分团队也在和我们探讨技术合作的可能性 。 UI设计语言与自身业务关联性很强 ， 不同业务的色彩系统、图形、栅格系统、投影系统、图文关系千差万别 ， 其中任意一环的缺失都会导致一致性被破坏 ， 业务方都希望通过积木插件实现设计规范的落地 。 为了帮助更多团队的UI同学提升设计效率 ， 节约RD同学页面调整的时间 ， 同时也让App界面具有一致性 ， 从而更好地传达品牌主张和设计理念 ， 我们决定对积木插件进行平台化改造 。 平台化是指积木插件可以接入各个业务团队的整套设计规范 ， 通过平台化改造 ， 可以使积木插件提供的设计元素与业务强关联 ， 满足不同业务团队的设计需求 。
|美团积木Sketch插件进阶开发指南
本文插图

积木Skecth Plugin平台化示意
积木插件原本只是外卖提升UI/RD协作效率的一次尝试 ， 最初的目标仅是UI一致性 ， 但是现在已经作为全面提升产研效率的媒介 ， 承载了越来越多的功能 。 围绕设计日常工作 ， 提供高效的设计元素获取方式 ， 让工作变得更轻松 ， 是积木的核心使命 。 如何推动设计规范落地 ， 并且输出到各个业务系统灵活使用 ， 是我们持续追寻的答案 。 而探寻研发和设计更为高效的协作模式也是我们一直努力的方向 。


推荐阅读


上一篇：|首届“中国地理标志产品活力指数发布颁奖盛典”即将举行

下一篇：趣投稿|「新书推荐」前沿科技评论——全球视野下的创新发展与选择