[HN Gopher] I made a free Figma library packed with components f...
___________________________________________________________________
I made a free Figma library packed with components for fast
prototyping
Author : kojiwakayama
Score : 178 points
Date : 2024-12-14 08:54 UTC (14 hours ago)
(HTM) web link (veryfront.com)
(TXT) w3m dump (veryfront.com)
| jillesvangurp wrote:
| 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.
| kojiwakayama wrote:
| Thanks so much Jilles. I really appreciate it!
| submeta wrote:
| 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?
| kojiwakayama wrote:
| 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.
| mattkevan wrote:
| 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.
| submeta wrote:
| Wow, excellent site. Very useful!
| kojiwakayama wrote:
| 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.
| baxtr wrote:
| 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?
| submeta wrote:
| Isn't vercel v0 doing this?
| dennisy wrote:
| Yes they are releasing AI features: https://www.figma.com/ai/
| kojiwakayama wrote:
| Great idea to allow prompt based design!
| amelius wrote:
| 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.
| kojiwakayama wrote:
| Interesting. Are you thinking of an agentic system here?
| someothherguyy wrote:
| https://techcrunch.com/2024/07/02/figma-disables-its-ai-desi...
| jjcm wrote:
| We've since re-enabled it after addressing the underlying
| issue.
|
| Source: I'm the pm who launched the feature.
| airstrike wrote:
| 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
| kojiwakayama wrote:
| 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.
| adrianbordinc wrote:
| Uizard does exactly this: https://uizard.io/
|
| Disclaimer: the founder is a friend of mine
| preommr wrote:
| Any inside scoop on why they sold the company to miro?
| JaggerFoo wrote:
| I like that Figma is not required. Can it dynamically model
| horizontal scrolling, such as album art and info?
| maximilianthe1 wrote:
| 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
| kojiwakayama wrote:
| nice one!
| ThinkBeat wrote:
| It seems to be a hosting company, that offers goddies different
| level of goodies based on the price of the subsciption?
| kojiwakayama wrote:
| 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.
| kojiwakayama wrote:
| 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!
| nelsonic wrote:
| Great work as always @kojiwakayama looks superb!
| kojiwakayama wrote:
| Hey Nelson, thank you very much! :)
| eichi wrote:
| Why not create crappy frontend to validate demand for MVP then
| hire a designer? Designer is cheap.
| kojiwakayama wrote:
| 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.
| tomrod wrote:
| 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?
| kojiwakayama wrote:
| Yes, all components and templates are open source. Both Figma
| and React components.
| DidYaWipe wrote:
| Figma isn't. However, there is an open-source competitor called
| Penpot: https://penpot.app/blog/7-reasons-penpot-is-more-than-
| just-a...
| replwoacause wrote:
| Looks nice but I just wish every new thing wasn't React based
| kojiwakayama wrote:
| Thanks for the valid feedback. What is/would be your preferred
| stack?
| trevorhinesley wrote:
| FWIW I +1 that comment. Great tool, just not my stack. Rails
| + Hotwire here
| kojiwakayama wrote:
| Rails and Hotwire is a nice stack. Thx!
| n144q wrote:
| For prototyping purpose, how does this compare to other design
| kits, e.g. Material Design?
|
| https://www.figma.com/community/file/1035203688168086460/mat...
| kojiwakayama wrote:
| 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.
| computergert wrote:
| Any plans to support Vue as well?
| kojiwakayama wrote:
| 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.
| pmg102 wrote:
| Nice work. Tip: you're missing an 'l' from Frequenty Asked
| Questions
| kojiwakayama wrote:
| Oups. Thanks for spotting! Fixing :)
| stevebmark wrote:
| 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.
| kojiwakayama wrote:
| Thanks Steve for the feedback!
| DidYaWipe wrote:
| "Angrily?" Really?
___________________________________________________________________
(page generated 2024-12-14 23:00 UTC)