Launch HN: Noya (YC W23) – a new kind of design tool
Comments
ethanbond
dabbott
That's a great way of describing the problem we're trying to solve!
As the tool grows, we definitely hope it becomes powerful enough for designers to use too.
fishtoaster
This seems pretty cool! As a dev who is, for lack of design resources on my team, frequently asked to pretend to be a designer, this could very much come in handy!
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?
dabbott
At the moment, yes, since our MVP is still pretty limited. We have a first draft of a protocol for integrating any components/theme into Noya that should support the use case you're describing. It still needs some more iteration though before we ship it!
karaterobot
Hey, I'm impressed by that demo video. I especially like all the nice little touches that let you grab images, paste in data, and so on.
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?
dabbott
Great questions!
For getting components into the system: we're working on a protocol (more specifically a TypeScript interface) that defines a mapping from component types that the tool understands (sidebar, navigation header, etc) to component implementations. You can add component types that the tool doesn't understand too, but like you point out, then it's more work to define the rules they use. Anyway, you can bring your company's design system into the tool by implementing this protocol - the tool loads your implementation (currently from npm, but could be anywhere) at runtime.
Right now the default rules are based on component type, so when you add a new design system implementation, you start with the default rules for known components. These can be customized on a per-design-system basis via the protocol, but again it's a bit tedious to do. We've explored using generative AI for determining component rules which seems promising so far. This could potentially be less tedious and more flexible for custom design systems, and is one area we hope to explore more.
JusticeJuice
Super interesting.
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?
dabbott
These are great questions:
1. The way I've been thinking about it now is similar to how I use autolayout in Figma. Simple x/y is convenient for a very first rough draft. Then I'll refine my design by making components and adding autolayout as needed once the project grows or I want to collab with somebody. Similarly, Noya will support putting components in "stacks" and other layouts (some of the built-in components do this already) that translate cleanly to e.g. flexbox. The hump is definitely there, but I think we can make it relatively pain-free. Since code export is configurable on a per-design-system basis, a company can also adjust the code/config export to match what they do in production.
2. We'd definitely be open to it, but it might be difficult/impossible to make it a good UX. We render actual React components from a company's component library in the browser DOM, whereas Figma renders shapes on a webgl canvas. It might be possible to mix and match with Figma widgets in some way, but would probably be janky. Could still be worth trying though!
JusticeJuice
Autolayout is definetly a good approach. Webflow is a good commercial example, their builder isn't a canvas experience, it's a nested block experience, so you're forced to think about the layout from the start - and it works. I know of website design agencies who's staff are just designers who can't code - but they build everything they deliver to a clients in webflow.
What webflow doesn't have to deal with compared to a tool for webapps, is that most websites are just static. Web apps have all this extra code mixed into the frontend for functionality - providers, routers, state management methods, api calls ets, all this extra stuff in your components that isn't just "view". Taking some generated static react and adding functionality is easy. But then coming back to a page 5 months later, and refactoring the design in Noya, and merging that new code with what's actually been built? Kinda tough.
It really depends if code export is a core goal, or more a side effect. There's a lot of value imo in a tool for designers, devs, business owners, whoever at a company to mock up an idea really quickly, with something that looks like their companies actual design system. Like the napkin sketch on steriods - but then still implementing it traditionally.
dabbott
Definitely agree on there being a lot of value in the napkin sketch on steroids approach, and that's where we're starting.
Creating real designs and shipping to production within a constrained environment (e.g. https://medium.com/airbnb-engineering/a-deep-dive-into-airbn...) can be super high leverage, so that's ultimately where we want to go. Right now every company that wants to do this has to build it themselves. We didn't use an off-the-shelf solution like Webflow at Airbnb (afaik) because there was no realistic way to integrate it into our stack. I'm not sure if Noya's code export will be what people end up using for this - maybe some kind of JSON-config or something else will be the more useful artifact.
As an analogy, Retool makes it easy to create internal tools, and is usable by more than just eng. But somebody on the eng team needs to first configure it a bit (e.g. plug in the company's data sources) before making real tools becomes possible/efficient. Noya will require a similar level of configuration to become usable in these more advanced scenarios, but we think the value it delivers will be worth the effort.
claytongulick
This seems spectacular, and I already would have added my CC and purchased a subscription, except for two major things:
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.
dabbott
Thanks for the feedback! This is super valuable.
1. There isn't anything fundamental about that tool that requires React. We have a lot of React experience and it's a very popular framework, so it made sense for us as a place to start, but we can definitely consider supporting other options.
2. Absolutely! We have a first draft of our mapping protocol already that works reasonably well, but still needs more iteration before we open things up. It supports a custom hook for attaching things to the DOM, so shouldn't require React specifically either.
Can you share a little about how you use web components, so we can better understand what an integration should look like? Do you use any kind of JS framework (at build time or runtime)? Do you use JSX, or is it all vanilla HTML?
claytongulick
Pretty much vanilla, but it depends on the component.
For components that need reactivity and have frequent renders, I use lit-html for rendering on a property setter change.
I mix and match components from different frameworks, I use vaadin-router, but sometimes include lightweight components from other systems too (ionic, shoelace, mwc, etc...).
Mostly though, it's just light-dom vanilla Web components with bootstrap (or similar) for base styles.
dabbott
Got it! Thanks for the info, it's very useful to understand the workflow.
FpUser
Amazing. I was about to write literally the same. Stick to web components and plain JS. Add some small routing library of your own if needed and ability to import web components.
Basically look at what Delphi / Lazarus / MS .NET Form Designers do and replicate best parts of it.
jefozabuss
Hey, some feedback from Desktop MacOS Chrome:
- 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.
Tepix
The video is pretty slick, however i can't help but be reminded of the other story that hit the HN frontpage earlier today: "The age of average" https://www.alexmurrell.co.uk/articles/the-age-of-average
These designs are not new and exciting, quite the opposite.
I'm happy to be proven wrong!
dabbott
That's a very interesting point.
By guiding people down the "happy path" with "guardrails", we may end up in mediocrity land. Additionally, Noya is optimized for solving user/business problems and not visual exploration.
At Airbnb we had a really strong set of design guidelines, patterns, and components that (I think) both looked beautiful AND solved user needs. I think as the tool evolves and companies integrate their own opinionated design systems (vs. just Chakra UI, which is very neutral), the output will start feeling more polished & unique. But perhaps there's more we can do here.
Definitely something we'll need to think through!
omarfarooq
What's the roadmap on onboarding opinionated design systems?
mbrezu
IMO the end product looking "average" is quite different from the prototype looking "average", and Noya looks great for prototypes/MVPs.
Put differently, Noya feels like an exploration tool. When exploring, tents are fine. They do not provide a lot of comfort, but replacing them with houses while still exploring might not be optimal :-) Personally I don't mind average tents, as long as they don't leak.
EDIT: Hmmm, maybe Noya is actually between a tent (Balsamiq) and a house (Figma) - something like an RV? :-D
Daub
As other commentators have noted, and I would like to amplify, I am impressed by how much functionality is discretely subcontracted to the workflow: options appear when you need them, not as a row of buttons on top of the screen. This could be a partner product to Notion.
This approach seems to work because you have rightfully assumed that 95% of what we create is template-driven.
Karupan
Looks very slick! As someone who hacked on something similar for sketch, this looks much more polished. But I think the killer feature would be the formalisation of the protocol to support outputting to any language/framework.
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!
dabbott
Thanks! Agreed, the protocol for both input/output is super important and our top priority right now. It's also the thing we're most excited about from a technical perspective, since we haven't seen anything quite like what we're doing before.
joduplessis
This looks really interesting. I'd be very interested to see how you guys iterate to accommodate other frameworks or actual design systems. IMO Chakra isn't so much a design system as it is a framework (like Tailwind) - it's an abstraction to make common tasks easier. Would love to see something a little more "ui-kit-agnostic".
dabbott
That's a great point! For simplicity we've been referring to our current "design system" as Chakra, but it's definitely more nuanced than that. We think of a design system as "a library of components and tokens, and rules for how these are used in a design". Our current design system uses Chakra for the component library part of it, while we created the rules for using those components in a design.
We're currently working on a protocol for adding new design systems, which will support integrations at different levels, from component libraries like Chakra to more complete design systems like Airbnb's DLS. We'll have more to share on this soon!
Terretta
Here is a design system. While beautifully on-brand, as you click in, you get all the way to literal cut and paste code:
- Overview: https://adele.uxpin.com/audi-audi-ui
- The system: https://www.audi.com/ci/en/renewed-brand.html
Some less brand-y examples:
- https://polaris.shopify.com/patterns/app-settings-layout
- https://ux.mailchimp.com/patterns/color
- https://designsystem.digital.gov/design-tokens/
Frameworks or component libraries like Tailwind or Material, are not design systems.
Therefore, when you say you plan to integrate open source design systems, this should not mean frameworks or component libraries. It should mean design system systems, such as:
This, on transforming component libraries into design systems, is worth reading:
Design Systems for Developers - A guide that teaches professional developers how to transform component libraries into design systems and set up the production infrastructure used by leading frontend teams:
https://storybook.js.org/tutorials/design-systems-for-develo...
There's a huge need to fill the gap for design systems that "implement themselves" in the transition from wireframe to code. Hopefully you can vector to align with actual design systems instead of components/frameworks. Serving companies with real design system needs is how you get the enterprise ecosystem revenue to get bought by Adobe for $20B in cash and stock!
// Disclosure: Was co-founder and CTO of a top 5 digital (web design) agency, am enterprise customer of today's design agencies.
noobcoder
This is actually impressive. But I feel its very subjective to come up with a product design which is coherent to the rest of the website. I can see this to be useful if I am building some sort of MVP.
Also just curious, Is there a way to import our existing wireframes maybe Sketch/Adobe XD?
daverecycles
Thanks for the feedback. There is currently no import of wireframes from other design tools, but it's an interesting idea and we'll look into it!
WORMS_EAT_WORMS
This is fantastic! Love your work on this. I definitely see the future of web development being a version of this.
Make something messy, let AI iterate through ideas, repeat.
Congrats and seriously impressive stuff. Best of luck with it
dabbott
Thanks so much! I like that idea of embracing the mess and letting AI handle the busywork. Making messes is more fun :)
Existenceblinks
Looks almost right. This is quite close to what I keep in mind. At the end of the day let's creating html tags but as semantic shape visually. I don't think I would include spacing stuff like width/height margin/padding. Just plain visual utilities .. that can be composed in different ways to form a new type .. like ML style type. Hard to explain, just assume I'm shit talking.
sizzle
Why not take a figma file and convert it to production ready with your tool doing the final touches? Do we really need another UI drawing tool standard? Adobe bought figma so they will copy anything you do that catches on like they copied Sketch shortcuts.
627467
Isn't adobe buying figma a good argument to build something independent?
sizzle
They have an army of designers and developers on their payroll that will trivial copy the competition if they see a threat emerge in features/functionality or just acquire them (might be the exit they want)
darkhorse13
This looks great, but not a fan of Chakra. Will this support Bootstrap any time soon?
dabbott
Definitely! We have a first draft of a protocol for integrating any components/theme into Noya, but it still needs a little more work. Once it's ready, we (or anybody else) can add Bootstrap as a supported design system.
darkhorse13
Awesome, glad to hear it. I think you are onto something special, it's not quite there yet, but it has a lot of potential. Best of luck!
candiddevmike
FWIW it's not obvious that you can pay monthly on your pricing page, it seems like the only option is $120/year until you scroll down on mobile. Also it doesn't mention how many users can use a subscription?
dabbott
Thanks for the feedback! I'll take another look at the pricing flow on mobile, I'm sure it could use another UX pass to be more clear.
It's one user per subscription, though you can have unlimited shares/viewers - what would you want it to be/say?
candiddevmike
Probably some kind of "/per user" near the per month part.
dabbott
Gotcha, we can do that!
whoomp12342
Search image for an Orange Circle. The results are hilarious
dabbott
We're currently searching unsplash for stock photos. I didn't find anything too weird when I tried that query, but they do sometimes feel random. We want to add multiple image providers, include generative AI-based providers.
codetrotter
How does it look at different screen resolutions? Are the generated designs responsive, so that they work on phones and tablets as well?
dabbott
Right now the individual components are responsive, but the entire design as a whole isn't (i.e. top-level components are absolute positioned). This is definitely an area we want to improve a lot, and allow users to customize what happens at different resolutions.
Soaphealer
Hey, as I understood the tool is made to design one pages only ? Or is it possible to have multiple pages under the same project ?
daverecycles
In the MVP, we don't support multiple screens per project yet, but we'll be adding that. For now, we recommend creating one project per screen.
If you want to create another screen by modifying an existing screen, you can duplicate the project. There is a duplicate action if you click the name of the project with the project open, or by right clicking the name of the project from the project list. You can also copy and paste between projects.
mwcampbell
> There’s plenty of room for improvement, especially around responsive layouts
How is the accessibility of the generated UI?
dabbott
Right now it's not very good since that hasn't been a focus for us yet - but both David and I worked on fairly advanced design tools for accessibility while at Airbnb, so we have a lot of ideas here!
moneywoes
So lets say I bought Tailwind premium how do I import those components in Noya
daverecycles
In the MVP, only the Chakra UI-based design system we provide is available, so you can't import additional components at the moment.
However, we're working on enabling additional design systems. We'll provide the integration for some of those (Material Design is next, but we can look into what it would take to support the premium Tailwind UI components). It will also be possible to integrate your own custom design system. We'll have more to share on this soon.
brianjking
This looks fantastic, gonna try it out if I can once I'm on a computer shortly!
thank you!
dabbott
Awesome, let me know what you think once you do!
monkey_monkey
Looks good – when this supported Tailwind I'd be keen to try it out.
whoomp12342
not able to copy/paste images in from the clipboard is very limiting for me. I make my wireframes with powerpoint and love this idea, but I cant do it without snipping stuff around
dabbott
We can add this! We have image drag n drop already so should be very easy to also support pasting from clipboard.
savrajsingh
Amazing! Does it export vanilla bootstrap?
whoomp12342
under your table widget, it fails to render date formats correctly, like 1/1/2003 will just display 1
dabbott
Thanks, will look into this!
whoomp12342
any ability to import custom boostrap themes? This is great but like, I know we would want it in our style
dabbott
Custom theming & design systems are coming! That's what we're focused on building now. We can definitely support a bootstrap-based design system with custom theming in the future.
smashfizzle2
[dead]
whatsthewifi
[dead]
modelbehaviour
[dead]
seekingthelight
[dead]
lovehunter56
[dead]
zephyr345
[dead]
fillinyourblank
[dead]
virshereads34
[dead]
rubysunn68
[dead]
petiue456
[dead]
litlikeamatch
[dead]
alwaysaugust3
[dead]
tweetysweetie43
[dead]
fleurlovin23
[dead]
feedingthefeed
[dead]
bagatiba575
[dead]
foodgobblers2
[dead]
tulipheart32
[dead]
moreplease3
[dead]
infintesoul57
[dead]
thesocialhub
[dead]
powerpuff3
[dead]
myinstaspace
[dead]
curiouscat22
[dead]
thecheeseclub
[dead]
livincool5
[dead]
indigosparkle
[dead]
blissand234
[dead]
angeliccutie23
[dead]
sharing_genes
[dead]
alwaysaugst2
[dead]
theseafiles75
[dead]
paperinas23
[dead]
magicalworld13
[dead]
thriftandflip2
[dead]
mintandrose34
[dead]
openair754
[dead]
iblamejordan75
[dead]
busyreading0
[dead]
velvetandlinen
[dead]
lemonhoneypie2
[dead]
lifeonthefarm2
[dead]
spellboundead5
[dead]
theveganwarrior
[dead]
behindmylens1
[dead]
snowysecret8
[dead]
askastylist
[dead]
E20life
[dead]
allthatisme1
[dead]
askastylist34
[dead]
stellarflower
[dead]
ivoryroses
[dead]
morelight33
[dead]
rowiethelabel
[dead]
lavenderwitch
[dead]
KianHooshmand
[dead]
dabbott
[dead]
My philosophy toward design has always been that the architecture of the problem/solution is the hard and important part of design, but in most design tools (like Figma) the bulk of the tedium goes into making things look visually convincing and not messy.
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