I made a free Figma library packed with components for fast prototyping | Hacker News Reader

I made a free Figma library packed with components for fast prototyping

veryfront.com

280 pointskojiwakayama60 comments

Hi HN, I’m Koji, software engineer and co-founder of Veryfront, where we offer tools to streamline web app development. Happy to share insights or answer questions about design, development, or anything related to building apps. AMA!

Hi Koji, this looks like a fantastic tool! I think it will pair nicely with Locofy (https://locofy.ai) for handoff from design to AI-generated code to really simplify the frontend process! I’ll be sharing this with my design team!

Veryfront is amazing. I've known Koji for several years and he and his team have built a lot of great tech that now covers everything from rapid design iteration, to developing with their web IDE, with a live preview (it actually continually builds your website). and deploying using their cloud hosting solution.

The technology stack is very flexible. You can add your own components, libraries, styling solutions, backends, etc. And there is also an export option if you want to leave their platform that gives you everything in code form.

The big benefit of veryfront is that you can get started and have a webapp live in no time at all. You don't need anyone working on devops because they do it for you. You don't need to setup a lot of tools because it all runs in the browser. You don't need to figure out how to set up these tools either because they do it for you. You just code your webapp.

Thanks so much Jilles. I really appreciate it!

For prototyping purpose, how does this compare to other design kits, e.g. Material Design?

https://www.figma.com/community/file/1035203688168086460/mat...

Material Design is awesome. What I like about Veryfront components is that it includes also section components which are larger building blocks and integrates nicely with Veryfront Studio for seamless dev handoff, which then allows to go from build to deployment quick and easily.

I'm going to be very naive here as this isn't my space at all. Are these open sourced? If not these, are there react components I can grab for basic front end projects that won't run afoul of licensing?

Yes, all components and templates are open source. Both Figma and React components.

Figma isn't. However, there is an open-source competitor called Penpot: https://penpot.app/blog/7-reasons-penpot-is-more-than-just-a...

I would love to have a text box in Figma and then just type in what I want.

"Design a basic login screen. Change red for yellow. Move the layer up front."

Is anyone working on this at Figma?

Isn‘t vercel v0 doing this?

Yes they are releasing AI features: https://www.figma.com/ai/

Great idea to allow prompt based design!

No need to do it in Figma. Soon your OS will be able to do it, and it will be able to use all apps on your system to create a design, not just one app.

Interesting. Are you thinking of an agentic system here?

https://techcrunch.com/2024/07/02/figma-disables-its-ai-desi...

We’ve since re-enabled it after addressing the underlying issue.

Source: I’m the pm who launched the feature.

What was the underlying issue? Dylan said there was no training on existing apps which…I mean pretty obviously a lie.

(Or worded in some way that only he knows is “technically true” but functionally a lie.)

There was no training on existing apps. We launched the feature in May and we didn't start training on data until a couple months ago. We used off-the-shelf GPT4o for the feature with no fine tuning. How it works is we feed in a design system with premade components, and the LLM decides how those premade components are arranged, then populates them with data and chooses how to theme them. The issue was the underlying design system we contracted to have made had components that too closely matched other screens.

Details are here: https://www.figma.com/blog/inside-figma-a-retrospective-on-m...

Ah, so that’s the technicality. Contractors built components based on existing apps and Figma used that for training. It’s one step removed, but, like, it didn’t not happen.

Somewhat tangential but I've found Claude 3.5 to be ridiculously good at doing this kind of prototyping with React, and you get the preview immediately in the artifact pane to the right of the chat. Mind you I don't ever use React (I'm writing a desktop app in Rust), so I'm probably as unbiased an audience as it gets.

Here are a couple of examples of things people asked for help with and I just iterated with Claude for 5-10 minutes on (code upfront and gif demo at the bottom):

https://gist.github.com/airstrike/7ae444de207e679adca7be6faa...

https://gist.github.com/airstrike/e0e47eaab733277b537923c4d3...

I think given the sheer amount of training data on React, these models tend to really hit it out of the park when they are allowed to use it. Part of me thinks the best approach is to have it model in React first and then translate it to whatever other language/framework you need it in

Definitely, AI for coding makes sense. In the Veryfront Studio, you get a similar experience with live previews and AI coding capabilities, with the added benefit of being able to instantly deploy or export your code.

Uizard does exactly this: https://uizard.io/

Disclaimer: the founder is a friend of mine

Any inside scoop on why they sold the company to miro?

I like that Figma is not required. Can it dynamically model horizontal scrolling, such as album art and info?

Recently needed to develop a React Web solution for hackathon. I had 0 previous experience with web, but was able to create a good looking (but with 0 logic) website, using Vercels V0[0]. It did great both working from text suggestions and from figma screenshots. It also was great at implementing changes after initial generation. Not an add btw, haha

[0] v0.dev

nice one!

I am about to draft a UI and user flow for an internal tool (an LLM based RAG). I was thinking about using Vercel/V0. Is this an option? What else can I use? Is Figma a must have in my tool belt?

Start prototyping the user journey in Figma to map out the flow. For frontend, use Next.js or Vite/Vike, which we use at Veryfront for its lightweight and performance. Simple API calls (e.g., OpenAI) can use a server function, but for RAG, I’d recommend a Python backend service.

This is a RAG search I built with NextJS, Pinecone and Langchain. It also uses AI for content tagging and summarisation.

https://www.uxlift.org/search/

I made a quick wireframe in Figma, but didn’t bother to pixel-perfect it. I mostly design in the browser, but taking a few minutes in figma up-front to get the shape of it saves time in the long run.

If I’m designing for stakeholders or dev teams I’ll still absolutely produce full prototypes and designs otherwise bad things happen. Figma is the current market leader, but you could use anything that you can communicate your intent well enough with, from the back of an envelope to a competitor like Penpot or Sketch. Just don’t use Photoshop.

V0 is interesting, but the results can be inconsistent. For my site I just copied and pasted the shadcn components I wanted and tweaked the styling to fit. Not sure V0 would be faster, though it might be useful for generating ideas. Depends on how much control you want over the final layout.

Wow, excellent site. Very useful!

Great work on the website! Figma is definitely the way to go. Having everything spec’d out beforehand makes implementation and iteration so much easier and faster.

Great work as always @kojiwakayama looks superb!

Hey Nelson, thank you very much! :)

It seems to be a hosting company, that offers goddies different level of goodies based on the price of the subsciption?

hi, yes we offer different tools to streamline the web development process, such as:

- Veryfront Studio, an online coding platform with live previews, instant deployment, and code exports. - Veryfront Components: Ready-made UI components for fast app building. - Veryfront Templates: Starter templates to kick off your projects. - Veryfront Figma Kit: A Figma library packed with components for quick prototyping

You can try everything for free for an unlimited time and upgrade to a paid plan when your app is ready to go live.

Nice work. Tip: you're missing an 'l' from Frequenty Asked Questions

Oups. Thanks for spotting! Fixing :)

Any plans to support Vue as well?

Thanks, good question. Eventually yes but atm the focus is on React and enabling one seamless development process. We aim to eventually enable all types of javascript stacks.

I'm really into audio production, and I would re-record the video without using a mechanical keyboard, and ideally not in an echo-y room. It's not very watchable right now. In addition to using a noisy keyboard not appropriate for video recording, you type very hard / angrily. Switching to a quieter keyboard with low key travel might help you prevent RSI in the future.

Thanks Steve for the feedback!

Low key travel will probably make it worse if you don’t have an effective way to learn modify your behavior. The substantially lower key travel when Apple rolled out chiclet-style keyboards on MacBook Pros trashed my fingers and wrists.

I don’t think I was a particularly aggressive typer, but I was accustomed to one key travel distance and then it changed significantly. Nowadays I need a keyboard with pretty good key travel. That basically limited laptop options to certain Lenovo models until Apple started increasing the distance with the M1 redesign.

Looks nice but I just wish every new thing wasn’t React based

Thanks for the valid feedback. What is/would be your preferred stack?

FWIW I +1 that comment. Great tool, just not my stack. Rails + Hotwire here

Rails and Hotwire is a nice stack. Thx!

Why not create crappy frontend to validate demand for MVP then hire a designer? Designer is cheap.

You can directly start coding in Veryfront Studio using the same components from the Figma Library as ready-made React components. Having tools for both designers and developers which integrate is key imo.

Reply on news.ycombinator.com