from Hacker News

Show HN: Noya – A new kind of design tool

by dabbott on 2/18/23, 5:10 PM with 75 comments

• by clay_the_ripper on 2/18/23, 9:00 PM

  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.

• by Xeoncross on 2/18/23, 8:33 PM

  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.

• by jdthedisciple on 2/19/23, 12:29 AM

  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.

• by dhc02 on 2/18/23, 7:43 PM

  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.

• by ar_turnbull on 2/18/23, 8:26 PM

  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!

• by esperent on 2/19/23, 7:56 AM

  > 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?

• by itronitron on 2/18/23, 8:33 PM

  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.

• by swyx on 2/18/23, 7:57 PM

  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!

• by nbzso on 2/19/23, 1:05 AM

  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.

• by selfportrait on 2/19/23, 10:18 PM

  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.

• by cubano on 2/19/23, 7:04 AM

  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.

• by schkolne on 2/22/23, 4:49 PM

  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.

• by zmmmmm on 2/19/23, 4:01 AM

  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.

• by jdauriemma on 2/18/23, 10:51 PM

  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.

• by rurabe on 2/18/23, 7:56 PM

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

• by blowski on 2/18/23, 7:27 PM

  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?

• by zol on 2/18/23, 7:24 PM

  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?

• by monroewalker on 2/19/23, 1:56 AM

  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

• by insky2 on 2/19/23, 1:57 AM

  Does anybody know something similar for HTML (free)?

• by vmatsiiako on 2/18/23, 8:02 PM

  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!

• by thawab on 2/18/23, 9:51 PM

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

• by FlashBlaze on 2/19/23, 5:12 AM

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

  I'm on Windows 10, Firefox 109.0.1

• by ArloL on 2/18/23, 11:19 PM

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

• by anonzzzies on 2/19/23, 12:14 PM

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

• by MoSattler on 2/18/23, 9:05 PM

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

• by customaccount on 2/18/23, 8:34 PM

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

• by domlebo70 on 2/18/23, 11:08 PM

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

• by no_wizard on 2/19/23, 5:54 AM

  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

• by junglistguy on 2/19/23, 12:02 AM

  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.