[HN Gopher] Show HN: Noya - A new kind of design tool
___________________________________________________________________
Show HN: Noya - A new kind of design tool
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
Author : dabbott
Score : 109 points
Date : 2023-02-18 17:10 UTC (5 hours ago)
(HTM) web link (www.noya.io)
(TXT) w3m dump (www.noya.io)
| dhc02 wrote:
| 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.
| dabbott wrote:
| 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.
| MoSattler wrote:
| Things like these make me really scared for my job as a
| programmer. Take that as a compliment.
| dabbott wrote:
| lol. It's only a matter of time!
| jdauriemma wrote:
| 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.
| zol wrote:
| 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?
| dabbott wrote:
| 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.
| zol wrote:
| That's awesome, thanks for sharing those components with the
| world!
| rurabe wrote:
| Looks so promising, what's the timeline for something like MUI?
| dabbott wrote:
| 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.
| blowski wrote:
| 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?
| dabbott wrote:
| 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 wrote:
| Feels like you'll need to be leveraging something like
| container queries in order to make smaller components
| responsive.
| dabbott wrote:
| I agree, container queries feel like a natural fit. I saw
| that they're supported in every major browser now, but
| haven't personally tried em yet.
| swyx wrote:
| 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!
| dabbott wrote:
| That's a great idea!
| thawab wrote:
| Hello Devin, I saw you the first time when you demoed Deco.
| Looking forward for testing Noya, hope tailwind integration is in
| the roadmap.
| dabbott wrote:
| 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.
| ar_turnbull wrote:
| 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!
| dabbott wrote:
| 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.
| vmatsiiako wrote:
| 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!
| dabbott wrote:
| 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
| itronitron wrote:
| 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.
| dabbott wrote:
| Designing individual screens is just the beginning - workflows
| are coming!
| itronitron wrote:
| Cool, a tool that aids the collaborative design of workflows
| through user interfaces will be useful for a lot of teams.
| clay_the_ripper wrote:
| 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.
| dmitriid wrote:
| > 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
| dabbott wrote:
| 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 wrote:
| 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.
| Xeoncross wrote:
| 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.
| dabbott wrote:
| I love this idea! I'm going to try to have a demo gallery up by
| monday.
| Xeoncross wrote:
| 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 wrote:
| No need for developers? Because this company is going to be the
| future haha
| dabbott wrote:
| 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.
___________________________________________________________________
(page generated 2023-02-18 23:00 UTC)