Relume Library Figma Kit now available
Download for free

What's new

Updates and improvements to Relume Library

Stay in the loop with the latest updates
May 2, 2022
Adam Mura
Co-founder
COMPONENT DAY

New components have been added to the library

It’s a new month which means we’ve released some new components to the library (Figma & Webflow). Happy May Component Day!

These include:

  • Uncommon Components - These aren’t your typical components, in fact some of them don’t even look or act like components. They are designed to give your websites a spark of brilliance. These components are more complex than others so we will be creating some tutorial videos for them in the coming weeks.

Other updates

  • Figma Kit Update (v1.3) - All new Ecommerce components and Page Templates have been added to our Figma Kit. You’ll need to duplicate it again to access the latest update.
  • Improved the components so that they are faster to build with, easier to update and more robust.
April 15, 2022
Adam Mura
Co-founder

Component Voting 2.0: How it works

Component voting has been a great tool for the Relume team to ensure that we’re spending our time and resources building the right components for the community. Over the past couple of months, since launching the voting board, the team has received lots of positive feedback related to component voting and our ability to deliver on what the community wants. Relume is extremely community focused and we aim to stay that way, which is why we are working to improve component voting so that we can continue delivering value on monthly Component Day releases.

We’ve learn’t a lot over the past couple of months and have decided to make some key changes to how component voting works with the goal of setting clearer expectations with you and reducing internal company chaos during the lead up to Component Day. The latter is very important to our company, we want to maintain a calm work environment for our team so that we can do our best work and deliver the most valuable possible.

In light of these goals, here’s a summary of what’s changed:
  • Instead of voting on components to be built in the following month, you’ll now be voting on components to be added to the roadmap each month. Given the difficulty of scoping some components and the varying degrees of scope, it has become problematic at times committing to the release of certain components within a 1 month timeframe. This has resulted in setting unrealistic deadlines and not meeting them or rushing components in order to meet them (causing internal chaos). That’s why we’ve decided to move away from the original approach and move towards a more realistic and flexible approach that enables our team to deliver on the right components in the right amount of time, thus improving the quality of output.
  • Instead of components being released on the first day of each month, they’ll now be released on the first Monday of each month. Something we did not consider when originally committing to releasing components on the first day of each month was that, on the odd occasion, that day will fall on a weekend or the day before a weekend. This isn’t ideal if any issues arise and the team needs to be around to solve them (we value time away from our computers on the weekend). Keep in mind that new components require additional updates to the front-end and back-end of our platform. By changing the day to the first Monday of each month, the team will be around to provide support if needed and answer any questions about the release.
  • We’ll be adding the top 2 voted items to our roadmap each month. Items that are added to our roadmap will be delivered within 1 to 3 months depending on the scope of work. This number may change as we continue scaling up our internal component team.
What's remained the same
  • New components will be released at the beginning of each month.
  • Voting will reset each month to ensure votes are most relevant to the existing community.
  • When possible, we’ll provide a release date on components so that you know when they are coming.

If you’d like to provide feedback on component voting for our monthly Component Day, feel free to reach out to Adam or Dan on Slack or via email at hello@relume.io.

April 4, 2022
Adam Mura
Co-founder
COMPONENT DAY

New components have been added to the library

It’s a new month which means we’ve released some new components to the library (Figma & Webflow). Happy April Component Day!

These include:

  • Product List Sections
  • Product Headers

Other updates

  • Page Templates - We studied hundreds of high-converting websites from the most successful companies in the world and applied our learnings to these templates. This should help you get started with content much easier. Also, it’s a huge time saver being able to copy and paste an entire page.
  • UI Elements - You can now copy and paste smaller UI elements which should make customising existing components much easier. For example, if a component is missing a button or a heading, you can add one in (for now we recommend you opening these up in a seperate tab).
  • Figma Kit Update (v1.2) - All new Ecommerce components and Page Templates have been added to our Figma Kit. You’ll need to duplicate it again to access the latest update.
  • Fixed bugs relating to existing components
  • Improved existing components
March 2, 2022
Adam Mura
Co-founder
STYLE GUIDE SELECTOR

Enable 100% compatibility with Finsweet's Client-first style guide

Today we’re launching the Style Guide Selector which you can find in the top right-hand corner of the dashboard. The purpose of this feature is to enable 100% compatibility with other style guides such as Finsweet’s style guide found in their Client-first cloneable, which many of you have used on existing projects. Simply select the style guide you’re using in a project and the components will adjust to the CSS values of the pre-built classes in that style guide and prevent unnecessary class duplication.

Why did we build this? (The problem)

Many of you have reached out regarding class duplication issues when using Finsweet’s style guide with Relume Library components. Although we recommend you use the Relume Library Style Guide, we understand that many existing projects were built using Finsweet’s Client-first cloneable and so we wanted to make sure that our components are compatible with both Finsweet and Relume starter projects to prevent any unnecessary class duplication occurring. This is important because class duplication leads to class renaming, which takes time and reduces productivity, and we care deeply about productivity.

Just to be clear, class duplication in Webflow occurs when two classes share the same name but have different CSS values and properties. For example, let’s imagine you have a .button class in Project A and it has a border radius of 1rem and a .button class in Project B and it has no border radius. If you were to copy Project A’s .button and paste it in to Project B, the button class would duplicate and be renamed to .button2.

Relume Library components have been built using pre-built classes from the Relume Library Style Guide. The same pre-built classes can be found in Finsweet’s Client-first cloneable, however, some of Relume’s pre-built classes have different CSS values, primarily for spacing classes. For example, Relume’s .margin-small class uses 1.5rem, whereas Finsweet’s .margin-small class uses 1rem. One of the reasons why class duplication occurs when pasting Relume Library components into projects that use Finsweet’s style guide (found in Finsweet’s Client-first cloneable) is because the components consist of classes that share the same name but have different values.

For the purpose of transparency, the following classes have different CSS values and would lead to class duplication:

How it works

The Style Guide Selector works by adjusting the CSS values based on the style guide selected. This means that when you switch between style guides, the components will slightly change in appearance to match the selected style guides spacing, typography, colours and UI elements.

Why did we decide to change the values in the first place?

At the time of building this library, we did not anticipate the reception we’d get from the Finsweet community and the issues that would result from pasting components into an existing project that uses Finsweet’s Client-first cloneable. We took the approach of building a library that we at Relume would use, and adjusting the spacing values that fit our design system made the most sense at the time. To this day we still prefer our spacing values (as they skew towards smaller spacing dimensions) and find them to be more inline with our design style, which is why we’re sticking with them for now.

This does NOT solve class duplication completely

The issue of class duplication can’t be avoided at this stage and is the nature of copy and pasting components into Webflow. What can be avoided is the unnecessary duplication of classes due to the conflicts between the two style guides, which we have now solved with the release of the Style Guide Selector. We aim to continue to solve problems around duplication as we believe it has the opportunity to increase productivity and improve workflows.

March 2, 2022
Adam Mura
Co-founder
COMPONENT DAY

New components have been added to the library

It’s the first day of the month which means we’ve released some new components to the library (Figma & Webflow). Happy March Component Day!

These include:

  • Banners
  • Sign up / Log in Pages
  • Sign up / Log in Modals
  • Contact Modals
  • More Footers

Other updates

  • Preview feature: You can now preview components in the browser before pasting them into a Webflow project by clicking the preview button.
  • Fixed bugs relating to existing components
  • Improved existing components

More information

We’re anticipating a few questions so have documented some answers below.

Where are the ecommerce components as promised?

The short answer is that we’re still working on them and will be releasing them as part of our next component day on April 1. We did not want to rush them and so we’re using this extra time to make them as good as possible!

Will you be updating the Figma file with the new components?

Yes, we’ve updated the Figma file with all new components. To access them you’ll need to duplicate the file again on Figma.

February 23, 2022
Adam Mura
Co-founder

Relume Library Figma Kit now available

We just released a Relume Library Figma Kit to the Figma community for FREE!

I’ve recorded an introduction video to help you get started.

We’ve created a #figma-kit channel in our Slack where you can ask any Figma Kit related questions or provide feedback. Feedback is very much welcomed!

Lastly, big shout out to the team at Minimal Square for taking the initiative to build this out and give this away for free. It’s an awesome gesture and speaks volumes to the community we have here.

February 14, 2022
Dan Anisse
Co-founder
Community Voting board

You can now Vote for new components

In order for us to continuously listen to your feedback for Component Day, we’ve decided to create our own voting board where you can upvote which new components you’d like us to build for April 1st Component Day.

Instead of collecting votes over a single timeframe, we are taking the approach of refreshing votes each month so that requests are more relevant to our current members.

You’ll also be able to see the components we are currently building for our next component release.

February 2, 2022
Adam Mura
Co-founder
COMPONENT DAY

New components have been added to the library

It’s the first day of the month which means we’ve released some new components to the library. Happy component day!

These include:

  • Navbar Mega Menus
  • Career Sections
  • Gallery Sections

Other updates

  • Interactions filter: You can now filter to find components that use interactions. We’ve also added a label that identifies the components that use interactions. After speaking to a few people in the community, we realised that it wasn’t clear that some of our components come with interactions built into them.
  • Menu redesign: Opened up the browse components menu for better visibility.
  • New Components page: New components page which features the new components released for the month.
January 28, 2022
Dan Anisse
Co-founder
CONTRIBUTORS

Interested in contributing to the Relume Library?

We’re calling on the community to help us build the most epic Webflow component library of all time. Submit components and earn rewards.

December 27, 2021
Adam Mura
Co-founder

Make Relume Library components fluid responsive

A fluid responsive method for Relume Library is now available thanks to our friends at Finsweet. Make your website fluid responsive visually in rems, without writing custom css or making calculations. I’ve created walking you through how to add it to your website (see below).

View documentation