Getting from a product idea to a design is too hard. Wireframing tools (e.g. Balsamiq) are limited and their output is too low-fidelity to get people excited about the idea. On the other hand, high-fidelity design tools (e.g. Figma) require advanced skills and are better for tweaking fine details than hashing out a big picture. Meanwhile, companies have an insatiable need to make new screens and change existing ones, and hiring more designers is time-consuming and expensive.
David and I were on the design tools team at Airbnb when we realized there’s another solution: let designers encode their knowledge (e.g. design rules and components) into a tool, then let non-designers (PMs, marketing, engineers) use that tool to make new screens and features. This helps remove design as a bottleneck for a lot of product development. We built such tools at Airbnb, and with Noya we’re building them for product teams everywhere.
Current design tools are too freeform for non-designers to design great products. They let you do anything, like draw rectangles and move text blocks anywhere, so it's easy to mess things up, introduce inconsistencies, and so on. With Noya, designers set up "guardrails" in the form of a design system (rules and components for a company's design), then non-designers work within those constraints. This makes it harder to mess up and quicker to build something that fits in with your product. Footguns begone!
It all starts with wireframing, i.e. drawing a minimal layout that shows the elements that would exist on the screen. Noya combines wireframes and design systems to generate high-fidelity designs and code. If you have an idea for a user interface, you can use Noya to quickly wireframe that idea by clicking and dragging to place blocks for each element of your user interface. For each block, choose a type and provide any content that goes inside it.
Based on the rules and component library of the design system you select, Noya automatically turns your wireframe into a high-fidelity design. This design can be exported to design files, to Figma or Sketch, or to React code.
(If you’re curious what the React code looks like, try exporting and take a look! There’s plenty of room for improvement, especially around responsive layouts, but we think it’s a reasonable starting point. The code export is configurable on a per-design-system basis so that it’s closer to a company’s preferred standards).
Most tools in this space are optimized for either low-fidelity wireframes that are quick to create (e.g. Balsamiq), or high-fidelity output that’s slow to create (e.g. Figma). We think there’s a gap in the market for a great wireframing tool that produces a high-fidelity output quickly. For example, two-thirds of Figma users are non-designers. While there are many valid reasons for a non-designer to use Figma, there’s often a lot of upfront effort required to learn the tool and set up components. We think there should be a lower-effort way for non-designers to create high-fidelity designs.
Based on feedback from our Show HN (https://news.ycombinator.com/item?id=34848583), we’ve improved our onboarding, revamped our entire block library, and added a documentation reference for each block type. The docs are interactive, so you can play with our editor without signing up: https://noya.io/app/docs.
Startup founders and PMs have used Noya to build landing pages, dashboards, and other flows of their apps. We have some templates on our site (https://noya.io/templates) that give examples of what people commonly build in Noya. We use Noya ourselves, and have been surprised by how frustrating it was to go back to existing design tools after using even the earliest prototypes of Noya. Existing design tools just aren’t built for the comprehensive design systems that products are based on today.
The source code is available here (though largely undocumented & unlicensed): https://github.com/noya-app/noya. We’re not focused on growing our open source community or supporting other design tool builders just yet, so we haven’t published our packages (renderer, canvas, etc) to npm, but we’re planning to use the Apache V2 license. We make money by offering a paid subscription.
Noya currently supports one design system based on Chakra UI. We’re adding additional design systems soon, including Material Design, as well as the ability to import custom design systems. If your company has an open source design system and you’re interested in trying Noya with it, we may be able to integrate your design system for free. Get in touch if you’re interested - [email protected].
We’d love for you to try Noya and let us know what you think! It’s still very much an MVP and all kinds of feedback are welcome.
by Andrey
Azimov