Community forum for knowledge and support

Updated last year

Building a Consistent Design System with Figma and Relume

At a glance
The community member has a website built on Webflow using Relume, and they want to set up a proper design system to improve consistency and efficiency. They have customized the Untitled UI library in Figma, but they want it to work seamlessly with the Relume library updates. The community member is unsure if they can build something that won't need to be rebuilt every time the library updates, or if they have to accept that nothing will sync. In the comments, another community member suggests starting with the Relume Figma Pro Kit, customizing the existing UI, and extending the style guide to include additional components, patterns, and variables. They recommend cloning the Relume Webflow Style Guide and pasting in components from Relume, then adding any custom components from Figma. The community member notes that while Untitled UI is nice, if the end deliverable is a Webflow-built website, it's better to start with the Relume style guide. They suggest a hybrid approach of using the Relume Style Guide and bringing in Untitled UI as a library, but still having to manually build out any Untitled UI components in Webflow.

Hi everyone,

I have a newbie question relating to figma libraries/design systems.

Our website is built on Webflow using Relume.

We've got a designer to build our UI, but I'd like to set up a proper design system moving forward as we're loosing a lot of time and I'd like everything to be consistent and easier to make.

How should I go about it?

Right now I customized the library from Untitled UI in Figma, and published it. But I'd ideally want this to work right off the bat with the Relume LIbrary Updates.

How do I go about building something that I won't have to rebuild everytime the library updates - do I just have to accept that nothing will sync?

M
1 comment

basically how I would approach this is start with the Relume Figma Pro Kit and I would customize the existing UI that is in that style guide to your liking.

I would then extend that style guide to include any additional UI components, patterns, variables, etc.

So now, when you go to build, in webflow you clone the Relume Webflow Style Guide and start pasting in components from Relume, you are already at least 75% there. And then from that point you are adding in your additional components from Figma, to Webflow.

Once you have your design system matching one to one from Figma to Webflow, its just a matter of pasting in Relume components to match the layouts, and adding in your additional components or content that were custom made. Hopefully this makes sense...

Ultimately, as nice as Untitled UI is - if your end deliverable is a webflow built website, I would at least start with the Relume style guide.

It might be possible to at least start with the Relume Style Guide, and bring Untitled UI as a library - style both style guides to match, and then you have a hybrid - but you'd still have to build out any of the Untitled UI components in Webflow manually because the sample library that exists is really only that - a sample - its no the full Untitled UI library and its also not following the same naming conventions as the main Relume Library.

So your only benefit from using Untitled UI in my opinion, is what it was originally intended for which is a Figma kit/design system - not a shortcut in Webflow.

Add a reply
Sign up and join the conversation on Slack