Show HN: Noya – A new kind of design tool

https://www.noya.io/home

by dabbott • 3 years ago

285 75 3 years ago

Hi HN. I've been working on a new browser-based design tool that's ready for you to try.

The idea is you work on your design in low fidelity wireframes, while still getting a high fidelity output that you can share or use as a reference for your implementation. The way it works is by mapping low fidelity blocks you draw into high fidelity design system & React components.

I spent several years working on design tools at companies like Airbnb, and I think the ideas behind many of the tools we built for designing at scale could really help startups and small teams as well. I would love any feedback you have!

PS: Most of Noya is open source at https://github.com/noya-app/noya

zol2• 3 years ago

This is neat! Is the idea to go in the direction of low code app builder or a high fidelity design tool? (or both??). What parts are planned as open source?

dabbott24• 3 years ago

So far I've been thinking of it as a prototyping tool where you can (soon) bring your own React components. But probably it'll be more on the side of wireframing/design tool than app builder.

The app frontend is open source while the backend is closed source, at least for now. It should run without the backend, but some things like sharing projects won't work. I'm planning to publish the individual frontend packages to npm as an "SDK for building design tools", so anybody can import "noya-canvas", "noya-renderer", etc, to build their own design tool.

zol2• 3 years ago

That's awesome, thanks for sharing those components with the world!

blowski• 3 years ago

Interesting, I can imagine this being really useful for me as I’m an awful designer and just want a working UI prototype to test user journeys.

How does it work with responsive layouts?

dabbott24• 3 years ago

Great question! I'm still experimenting with how responsive layouts should work, but so far: small/simple components like "Button" aren't responsive, while more complex components like "Hero" have responsiveness built-in.

At the css level, "top-level" components are absolute positioned, but nested components are layed out with flexbox.

There's no way to bring your own React component library yet, but once that's possible, you can always make things responsive in the library itself too.

onethought• 3 years ago

Feels like you’ll need to be leveraging something like container queries in order to make smaller components responsive.

eyelidlessness2• 3 years ago

At the css level, "top-level" components are absolute positioned

I’m not the target for this kind of tool, so please take this as a soft critique if any at all: everything up to this point has struck me as positive, but this registered a big “yikes!” in me. I’d think top level components would be by far the simplest to handle reflow without any specific positioning considerations.

dhc02• 3 years ago

This is so impressive. Reminds me of when I (a copywriter) would sit next to a great designer, saying "try this" and "what about that" and watching my nebulous feelings about the thing turn into reality.

dabbott24• 3 years ago

I really enjoy that process of watching an awesome designer work their magic too!

That's one of the things I really missed while working at a big co like Airbnb. The infra team sat separately (depending on the re-org, in a different building) from the design team. I feel like so much great stuff happens when sitting side-by-side.

dannyeei• 3 years ago

If you like watching design happen you should give the Relume Design League a watch on YouTube. Top designers get 30 minutes to design a website. https://www.youtube.com/live/-78khPk3Lpk?feature=share

Disclaimer: I work at Relume

rurabe• 3 years ago

Looks so promising, what's the timeline for something like MUI?

dabbott24• 3 years ago

MUI is probably the design system I'll add next, but as for the timeline I'm not really sure. I want to go a little deeper with Chakra UI and explore e.g. theming before branching out to other design systems.

swyx• 3 years ago

hey cool demo! i just watched the video, one thing that is missing is for me to be able to see the output code. if you showed the code output at the end and it looked good i'd be really sold. but nice work OP!

dabbott24• 3 years ago

That's a great idea!

vmatsiiako• 3 years ago

Whoa!! I heard about Noya before, because we're in the same YC batch, but never seen a demo. Looks very cool what it can do. Great work!

dabbott24• 3 years ago

I'm glad you like it! I think we chatted about it before but I don't think the product was demoable yet

Edit: I didn't know HN doesn't support emojis, cause I just added one but it got stripped out lol

ar_turnbull• 3 years ago

This is pretty cool! As a designer I can see the potential but the demo feels a bit simplistic — it might make a more compelling demo if you connected Noya to a higher fidelity design system than basic bootstrap.

Who is your target user? Right now it feels like this could be a superpower for non-designers but a bit limiting for designers.

I remember a medium article (I think?) about the Airbnb team building something similar to transform whiteboard sketches. Were you a part of that work?

Thanks for sharing, hope you don’t mind the feedback — the tech is impressive!

dabbott24• 3 years ago

This is super useful feedback!

I definitely want to support more design systems, including higher fidelity ones. I started with Chakra due to its popularity and simplicity, but agree that visually it's not the most compelling demo.

I think the people who will get the most value from what Noya can do today are founders, PMs, researchers, and engineers - people who want to show a mockup to their team or customers, but who don't want to spend hours in Figma.

Part of the goal, which I think could be valuable to designers too, is to help smaller companies leverage design systems without needing a person/team to support them. E.g. Airbnb had a design system team AND a design tools team, and I think that's a big part of what made it work. At smaller companies, trying to use a design system without the proper support can often make things worse. We think Noya might fill that gap. With Noya, a smaller company could make mockups and prototypes with their existing React component library, without having to maintain a separate Figma library.

My cofounder David worked on the Airbnb sketching interfaces project: https://airbnb.design/sketching-interfaces/. But mostly the output of that plugged into the higher fidelity (internal) design tools that David and I were building.

itronitron2• 3 years ago

Why the obsession with arranging rectangles on a screen? Anyone can do that in any number of tools. The blind spot that most designers have is in defining workflows. Something that helps designers with that would in fact be a new kind of design tool.

dabbott24• 3 years ago

Designing individual screens is just the beginning - workflows are coming!

itronitron2• 3 years ago

Cool, a tool that aids the collaborative design of workflows through user interfaces will be useful for a lot of teams.

Xeoncross2• 3 years ago

I would encourage you to put together a collection of demos. I'd love to browse and play with samples that show all the different layouts I could make to quickly understand Noya's capabilities and answer my questions about edge cases.

dabbott24• 3 years ago

I love this idea! I'm going to try to have a demo gallery up by monday.

Xeoncross2• 3 years ago

Thanks, I signed up and will be back to play with more things as this promising project progresses. I can imagine a lot of features on the roadmap that take this pretty far from what it is today.

customaccount• 3 years ago

No need for developers? Because this company is going to be the future haha

dabbott24• 3 years ago

With everything happening in AI I don't know if any job is safe lol. But at least for now, the code Noya outputs is just a starting point. A dev will likely still need to clean up the layout and plug in real data.

clay_the_ripper• 3 years ago

I have been waiting what feels like 10 years for a toolkit like this. Just signed up and will dig in more, but initially this is solving a lot of problems for me as an entrepreneur. I manage the product and set the direction, but I don’t touch the actual backend code. Everything else though (design, website, marketing, sales, creative direction, product) falls to me. I think a lot of folks are in this position.

-keeping design consistent from wireframe to mock-up to finished product is a challenge. Esp with small, bootstrapped teams without a dedicated design person (let alone department) consistent, professional design is a challenge. This will allow me to mock-up exactly what I want and pass it off to dev in one process.

-I use figma, balsamiq, photoshop and have tried probably every other wire framing tool out there. None of them actually solve this problem because they can’t generate the actual code. That is a crucial part.

-This bridges the gap between having a designer create a design system and deliver mood boards, fonts etc. and actually putting those things into practice technically and consistently. Getting a design made isn’t the problem, there are a million designers out there - actually using it consistently in a way that’s practical is another challenge entirely.

Thanks for this product, can’t wait to actually use it more.

dabbott24• 3 years ago

I really appreciate the thoughtful feedback. You described the problem extremely well - I might have to use some of those points when I talk about Noya!

Honestly the current version is an MVP and probably won't deliver on the promise just yet. But I'm confident we can make it good enough to fill that gap in tooling.

If you get stuck or don't like how things work, feel free to throw feedback at us. We've added/updated a lot of stuff based on what the first few people have suggested already.

phphphphp• 3 years ago

Noya looks great, so this isn't a criticism of them, that said:

keeping design consistent from wireframe to mock-up to finished product is a challenge [...] this will allow me to mock-up exactly what I want and pass it off to dev in one process [...] I use figma, balsamiq, photoshop and have tried probably every other wire framing tool out there.

If you have a team of developers and they're not able to deliver to a specification, the problem is with the developers, not the tools you're using. Code generation does not replace developers, it's an augmentation at best, and so if you're running into these challenges with your current tooling then you're going to run into them with Noya (or any other tool that does not replace your developers).

You should either replace your developers with developers who can deliver to a specification, or change your approach to business (by not building software any more). I'll bet that the problem you've described here is not your only problem with the developers, rather it's one symptom of the problem.

Code is the easy part of software engineering, any competent developer can churn out code faster than it can be specified. The hard part of building software is translating a business need into a specification. Prototyping tools (like Figma) are very helpful upstream because they help the business provide a much more robust specification -- if you're building a prototype in Figma of how a user interacts with a page, you won't forget to explain what a specific button does.

If you're already doing all of that work to provide developers with a pixel-perfect rendition of what you want, and they're still not delivering it, just giving them a bunch of code instead to represent that design is not going to solve the problem.

A helpful model for evaluating the development work of developers is to think of it like construction workers: if a construction worker is given a plan for a square 250 sqft bedroom, and they build a 100 sqft shed instead, and you had clearly communicated that you wanted a 250 sqft bedroom, you would not think the input was the problem. You'd start to question the workers. Just because you can't write code, does not mean you need to allow developers to get away with churning out things that aren't what you've asked for.

MrJohz• 3 years ago

I broadly that this sounds like a people problem rather than a tooling problem, but I would add:

If you have a team of developers and they're not able to deliver to a specification, the problem is with the developers, not the tools you're using.

Or the problem lies in the designers providing the specification, which is also a situation I've seen a few times. A good design specification isn't just providing a view of the overall layout, it's also providing the pieces that went into that design: the visual components, the guidelines used for layouts, a list of colours and distances used, etc.

Simply providing a "pixel perfect" version will not get you good results, because that's essentially a lossy translation of the designer's intent. To implement that intent, you need information then just, for example, how big each button needs to be, you need to know how big a button can be, how small it can shrink to, what should happen with oversized or undersized text, how it will be positioned in its containers etc. Partly that's because intent is often a clearer way to communicate things than results, but mainly it's because there's no such thing as a pixel-perfect render target. Browser sizes can change, phones can be rotated, and people will insist on all sorts of different resolutions. It's only by describing intent (this element should fill the space, this point should be equidistant between these two points, etc) that you can adequately support all these situations.

That said, I broadly agree with you that this sounds more like a people problem than a technology problem.

dmitriid• 3 years ago

None of them actually solve this problem because they can’t generate the actual code. That is a crucial part.

Because there are a million ways to generate that code (if we're talking about the browser), and they will all break when coming into contact with reality.

- your sizes are in em/rem, and your root font size is off? Goodbye design

- you absolutely need something at the bottom of the screen (think media controls), and you have absolute positioning? Goodbye design for large combinations combination of screen/positioning

- you need something centered on, say, third element from the right? And then another element is added on the left? Goodbye design

- you need something animated? Goodbye design

- etc. etc. etc.

However, for some established patterns you might get away with some standard design choices and some generated code

wx196• 3 years ago

If you are targeting code generation, try Framer.

MoSattler• 3 years ago

Things like these make me really scared for my job as a programmer. Take that as a compliment.

dabbott24• 3 years ago

lol. It's only a matter of time!

eyelidlessness2• 3 years ago

Heh. My long time attitude towards programming has been that my job is to put myself out of a job. Thankfully it’s an impossible task! To the extent a tool like this or anything you or I build obsoletes some function of our labor, there will always be more work fill the space that created (whether it’s more sophisticated work, or more capacity to reach higher-hanging fruit, or…).

thawab• 3 years ago

Hello Devin, I saw you the first time when you demoed Deco. Looking forward for testing Noya, hope tailwind integration is in the roadmap.

dabbott24• 3 years ago

Whoa, that was so long ago!

There's a basic tailwind integration already - on some blocks you can write tailwind classes to style them e.g. #bg-red-500, #shadow. But the code export still includes Chakra UI components. At some point we want to support exporting plain html/React + tailwind without Chakra or other design systems.

jdauriemma• 3 years ago

Looks amazing, I think the Professional tier seems like a great value in particular. I would absolutely pay more than $10/mo for this tool if UI design were part of my day-to-day.

dabbott24• 3 years ago

Thanks for the feedback! I hope most people feel that way :)

At least for now it's pretty rough around the edges, so I'm hoping to underpromise and overdeliver

domlebo70• 3 years ago

Works great. I am getting odd refreshes when using it however

dabbott24• 3 years ago

I should have error reporting for that and can look into it. Thanks for the heads up!

ArloL• 3 years ago

FYI: Looking at the homepage and the video Firefox showed me a message that this website is slowing it down

dabbott24• 3 years ago

Interesting, thanks for the report. I'll check it out.

junglistguy• 3 years ago

Ok this is catchy, and cool, a web template with a different interface. BUT the world changed a few days ago.

In the 'age' of GPT, interacting with software via 'tools' is severely outdated.

Further - the era of web pages is just about over. I don't yet know what will replace them, talking heads? A talking splash screen? Or something else? Or maybe we will finally be free of staring at pixels? I don't know, but the change will be bloody fast.

All great, but these days it seems outdated. I don't buy it.

imiric• 3 years ago

If anything changed in the last few days is that we saw how flawed LLMs are at returning reliable information. They can't even replace search engines yet, let alone web pages or truly disrupt how we interact with software. If this is the best tech giants can do, then we clearly have a few more years until we can take them seriously.

So I think you're wildly overestimating AI tools, and underestimating that design tools like this are still very valuable.

dabbott24• 3 years ago

At least for the time being, you still need to tell GPT what you want before it generates something. Noya works at a level of detail that's more suitable for telling GPT what you want than most existing options.

moneywoes• 3 years ago

Can’t tell if this is satire. What are these GPT applications?

jdthedisciple• 3 years ago

Honestly looks amazing but my greatest fear with these sort of tools is that what often happens is the moment you wanna fine tune here or cut an edge there you're completely stuck due to the constraints of the system causing immense overhead to fix some tiny issue but maybe the author can convince me otherwise anyways thanks for listening and good job cheers.

dabbott24• 3 years ago

This is definitely important to consider! I think our "escape hatch" is that you can generally add tailwind css classes to any block (or at least, that's the goal) which means that most things are possible.

Since Noya is web-based, there's a lot of options to avoid getting completely stuck, though some things are certainly more difficult than others.

nbzso• 3 years ago

As an experienced designer from the older generation, I have grown weary of the endless layering of software-as-a-service (SaaS) over SaaS, plugins, and extensions that has become commonplace in the modern design industry.

A decade ago, I relied on simple tools like Inkscape (to remove Adobe hegemony for my workflow) for mockups and high-fidelity design, using HTML and CSS for coding a prototype. I could open and work on those files without any intermediaries, making my work much more efficient.

Today, I find myself forced to use Figma for design and collaboration, Notion for organization, and Webflow (SaaS Dreamweaver) for creating prototypes, all while relying on countless plugins for Figma to compensate for the software's shortcomings. It seems that designers are now more focused on keeping up with the latest updates, trends and tools than on delivering solutions to real-world problems.

It's time for a change. We need a new tool that simplifies our workflows, focuses on the needs of designers, and offers a library of boilerplate design system solutions with headless components and tokens. This tool should be accessible to offer the option to export code and assets without any paywalls or SaaS limitations (on top of subscription). Such a tool could revolutionize the design industry and save us all valuable time and resources.

Currently, my subscription total for all the different tools I use exceeds $120. With a simpler, more streamlined workflow, designers could focus on their work, rather than the tools they use.

lukasfischer• 3 years ago

I feel you! Especially when working with larger more complex projects, Figma files and code tend to diverge. For me the code is the source of truth and Figma a wished future state. I’d love to have a tool, where I can “reimport” code and work out ideas in Figma and the implement and iterate. What I do often now is design ideas I’m Figma and very early on work with code while strictly thinking in components.

monroewalker• 3 years ago

Nice work! What are you using for the text editor? For my own project, I'd initially gone with Slate but ended up migrating over to ProseMirror

daverecycles5• 3 years ago

Noya co-founder here. Thanks! We are using Slate.

insky2• 3 years ago

Does anybody know something similar for HTML (free)?

zmmmmm• 3 years ago

Watched the whole video, scrolled end to end up and down, searched high and low could not find any detail about what code it generates. Generates a bit of an orange flag to me when I see a major feature teased and then absolutely no detail about it.

daverecycles5• 3 years ago

Noya co-founder here. Thank you for the feedback. You’re right, we should provide more information about the code we generate and we’ll work on that.

We generate a simple React app with two files (App.tsx and package.json). It imports the component library (currently Chakra UI) and provides basic code for what you designed in Noya. The code can be used as a starting point or as a reference for adding your design to an existing React app.

haxton• 3 years ago

Are you using opencharka[0] then? I investigated that a while ago and was not very impressed or happy with any code that it generated, but curious to see if you've figured something else out.

[0] https://github.com/premieroctet/openchakra

FlashBlaze• 3 years ago

Looks really really nice. But the page refreshed for me constantly after adding Click #dark.

I'm on Windows 10, Firefox 109.0.1

daverecycles5• 3 years ago

Noya co-founder here. Thanks for giving it a try and sorry about the refreshing problem. We're aware of an issue with Firefox and also the app refreshing unexpectedly in general. Working on a fix for this, aiming for within the next day.

stoicjumbotron• 3 years ago

No worries. Will try it in a couple of days again and see how that goes.

no_wizard• 3 years ago

My biggest complaint about these tools is they’re always React based, and in this case they made the choice of coupling to a specific React UI framework.

Why not just generate CSS and vanilla JS logic and allow the end user to consume that accordingly? Later you can add and should focus on user customizable APIs for this sorta thing because most autogenerated code is at best a starting point but most often useless unless it can be tailored to a specific use case

daverecycles5• 3 years ago

Noya co-founder here. Thanks for the feedback. We'll definitely take this into consideration when adding additional design systems/component libraries and expanding the export options.

cubano• 3 years ago

So I am extremally disappointed that I just had a very poor interaction with your project.

So I wanted to see how radios looked at work, but I completely unable to understand what i needed to do to actually see an example. I clicked the "+" sign, drew a "box", and set it to radio...and...

...nothing happened.

I tried adding some text and hit enter, think maybe as I added new lines of text radio buttons would magically appear...and...

...nothing happened.

No help, no examples of how to use the "Radio" selection in the box pulldown to, you know, actually generate a radio component.

I mean I'll admit...I'm almost 60 years old and have been working with these sort of tools since Delphi/Borland came out in the 90s (80s?), so almost surely my expectations of how these things now work is totally shaped by my now ancient understanding of this sort of thing, so I'm sure its my ignorance and not the fault of the developer.

Could you perhaps add a form or two that are preloaded with the various controls so I might learn the proper incantations for the use of your project?

Thanks for your hard work in developing this tool.

daverecycles5• 3 years ago

Noya co-founder here. Sorry for the disappointing experience. Thank you for giving it a try and for sharing your feedback. It is very much appreciated and your experience helps us figure out where we have to improve.

We will definitely add examples and better onboarding content. Since we are creating a tool experience that's different than what's already out there, the responsibility is ours to provide the resources necessary to become productive with it.

esperent• 3 years ago

PS: Most of Noya is open source at https://github.com/noya-app/noya

That's great to see. You're missing a LICENSE.md though, is it MIT licensed (as per package.json)?

Also, what does "most of" mean? What parts are closed source? Do the open source parts comprise a complete and usable app?

kinow• 3 years ago

Someone created an issue about licensing: https://github.com/noya-app/noya/issues/372

dabbott24• 3 years ago

The app frontend is open source while the backend is closed source, at least for now. Noya should run without the backend, but some things like sharing projects won't work. I'm planning to publish the individual frontend packages to npm as an "SDK for building design tools", so anybody can import "noya-canvas", "noya-renderer", etc, to build their own design tool.

As for the license, I still need to sort that out. It will very likely all be Apache 2.0, but perhaps dual licensed MIT or something else. Licensing/docs/contribution guidelines/etc are lacking right now, so I don't recommend using the source code for anything yet - but may be interesting to poke around on GitHub.

anonzzzies• 3 years ago

I would like an API I can feed wireframes (in json or something) to and get react back. Any plans?

dabbott24• 3 years ago

Can you share more about your use case?

selfportrait• 3 years ago

I like it! My initial thoughts are:

* Instead of exporting a file, I'd prefer to see the code in the UI and then decide if I want to piecemeal or just download the whole file with package.json, etc. As someone who iterates it would be annoying to continually download new zips

* Is it possible to define custom primary/secondary colors to use as hashtags? Almost like tailwind config file where I can set up my theme in advance and reuse or @apply through the hashtag. And like tailwind, it would be great to just do #[000000] to set a custom color or value on the fly for a button, etc. or explicitly define #bg-black #text-white etc.

dabbott24• 3 years ago

Thanks for the feedback!

- I think showing the code in the UI makes sense!

- We definitely want to allow theme customization. I'm not sure exactly what that'll look like, but right now it feels pretty limiting without it. I think primary/secondary could make sense as a place to start.

schkolne• 3 years ago

Very interesting, great to see a fresh take on what a design tool can be! For some reason I'm not hearing any audio when I play the video on noya.io on Chrome/MacOS.

Show HN: Noya – A new kind of design tool

Related Stories