连接设计师与开发者

UI Kit

自动化生产的 Figma 设计组件,变体属性与代码组件保持一致

插件

使用 Semi Design 设计转代码插件,一键将设计稿转为前端代码

安装插件

@tuotuo: 一直以来,Semi 团队都在尝试通过各类自动化手段,优化日常工作流程,帮助设计和研发提升合作效率,改进工作方式。

我们发现,设计与研发不同源,是众多问题的根因 —— 设计师与工程师没有用同一套语言,没有处在同一个环境,而这会导致一系列副作用:沟通低效、产品品质差、维护成本高...等等。

如何为 Semi Design 的用户缩小乃至消除设计与研发之间的差距,让源头合二为一,是我们会持续思考并探索的方向。

了解 Semi Design 方案背后的思考

设计师:使用具有转代码能力的组件

克隆 UIKit,开箱即用,无需改变习惯,与 API 对齐的变体属性和组件结构
定期更新,与线上版本保持一致

使用 UIKit

研发:设计稿一键转代码

接到方案,选中设计稿,使用插件一键转代码
一键完成页面布局、组件属性识别,支持导出为多种框架代码

下载插件

过去

设计师手工创建并维护 UIKit
有限的变体属性,与 API 不一致
组件图层命名难以规范
自动布局设置缺失
随时间推移,不一致越来越多
设计稿从零开发,UI 还原浪费精力

现在

扫描代码自动生成 UIKit
变体属性增加 +98% ,与 API 完全对应
与代码对称的图层结构
更完备的自动布局支持
组件发版后,可一键同步 UIKit
设计稿一键转为前端可用代码
Figma 同步 DSM 自定义主题
Figma 组件属性支持
实现 50+ 组件全覆盖
更多基于真实组件的页面模板

让设计与开发同源

基于真实组件完成页面设计,前端代码一键转
* 本页面由 Semi Design 自动生成

开始使用

上传报告

文档中文名

*

文档英文名

文档链接

*

报告标签

结论

备注

连续上传

© 2021 - 2024 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED