The Relume Library, launched by the Webflow agency Relume, offers numerous pre-designed templates to help you build your Figma mockup and Webflow site using the Client First method. More than 750 components and templates, developed with Finsweet’s Client First methodology, are available for you to reuse in your Figma mockups and Webflow projects. This is a tremendous time-saver for web designers!
- Navbars
- Hero Headers
- Headers
- Features
- Careers
- Gallery
- Contact
- FAQ
- Pricing
- Testimonials
- Logos
- Team
- CTA
- Blog Headers
- Blog Sections
- Blog Posts
- Footer
The idea is to easily reuse each of these components in your future mockups. To avoid copying and pasting between Figma tabs, this article shows you how to use Figma's Team Library feature. This library consolidates all the Figma components that you and your team share. You can easily access it from your Figma mockup using simple drag and drop.
3 steps to start developing Client First in Figma 👇
Step 1. Duplicate the Relume Figma Kit
Log in to your Figma account, and navigate to the Relume Library Figma Kit. Then click “Duplicate” to copy the entire kit into your Figma files. The kit will be added to all your Figma projects, giving you access to all the components.
Step 2. Share the Relume Kit in your Team library
Now that you have access to the Relume kit, you will be able to add it to your Team Library. Follow these 3 steps:
- Open the Figma project and go to your “Assets”.
- In the top right corner, click on the book icon to open your Figma library.
- Your Figma library will open with the "Relume Library Figma Kit". Click “Publish”.
Step 3. Add the Relume Client First kit to a Figma project
The Relume Client First kit is shared with all your teams and Figma projects, but one last step is required to use it: you need to add the kit to each new project. By default, the components from your Figma library are not activated in new projects. Therefore, you will need to add them each time you need them.
- Open the Figma project and go to your “Assets”.
- In the top right corner, click on the book icon to open your Figma library.
- Your Figma library will open, and you need to toggle the switch/button to activate the Relume kit for your project.
Step 4. Use Relume Client First components in Figma
Your Relume Client First kit has been added to your Figma project; you just need to use it. Each time you want to add a Relume component to your web mockup, you will need to
- go to your "Assets",
- open the section you are interested in,
- drag and drop the elements you want to use
