Show HN: Functional UI Kit – twin Figma and React component libraries(github.com)
github.com
Show HN: Functional UI Kit – twin Figma and React component libraries
https://github.com/functional-ui/functional-ui-kit
16 comments
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.
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.
I'm working on https://figma-to-react-native.com and a companion UI Kit that targets React Native (including Web)
I will have a service soon where you can publish your Figma design as a package to consume in your React Native app.
You can find more functionality and updates here: https://x.com/theultdev
I will have a service soon where you can publish your Figma design as a package to consume in your React Native app.
You can find more functionality and updates here: https://x.com/theultdev
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.
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.
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.
yeah it's pretty heavy, it's a good point
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...
> 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...
I'm getting file not found on the figma designs in the story book, here for example: https://functional-ui.github.io/functional-ui-kit/?path=/sto...
Thanks for catching this. Will fix!
No worries, it's still broken by the way, I have an enterprise SAML log in for figma, not sure if that helps. I did want to demo this to my company, but maybe you are not ready for prime time just yet?
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.
I’d love to use this for building dashboards that hook into my APIs.
That's a great idea and exactly what I need to do next, just need to find the time :)
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.
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?
If you duplicate the file from the Figma community:
https://www.figma.com/community/file/1338456115232271694/fun...
Go to the "Getting Started" page and you will have instruction there on how to set up the Figma library. It's pretty simple. Let me know if that worked for you.
Go to the "Getting Started" page and you will have instruction there on how to set up the Figma library. It's pretty simple. Let me know if that worked for you.
Are the Figma and Storybook synchronized by hand, or is there a better approach than maintaining separate implementations?
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.
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.
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.