by Colm Tuite

Introducing Modulz: The Next Step in Visual Coding

Modulz Composer

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

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.

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

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.

Interactive states

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

Styling a mouseover state in Modulz

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.

The code export UI in Modulz

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 Theme screen for defining your design system.

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.

Design linting in Modulz

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

“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
“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
“This really has some ground-breaking ideas!”—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
“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
“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
“This new visual coding tool looks amazing. It fills a gap no like no other tool I’ve seen.”—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
“My world was blown this morning watching your video. I’ll definitely be backing”—Amanda Lucas
“Finally, somebody solved the biggest problem in UI design”—Ugur Akdemir
“Stop everything you’re doing and go back 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.

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.

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

  • Support for more CSS-in-JS libraries like emotion, styled-jsx etc.
  • Support for exporting to vanilla HTML/CSS
  • Export component data to JSON
  • Export your theme to utility CSS frameworks like Tailwind
  • Wider code library support (Vue.js, Preact, React Native etc.)
  • Remote device preview / mirroring
  • Offline mode (Modulz is a progressive web app)
  • 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

Our faces

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.

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.

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.

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

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.

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

Thanks everyone ❤️