HN Explorer

Show HN: Functional UI Kit – twin Figma and React component libraries (github.com)

101 points by say2015 ↗ HN
Hey Hackers! My name is Alex and I’ve been working on this project for the past 8 months with the support of Figma Creator Fund. I’d love to hear your thoughts from your experience working with designers & component libraries.

I started out in design and later got into coding, so I understand both sides really well. I did UX Design for 12 years at startups, at my own studio and at Wix, and then worked as a front-end dev at Wix for 2 more years.

I've noticed a common problem: most component libraries work great for devs but not so well for designers.

In my experience working with big teams, I've felt this frustration firsthand. Instead of focusing on making products, we end up arguing over small details and terms.

In Functional UI Kit, each comp has dedicated story in Storybook. Copy pasting from Dev Mode in Figma just works, Figma variables and CSS variables match, auto Layout is mirroring the same box model structure & the CSS architecture shields you from style collisions.

It leverages all the latest Figma features to the MAX. Including the latest: Annotations, and of course: Dark Mode.

I hope you try it and let me know what you think.

16 comments

[ 2.9 ms ] story [ 44.2 ms ] thread
eaurouge
Congrats on shipping! We don’t use React, but we have had similar problems designing with Tailwind / Phoenix components in Figma. I’ll share with my team to see if they have any feedback.
ed
Impressive! Looks great. This seems to be one of those ideas in the water. Everyone knows there should be a good pipeline from figma -> react, or figma -> webflow, but no one has nailed it just yet.

A ton of corporate-sponsored design systems come close, but those that do (e.g. Shopify Polaris) can't be used on standalone projects.

Untitled UI is a great example of what's possible on the Figma side, but only helps if you're targeting Webflow.

dan-robertson
It’s not react but https://github.com/treeform/fidget tries to support export from figma, and tries to use figma-style auto layout for their layout. I think partly it’s just to support dogma export, but it also means your designs can translate much more nicely from figma.
ccouzens
I like this approach of building a template in Figma and CSS, and having customizations map across them. I like that you've stuck with fairly established components where the behavior is very established. It means you're less likely to alienate people who want different conventions.

> I’d love to hear your thoughts from your experience working with designers & component libraries.

I tried a different approach. I built a tool to export Figma designs to HTML and inline CSS.

It uses the REST API rather than the plugin API, so you don't need as many permissions to use it.

I put in some work to collapse `div`s together, so the HTML isn't div soup.

It scales from exporting a single button to a whole screen, but isn't smart enough to identify reusable components.

I had hoped it would give developers an initial output to aim for when porting designs to React. Ultimately though, it didn't get much traction with my colleagues and I've stopped working on it.

But if you're interested, you can check it out here: https://github.com/ccouzens/figma-rust/blob/main/src/to_html...

boomskats
Looks like very nice work, I look forward to playing with it!

Being really nitpicky here (but I'm guessing that's what you're after): I'd consider scaling down the 3200x1800 1.6meg header image you have in your readme. I think the widest a readme image will scale to is 830px (894 - 32px padding), so you could scale it down to a quarter of the current size without losing anything visually. The slow load is the kinda thing that might put some of your target audience off.

say2015
yeah it's pretty heavy, it's a good point
satyrnein
Are the Figma and Storybook synchronized by hand, or is there a better approach than maintaining separate implementations?
say2015
My approach was to sync by hand and it's kinda my value prop here since I went deep in both worlds.

The automation promise seems amazing but I still haven't seen something that really works. For a given design, a designer can create it in countless variations using Figma, while developers can write their code in numerous different ways to implement that design. My solution was to provide an essential layer of comps that everyone can agree on.

UseofWeapons1
Cool project - I’ve had this problem. I’d like the GitHub reader to also lay out how to set up figma. E.g. import figma library. Anything else needed?
speakspokespok
I totally get what you’re trying to do here. If you could add a YouTube video starting from a new figma account, and build something simple with your toolkit. Figma is confusing.

I’d love to use this for building dashboards that hook into my APIs.

say2015
That's a great idea and exactly what I need to do next, just need to find the time :)