AI-powered Sitemap Builder, Uncommon Components, Mobile Version of Figma Kit & Spacing Automations

It’s a new month which means we’ve released some new components, features and updates to improve Relume Library. Happy June Component Day!

Here's what's new:

AI-powered Sitemap Builder

_{Timelapse of the AI-powered Sitemap generation.}

Create sitemaps for your next project with our new AI-powered Sitemap Builder. This tool enables you to scope projects in minutes, collaborate more effectively with clients, save time researching, and generate ideas for how you can use our components.

The Sitemap Builder is currently in Beta and is available to anyone with a Relume Library account.

Uncommon Components

_{All 7 new Uncommon components.}

Back by popular demand, we have built a collection of 7 new Uncommon Components that can add extra flair to your websites. These components are built using more sophisticated layouts and interactions. If you need help implementing them, feel free to ask for assistance on Slack.

Mobile Version of Figma Kit (Figma Pro v1.0)

Introducing the new Pro Figma Kit which now includes mobile variants of all 1,000+ components. With Figma's content swapping properties, you can design your site, swap the breakpoint variant, and watch your content shift seamlessly into place.

The new Pro Figma Kit is only available to Lumers on a Starter or Pro plan. Lumers on the Free plan will still have access to the Free Figma Kit.

_{Swap the breakpoint variant and watch your content shift seamlessly into place.}

Why have we created a new Figma Kit file?

Our goal is to provide our community with the best possible Figma Kit. To achieve this, we invest a significant amount of time and resources into improving it every month. By including the Pro version of the Figma Kit in our paid plans, we can continue to invest time and resources into it, allowing you to design websites faster than ever before.

We are forever grateful to the team at Minimal Square for building the very first version of this Figma Kit. That is why we have decided to keep a version of the Figma Kit free forever.

What’s the difference between the two files?

Starting today, the main difference between the Free and Pro versions of our Figma Kit is that all future updates will be added exclusively to the Pro version and that the Pro version includes mobile variants. Future updates will include improvements to the kit, such as adding mobile variants, any new components and updates to existing components to reflect Figma updates.

Spacing Automations for Client-First

We’ve made some updates to Relume Library off the back of Finsweet’s recent updates to Spacing Blocks in the Client-First documentation.

Choose your preferred spacing strategy

You can now choose your preferred spacing strategy when building with the Relume Library. To do so, go to the "Preferences" dropdown in the top-right-hand corner of the page and select your desired spacing strategy. Alternatively, you can select the desired spacing strategy from the settings menu inside our Chrome Extension. Once you've chosen your strategy, any components you paste into a Webflow project will adopt that same spacing strategy.

If you are unfamiliar with Client-First's spacing strategies, we recommend that you read through the Client-First documentation. Here are some quick definitions to get you up to speed:

• Spacing blocks: In Client-First, a "spacing block" is an empty Div Block with utility class(es) that creates space between two sibling elements.
• Spacing wrappers: In Client-First, a "spacing wrapper" is a Div Block that wraps a child element and creates space between a sibling element.

Update the spacing strategy used in a project

You can now update an entire project to spacing blocks or spacing wrappers depending on your preferences. You can do this by using the Relume Chrome Extension and using the “Update Spacing Strategy” feature.