如今,设计工具多如牛毛,从 PS、AI 到如今的 Sketch、Figma,想要构建一套数字产品我们有众多选择。但是,这些设计工具都仅仅是在绘制图形方面十分擅长,而在设计可交互组件、复杂的布局和用户界面时,我们仍需要更加强大的工具。

Modulz 就是这样一款专门用于构建交互式、产品级组件或界面的工具。

Modulz 概览

Modulz 有点像 Sketch 或 Figma,但是它没有矢量绘图,而是专注于组件化的界面构成,带有状态和响应式布局。它其实更像 Webflow 这款设计工具,使用标准的 Web 布局方式来组织元素,而且支持代码导出,更适合用来构建设计系统。

界面构成

Modulz 主要有三个部分组成——Theme、Editor 和 Composer,即设置颜色、字体等基本规则的主题,进行组件编辑的编辑器,进行组件组合排版的组合器。

界面构成

特性

根据 Modulz 自己的介绍,它主要包含以下这些特性。

完全响应式

当你设计好一个界面时,在组合器里面可以直接添加一个新的设备,界面就会被复制并自适应新的设备尺寸。

完全响应式设计

如果你不满足这种简单的拉伸自适应,还可以自己设置更加复杂的断点规则,来控制响应式行为。比如像下图这样,控制 TopBar 在屏幕宽度变大时文字颜色为白色。

断点设置

组件、状态

组件是构成界面的基本元素。在左侧的界面结构中可以添加组件,它们会根据位置自己转化成嵌套的父子组件关系。而在右侧的属性控制中,你可以给组件添加布局方式,以及尺寸和内外边距,和 Web 布局方式一模一样。

组件

双击组件,则可以进入组件内部,通过属性控制来调整它的外观样式,还可以给组件添加不同的状态。

状态

产品级代码导出

正是因为这种完全遵循 Web 规范的可视化设计方式,让 Modulz 能够导出产品级的代码。目前 Modulz 支持 React 组件代码导出,以后会陆续支持原生 HTML/JS/CSS、React Native、Vue 等。

支持产品级代码导出

目前 Modulz 团队还在完善产品,预计快要发布公测了。如果你感兴趣可以去它们官网了解更多,或者去 Kickstarter 支持他们发起的众筹。

众筹地址:https://www.kickstarter.com/projects/stephenhaney/modulzthe-next-step-in-visual-coding