noya
html-figma
Our great sponsors
noya | html-figma | |
---|---|---|
5 | 8 | |
426 | 2,947 | |
1.4% | 2.0% | |
6.3 | 5.6 | |
3 months ago | 9 months ago | |
TypeScript | TypeScript | |
- | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
noya
-
Launch HN: Noya (YC W21) – a product design tool for non-designers
Hi HN, we’re building Noya (https://noya.io), a product design tool that lets everyone design like a designer. Here’s a video: https://player.vimeo.com/video/797476910.
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 - [email protected].
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.
-
Here's a roundup of the best UX and design links from the last few weeks, hope you find it useful! How to prioritise user problems, find better alternatives to dark patterns, understand hypotheses, manage difficult stakeholders, transcribe audio and draw the rest of the owl.
Noya – Write text, get design and code.
-
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
- Noya - Draw wireframes, get designs & code (uses Chakra UI, a component library for React applications. More design systems and custom themes are planned)
-
Show HN: Noya (YC W21) – A wireframing tool that generates designs and code
Hi HN! We’ve been building a new browser-based design tool that’s ready for you to play with!
My cofounder David and I were previously on the Design Tools team at Airbnb, where we built lots of innovative tools to improve the design process internally. Now we’re trying to bring this caliber of tools to everyone.
The first problem we’re trying to solve is the age-old problem of working in low fidelity vs. high fidelity when designing UI. Low fidelity wireframes are great for quick iteration while hashing out the main idea, while high fidelity mockups and prototypes are often better for conveying the idea to teammates or pitching the idea to customers.
With Noya, you get to work in low fidelity, while still getting a high fidelity output you can share. Noya does this by converting your low fidelity blocks into high fidelity design system & React components.
I think of the current version as an MVP still, since there’s a lot more that I want to add, but I’ve personally been finding it useful even with its limited feature set. I’d be very interested in any early feedback if you have a chance to play with it!
PS: We’ve open sourced most of Noya at https://github.com/noya-app/noya. Let us know if you’re interested in collaborating.
html-figma
-
Introducing Visual Copilot: A Better Figma-to-Code Workflow
Try the Builder.io Figma plugin
- How to create prototypes from existing website pages?
-
PageGenie instantly generates an entire landing page from your product idea using ChatGPT and DALL-E
to test Figma integration you can try an open-source HTML ⇔ Figma plugin (GitHub) by Builder.io. Works both ways
-
How to turn your Figma designs into enterprise-ready apps
After designing your user interface within Figma, teams can utilize a plugin like Builder.io to turn the beautiful and functional look into code.
-
20+ Best Figma Plugins to Create & Manage Design Systems for Web Designers in 2022
Figma to HTML converts Figma layers to HTML, CSS, React, Vue, Svelte, Solid, and more. The output is quality, responsive front-end code.
- Figma → React
-
5 best no-code tools for developers
You can also use HTML to Figma to convert your code to Figma designs, and JSX Lite to convert Figma designs to code of your framework of choice.
What are some alternatives?
dumb-password-rules - A compilation of sites with dumb password rules.
FigmaToCode - Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI.
scribble-diffusion - Turn your rough sketch into a refined image using AI
mitosis - Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more.
plasmic - Visual builder for React. Build apps, websites, and content. Integrate with your codebase.
builder - Drag and drop headless CMS for React, Vue, Svelte, Qwik, and more
meta-system - The open-source no-code engine/framework. A system to be any system.
playroom - Design with JSX, powered by your own component library.
ngx-ui-builder - An Angular library for creating no code tools & applications
design-tokens - 🎨 Figma plugin to export design tokens to json in an amazon style dictionary compatible format.
intl-explorer - Intl Explorer is an interactive tool for experimenting and trying out the ECMAScript Internationalization API.
jsx-lite - Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and Liquid. [Moved to: https://github.com/BuilderIO/mitosis]