HN Explorer

Show HN: Open-source Figma design to code (github.com)

50 points by alepeak ↗ HN
Hi HN, founders of VibeFlow (YC S25) here.

We mostly work on backend and workflow tooling, but we needed a way to turn Figma designs into frontend code as a kickstart for prototyping. It takes a Figma frame and converts it into React + Tailwind components (plus assets).

If you want to try it: You can run it locally or use it via the VibeFlow UI to poke at it without setup (https://app.vibeflow.ai/)

6 comments

[ 0.41 ms ] story [ 31.6 ms ] thread
dfajgljsldkjag
Interesting. It appears this doesn't use AI itself (though it's probably vibe coded). Figma in dev mode already gives react components and css styles [1] and this seems like a more automated way to pull that functionality. It's unfortunate figma paywalls dev mode and this might be a good way to work around the limitation.

1: https://help.figma.com/hc/en-us/articles/15023124644247-Guid...

65
This app idea has been made a million times and never works. It's also not hard to make a few divs and copy and paste styles from Figma.

I wish you luck with your project.

alepeak
We just shipped skills as well! For Claude Code, install the skill to enable Figma to React conversion directly within your Claude Code environment: npx skills add vibeflowing-inc/vibe_figma --skill vibefigma