How to Use Relume with React and Ant Design

At a glance

The community member is new to Relume and wants to use React and Ant Design CSS. They outline a process of creating a website and wireframe in Relume, exporting to Figma, applying Ant Design to the Relume wireframe in Figma, and then exporting from Figma to React. They ask if this is the right approach and what is the easiest way to apply Ant Design to the Relume wireframe in Figma.

Another community member responds that the "best" approach may not be the "easiest". They suggest modifying the Relume Style Guide to match the Ant Design System, particularly the "Global Styles" section. They note that if any modifications are made to the design specs, those changes will need to be reflected in the Ant Design System as well. Once the style guide is updated, the components will adhere to the new specifications, but additional styling may still be required since Relume components have been stripped of most styling.

The original community member thanks the other for the relevant answer, although it may not have been exactly what they were hoping for, as it helps bring their understanding up to speed.

RRob Dysell

Hi! This question is probably old. But I'm new! And I could not find the answer scrolling or searching through Slack.

But what is the step by step process to use Relume if I want to use React and Ant Design CSS?

My idea:

Create website and wireframe in Relume
Export to Figma
Apply Ant Design to Relume wireframe in Figma
Export from Figma to React
Disco!

Is this right? If yes, what is the easiest way to apply Ant Design to Relume Wireframe in Figma? Is it to export the Figma file from Relume as a Relume design and then change everything? Or is there a simpler and faster way? 🙏

2 comments

MMatt Johnson

I've been thinking a lot about this actually.

Initially what you've laid out sounds good.

I think the "best" approach will not necessarily be the "easiest" - and right now my thoughts are that you would modify the Relume Style Guide to match Ant Design System.

You would primarily need to match the "Global Styles" section of ADS to the style guide.

Where things get tricky is if you want to make any modifications to those specs in design, you'll need to remember to also make those modifications in ADS.

Once you've modified the style guide, our components will adhere to these specs but you'll still need to apply additional "Styling" to our components since we have stripped most styling away in favor for a more vanilla component.

Hope that helps!

RRob Dysell

Thanks for a relevant answer. All though perhaps not exactly what I hoped for at least it brings my understanding up to speed.

Add a reply

Community forum for knowledge and support

How to Use Relume with React and Ant Design