by dabbott on 3/30/23, 3:50 PM with 61 comments
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 - dabbott@noyasoftware.com.
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 ethanbond on 3/30/23, 4:28 PM
I’m super excited by this direction. Even for designers like myself I think it could help us reclaim a lot of time for solving the hard parts of the problem!
Great work guys
by fishtoaster on 3/30/23, 8:43 PM
That said, the real value to me would be using this tool to make medium-fidelity mockups that look like my existing site. It looks like maybe your templates would allow me to make mockups in Noya that match my existing colors/etc, but I'd be coupled to ChakraUI. If the pre-existing components from my pre-existing site don't match Chakra's components, it sounds like I'd be out of luck?
by karaterobot on 3/31/23, 12:36 AM
One question I didn't see answered was: how does someone define one of these components? Does Noya infer the rules about which component to translate a user-defined shape into, or does someone have to go in and say something like "if it's the full width, and it's at the top of the screen, it's probably the navigation header"? It feels like defining the rules for page-level layout blocks, vs. fiddly little micro UI elements could get tricky.
Oh, and how do components get into the system at all? Does it have to be an off-the-shelf design system (like Chakra, which you mention supporting) that you've translated into Noya, or can I add my company's design system myself?
by JusticeJuice on 3/30/23, 5:23 PM
1. How are you going to get over the layout logic hump? Converting from elements on an x/y canvas to actually good frontend code (Properly nested dom elements, responsive etc) is really hard. I'm pretty sure it's why no 'design to code' tools are actually used in production.
2. Would you consider making this as a figma plugin, as opposed to a seperate tool?
by claytongulick on 3/30/23, 8:14 PM
1) I don't use react, I use web components. This product seems very React centric, which kills it for use for a lot of people
2) It's not helpful to me to be limited to the Chakra UI design system, in order for this to be useful for my teams, I'd need to be able to add our web component design system. I assume there would be some sort of "mapping" process where I could indicate "this is a header component" and "this is a sidebar" component, etc...
The absolute killer feature would be to allow me (storybook style) to add any web component and place it on the screen. I've been searching for a visual designer like this forever, it seems like the obvious solution with web components, but I still haven't found it.
by jefozabuss on 3/31/23, 8:24 AM
- When you use CMD key the active component loses the selection (visually) this is a bit confusing, e.g. I used CMD+D and seemingly nothing happened as the selection was lost for a while and the duplicated element was just put above the original element
- When duplicating an element you could maybe shift the clone's position with a small amount so the user can see it has been duplicated (e.g. top +20px left +20px)
- I think it needs a list/modal to see the components created (like the list in PS layers/Figma etc) so you can see what you have in your workspace (it will also kind of help with the duplication related problem above)
- I scrolled via trackpad by accident (in the left column area) and I could not get back to the area I was working with, I realized it will snap back after I resize the area (with the vertical line between the two columns or with browser resize) but I think it should also have a reset view button or similar to let the user do the same as it is not obvious
- Maybe it's a ChakraUI menu z-index bug but after opening the Project/Share menu you can open View/Export/Account menus in 1x click and access the tools on the left but only from starting from those 2 menus, if you start with View/Export/Account menus you need 2x clicks to close them and open the other ones next to them, the Project menu is seemingly outside of the latter problem.
by Tepix on 3/30/23, 5:10 PM
These designs are not new and exciting, quite the opposite.
I'm happy to be proven wrong!
by Daub on 3/31/23, 5:27 AM
This approach seems to work because you have rightfully assumed that 95% of what we create is template-driven.
by Karupan on 3/31/23, 1:42 AM
As someone who keeps running into problems with the design->develop iteration cycle, I’m going to watch this closely. Great work and good luck!
by joduplessis on 3/30/23, 6:04 PM
by noobcoder on 3/31/23, 4:49 AM
Also just curious, Is there a way to import our existing wireframes maybe Sketch/Adobe XD?
by WORMS_EAT_WORMS on 3/31/23, 2:15 AM
Make something messy, let AI iterate through ideas, repeat.
Congrats and seriously impressive stuff. Best of luck with it
by Existenceblinks on 4/1/23, 2:53 AM
by sizzle on 4/1/23, 4:11 AM
by darkhorse13 on 3/31/23, 12:14 AM
by candiddevmike on 3/30/23, 4:47 PM
by whoomp12342 on 3/30/23, 7:08 PM
by codetrotter on 3/30/23, 9:36 PM
by Soaphealer on 3/31/23, 8:09 AM
by mwcampbell on 3/30/23, 10:16 PM
How is the accessibility of the generated UI?
by moneywoes on 3/31/23, 5:33 AM
by brianjking on 3/30/23, 4:24 PM
thank you!
by monkey_monkey on 3/31/23, 10:07 AM
by whoomp12342 on 3/30/23, 7:01 PM
by savrajsingh on 3/31/23, 10:22 PM
by whoomp12342 on 3/30/23, 7:13 PM
by whoomp12342 on 3/30/23, 6:57 PM