Relume Meets Framer (Kinda)

If your not a Framer Designer, this email is not for you.

Author

Dudu Dudu
November 27, 2024 • Reading Time: 4 minutes

In partnership with

The future of presentations, powered by AI

Gamma’s AI creates beautiful presentations, websites, and more. No design or coding skills required. Try it free today.

Gamma app is actually a really cool use case of AI.

I’ve personally used it and was impressed.

If you’re creating pitchdecks or presentations, it’s worth taking a look!

Dudu Here!

Welcome back to ProductiveValue—a space dedicated to tools and strategies for boosting productivity and conversions.

Today’s email is reaching 3,852+ creative minds ready to explore the latest tools.

P.S. Easily find the latest Tool additions in our Newest Additions Library

Supercharge Your Workflow with Relume Library and Framer:
A lot of people don’t know about this

If your not a Framer Designer, this email is not for you.

Straight off the bat, no, there isn’t a native integration between Relume Library and Framer (yet). Although there is an integration from Relume to Webflow, unfortunately there isn’t one for Framer. 

Worry not, theres a way around this, and no one is talking about it!

Relume Library offers one of the largest databases of wireframe components, allowing designers to quickly drag and drop responsive elements into their projects. It all starts with a prompt of the website you want to build. It will then generate a customizable Sitemap using AI and then proceed to provide wireframe designs based on the sitemap. 

You can build entire websites in Figma before translating those designs to Framer, without starting from scratch.

For Webflow it’s pretty simple.

All you have to do is export to Webflow and make sure you have the Webflow Relume Plugin installed.

Here’s how you can export to Framer:

  1. Go to Relume Library, Sign up here, and create your first Sitemap and Wireframe (free for 1 project)

  2. Once you made your customizations and your happy with the result, go on and export it to Figma, using the Relume Plugin

  3. Now that you imported your Wireframe in Figma, Time to add to Framer via Framer’s HTML to Framer Plugin

  4. Now, all you have to do is select the wireframe in figma, run the Framer’s HTML to Framer Plugin, and paste into Framer.

If you’re more of a visual learner, you can checkout this tutorial Thread which include video walkthrough by @duduagency on X/Twitter

Disclaimer: Written by a Human
This article was written by a human. As such, please always DYOR — Do your own research. No paid sponsorships are included in this article.

Productive value by Toolfolio

Did you enjoy this email?

Login or Subscribe to participate in polls.

Thank you so much for subscribing and letting Toolfolio be part of your journey!
We hope you discovered something valuable to boost your creativity and productivity.

If you enjoyed this, feel free to share it with a friend or colleague who might find it helpful.

Got a tool or resource you think we should feature? Reply to this email

See you in the next email!

— Dudu from Toolfolio