可视化编码

by Colm Tuite

通过Colm Tuite

Modulz简介：可视编码的下一步 (Introducing Modulz: The Next Step in Visual Coding)

Modulz is a visual code editor for designing and building digital products — without writing code. Last week, we launched our Kickstarter campaign.

Modulz是用于设计和构建数字产品的可视代码编辑器，而无需编写代码。上周，我们启动了Kickstarter广告系列。

In The Design Tool Dilemma, Design Tools are Running Out of Track and How to Construct a Design System, I wrote extensively about how our current crop of design tools are not well suited to UI design.

在“设计工具困境”中，“ 设计工具正在走失轨道”以及“ 如何构建设计系统”中，我广泛地写了关于我们当前的大量设计工具如何不太适合UI设计的文章。

The amazing response to those posts has inspired Modulz: a new breed of design tool which exports production-ready components.

对这些职位的惊人React激发了Modulz的灵感：一种新型设计工具，可出口可用于生产的组件。

什么是Modulz，它有什么用？ (What is Modulz and how is it useful?)

On the surface, Modulz looks familiar. You organise your layers in the left sidebar, apply styles from the right sidebar and watch your design come together on the canvas. But Modulz is way more powerful than that.

表面上，Modulz看起来很熟悉。您可以在左侧边栏中组织图层，在右侧边栏中应用样式，然后在画布上观看设计。但是Modulz是比那更强大。

互动状态 (Interactive states)

Rather than drawing static shapes, you’re working with interactive components. Styling each state individually. Adding component variants.

您正在使用交互式组件，而不是绘制静态形状。分别设置每个状态的样式。添加组件变体。

代码导出 (Code export)

You can export production-ready components. We’re starting with React and styled-components. Soon, we’ll add support for other CSS-in-JS libraries like emotion and styled-jsx. Then, Tailwind and vanilla HTML/CSS. In the future, we hope to add support for Vue, Preact and other component-based libraries.

您可以导出生产就绪的组件。我们从React和styled-components开始。不久，我们将添加对其他CSS-in-JS库的支持，例如情感库和样式化的jsx。然后，使用Tailwind和香草HTML / CSS。将来，我们希望增加对Vue，Preact和其他基于组件的库的支持。

设计系统 (Design systems)

Modulz goes much further than color swatches. Define a complete design system including font sizes, spacing, colors, shadows etc, then reuse them to style your components. Tweak a style in your theme and it updates across your entire project.

Modulz比色板走得更远。定义一个完整的设计系统，包括字体大小，间距，颜色，阴影等，然后重新使用它们来设计组件样式。在主题中调整样式，它会在整个项目中更新。

设计整理 (Design Linting)

You can automate design tasks with Modulz design linting feature. Modulz can programmatically suggest improvements to things like color contrast, line length and cross-browser performance issues.

您可以使用Modulz设计插入功能自动执行设计任务。 Modulz可以以编程方式建议对颜色对比度，行长和跨浏览器性能问题进行改进。

Here’s what people are saying about Modulz so far:

到目前为止，人们在谈论Modulz：

“State is (almost) everything in UI design. Yet no design app that I’ve seen has it baked in. We’re all jumping through hoops for a damn hover state! Go back Modulz for the mental health of designers worldwide.” — Eric Pitcock

“状态几乎是UI设计中的一切。但是，我所见过的任何设计应用程序都没有融入其中。我们都陷入了一个令人迷惑的悬停状态！返回Modulz，了解全球设计师的心理健康。” — 埃里克·皮特科克

“I ❤ Sketch, but there is no *great* tool for translating product designs into code. The Modulz approach is interesting: instead of pixel-perfection, the app creates responsive, interactive designs that export to React.”—Leanne Bathurst

“我❤素描，但是没有*伟大的*工具可以将产品设计翻译成代码。 Modulz的方法很有趣：该应用程序创建了自适应的交互设计，而不是像素完美，可导出到React。” — Leanne Bathurst

“This really has some ground-breaking ideas!”—Henrik Juhl

“这确实有一些开创性的想法！”- Henrik Juhl

“I am loving the Modulz #CloseTheGap slogan. Why bridge a gap when you can get rid of the gap all together? Fill that gap in!”—Jina Anne

“我喜欢Modulz #CloseTheGap标语。当您可以一起消除差距时，为什么要弥合差距呢？填补这个空白！” — 吉娜·安妮

“This looks incredibly promising, excited to see how this turns out.”—Dianne Alongsagay

“这看起来令人难以置信，希望看到结果如何。” — 黛安·阿隆萨加

“Design system built in — brilliant! This could finally be the design tool we’ve been waiting for. Happy to be a supporter!”—Aparajita Fishman

“内置的设计系统-辉煌！这最终可能是我们一直在等待的设计工具。很高兴成为支持者！” — Aparajita Fishman

“Excited to be an alpha backer on this project. Hope to see these guys succeed in what they’re doing. Take a look.”—Brice Gramm

“很高兴成为该项目的Alpha支持者。希望看到这些人在他们的工作中取得成功。看看。” — 布莱斯·格莱姆 ( Brice Gramm)

“This new visual coding tool looks amazing. It fills a gap no like no other tool I’ve seen.”—Douglas Bonneville

“这个新的视觉编码工具看起来很棒。它填补了我从未见过的其他工具的空白。” — 道格拉斯·邦纳维尔 ( Douglas Bonneville)

“Drop everything right now and go back Modulz on Kickstarter. A tool that exports production-ready components in React is a dream I have been chasing forever.”—Abdus Salam

“立即丢弃所有内容，然后在Kickstarter上返回Modulz。我一直追求的目标是在React中导出可用于生产的组件的工具。” — Abdus Salam

“My world was blown this morning watching your video. I’ll definitely be backing”—Amanda Lucas

“今天早上观看您的视频时，我的世界被震撼了。我一定会支持” — Amanda Lucas

“Finally, somebody solved the biggest problem in UI design”—Ugur Akdemir

“最后，有人解决了UI设计中的最大问题” — Ugur Akdemir

“Stop everything you’re doing and go back Modulz”—Steve Schoger

“停止您正在做的所有事情，然后回到Modulz” — Steve Schoger

“Backed! This needs to happen!”—Vlad Magdalin

“支持！这需要发生！” — 弗拉德·玛格达琳

对未来的计划 (Plans for the future)

We have huge ambitions for Modulz. The features we highlighted here are just the first step.

我们对Modulz有雄心壮志。我们在此处重点介绍的功能只是第一步。

Later next year, we’re planning to introduce team features including component import, so product teams can design with their existing component libraries.

明年晚些时候，我们计划引入团队功能，包括组件导入，以便产品团队可以使用其现有的组件库进行设计。

As the platform matures, the end-game is to support seamless transfer of code between Modulz and text editors. Developers editing the code manually, inside a text editor. Designers editing that same code visually, inside Modulz.

随着平台的成熟，最终的结果是要支持Modulz和文本编辑器之间的代码无缝传输。开发人员可以在文本编辑器中手动编辑代码。设计师可以在Modulz中直观地编辑相同的代码。

On top of that, plans for more general features include:

最重要的是，更多常规功能的计划包括：

Support for more CSS-in-JS libraries like emotion, styled-jsx etc.支持更多CSS-in-JS库，例如情感，样式化jsx等。
Support for exporting to vanilla HTML/CSS支持导出到原始HTML / CSS
Export component data to JSON将组件数据导出到JSON
Export your theme to utility CSS frameworks like Tailwind将主题导出到实用CSS框架(如Tailwind)
Wider code library support (Vue.js, Preact, React Native etc.)广泛的代码库支持(Vue.js，Preact，React Native等)
Remote device preview / mirroring远程设备预览/镜像
Offline mode (Modulz is a progressive web app)离线模式(Modulz是一种渐进式Web应用程序)
Prototyping—state-based interactions, screen transitions etc.原型制作-基于状态的交互，屏幕过渡等
Massive library of components, templates, icons, illustrations etc.大量的组件，模板，图标，插图等库。

Ultimately, we want to fix the disconnect between product teams. To help designers collaborate better with developers, without code.

最终，我们要解决产品团队之间的脱节问题。帮助设计人员与开发人员更好地协作，而无需代码。

To encourage more inclusive digital products by automating accessibility.

通过自动辅助功能来鼓励更具包容性的数字产品。

To reduce bottlenecks by building modern tools which empower whole teams to work on their end products.

通过构建使整个团队能够使用其最终产品的现代工具来减少瓶颈。

To get everyone working on the same product. Together.

让每个人都在同一个产品上工作。一起。

团队 (The team)

科姆·图特 (Colm Tuite)

Based in Dublin, Colm handles product design and front-end dev. For the past four years, Colm has worked on design tooling. He previously founded Plexi, another design tool. You can find him on Twitter, Dribbble and his site.

Colm总部位于都柏林，负责产品设计和前端开发。在过去的四年中，Colm致力于设计工具。他之前创建了另一个设计工具Plexi 。您可以在Twitter ， Dribbble及其网站上找到他。

斯蒂芬·海尼 (Stephen Haney)

Based in Seattle, Stephen handles back-end dev and JavaScript engineering. Stephen has over 15 years experience with many Fortune 500 companies and has authored two books on game dev. Find him on Twitter and Github.

Stephen位于西雅图，负责后端开发和JavaScript工程。 Stephen在多家财富500强公司中拥有超过15年的经验，并撰写了两本有关游戏开发的书。在Twitter和Github上找到他。

您将如何提供帮助 (How you can help)

We’ve been working full-time on Modulz for four months. We already have a lot of the core product complete. But Modulz is a complex product and we have big plans for it.

我们在Modulz上全职工作了四个月。我们已经有很多完整的核心产品。但是Modulz是一个复杂的产品，我们对此有很大的计划。

We’ve received some support from InVision and Adobe. But we need all the help we can get.

我们已经获得了InVision和Adobe的一些支持。但是，我们需要获得的所有帮助。

To thank you for your support, we’re offering unlimited, lifetime access to Modulz on Kickstarter. There’s also a cool goodie bag full of high-quality icons, templates and assets! It would mean so much to us if you would consider supporting our work.

为了感谢您的支持，我们在Kickstarter上提供了对Modulz的终身无限制访问。还有一个很酷的糖果袋，里面装满了高质量的图标，模板和资产！如果您考虑支持我们的工作，这对我们意义重大。

For more info, check out Modulz website, Twitter and Spectrum.

有关更多信息，请访问Modulz 网站， Twitter和Spectrum 。

Thanks everyone ❤️

谢谢大家❤️

翻译自: https://www.freecodecamp.org/news/help-us-kickstart-modulz-5751775ed435/