Looking for Updated End-to-End Relume Walk-Through Video | Relume Community

Looking for Updated End-to-End Relume Walk-Through Video

Returning back to Relume after being an early adopter. A lot has changed... for the better! Super stoked and I love where everything is headed. However, I need a little bit of help. I'm a pretty good self-starter when I have a good step-by-step walk-through video. I checked out a few, one from the webflow team where Adam got on as an intro, one from the Flux team, and a few others. They all seem to not be from end-to-end or with outdated material. I was hoping there was an end-to-end walk-through video with the most recent version of everything.

36 comments

Matt J.
·
John welcome back! Have you had a chance to check out relume.io/resources yet?
John
·
Yeah, I checked that out. I'll go through it again. I think my main question right now is, do I have to even import in the Figma at all or can I just work straight out of webflow?
John
·
Can I just use Ralume and Webflow directly, with the Chrome extension and Webflow app
Matt J.
·
John oh sure you can bypass Figma and go right from Relume Site Builder directly to Webflow using the Webflow app - shouldn't be an issue there for sure.
Matt J.
·
might as well get in the habit of that anyway.....
Matt J.
·
🫢
👀1
🤔1
John
·
I love Figma. I would love to put it in the process. What I was hoping, and I'm not sure if this is possible yet, is that everything syncs together - The Ralume Wireframe, Figma, and Webflow project. But my assumption is I have to maintain all three of those and keep them up to date. Is this accurate??
Matt J.
·
yeah I would say for the most part thats accurate. One minor tweak to the mindset - at least for today - is that once I've exported to Figma, I really no longer care too much about whats going on in Site Builder when it comes to minor things. So I don't really keep it updated. However the more updated you do keep it, the cleaner your Webflow export will be.
Matt J.
·
For me, the step from Figma to Webflow is one that I just treat Figma as my new source of truth - so adding or removing elements in Webflow or what not, is not a big deal - what does trip me up is if I have swapped out an entire component in the design process - going back and making sure to do the same in site builder so that when I do import into Webflow, its being accounted for. Not the end of the world though as again, your Figma file becomes the source of truth and its easy enough to reference what layout I am using in the design, and grabbing that same layout via the chrome extension in Webflow.
John
·
I appreciate what you're saying, my brain definitely gets in the way sometimes. I've always been a designer right inside a webflow kind of person, maybe my approach is all wrong and why I have messy projects 🤣
John
·
If I delete all the pages but the Style Guide in the Figma Kit, is that okay. Was going to try to use other pages for the wireframe unless it's best to stick it on the same page as the style guide
John
·
Sorry I'm not in front of my computer, so I'm kind of going from memory on everything
Matt J.
·
gosh yeah, I've tried so many times to design right in Webflow - as least with clients, its never panned out well for me. Tried and true over the course of 100+ websites:
1.
Sitemap
a.
Client Approval
2.
Wireframes
a.
Client Approval
3.
Stylescapes
a.
Client Approval
4.
Homepage Design
a.
Client Approval
5.
Interior Pages - Design
a.
Client Approval
6.
Development
Matt J.
·
oh yeah, you can delete the welcome and thumbnail pages, by yeah keep the style guide page
Matt J.
·
I actually customize the figma kit to include a series of new pages
Matt J.
·
1.
Style Guide
2.
Sitemap
3.
Wireframes
4.
Stylescapes
5.
Design
a.
Handoff
b.
Assets
6.
Archive
John
·
I appreciate that, actually I was going to use this mostly for my internal use but it's not a bad idea to treat myself like a client and go through the right process
John
·
I'm on 5th of the 10 videos in the Getting Started series (is that you in the video?). This is my second time through, but it's making more sense. The client feedback feature is pretty sweet. I used to use Zeppelin or something like that to achieve this, super clunky
John
·
Thanks for your help tonight.
John
·
Going to finish these videos and take a crack at it tomorrow, sure, I'll have more questions
Matt J.
·
no problem John - any questions you have let me know!
John
·
Okay, one more question. Should you edit the webflow Style Guide and variables before you import, and if you don't, does it matter -- can you just edit the variables and style a guide after you've imported from the site builder?
John
·
Also, and it's the bonus question, on the last video in the series (https://youtu.be/4-PVJoZgMsI?si=FZ1dR9ZALQXdSfNC) it talks about creating all the pages including CMS pages before you import from webflow if you have to create anything from scratch. I'm not sure if I understand.
Matt J.
·
Jumped into a meeting here but will definitely respond do these questions shortly!
Chris W.
·
Well this sounds huge… Matt subtly dropping huge hints. I think. 🤔
🤫1
Matt J.
·
Chris W. huh?
Chris W.
·
That bit about getting used to a workflow without Figma. Unless I read that wrong.
Matt J.
·
maybe
Chris W.
·
Haha. Ok ok. Good back and forth in that chat.
Chris W.
·
How are you using stylescapes in your process? Only time I’ve used those is when I learned about them through Futur. Way back.
Matt J.
·
John I tend to customize the style guide first and then import everything yeah. You could really do either way - first or last. As for the last question - this is just a good best practices approach that both Kaleb and I have used in practice which is being sort of taken care of for you using the webflow app - create all of the pages ahead of you starting to customize - so that if you run into a button that is linking to the about page, you can immediately hook that button up to the about page instead of having to find a bunch of broken links later in the process. As you are designing top to bottom, its just easier to hook things up as you go.
👍🏼1
Matt J.
·
Chris W. my process and reasoning for stylescapes is a bit of a simple approach compared to the original Futur examples. Basically while I'm waiting for client approval of sitemaps and wireframes, and sometimes even waiting for the copywriter to finish writing all of the copy for the website, stylescapes gives me an opportunity to explore 3 different concepts for color palette, typography, photography and how all of those things play into a simple Relume component hero layout. Sometimes I'll have more than one component if I want to have a better feel for how these elements play together, but ultimately it lets me explore options much quicker and a lot earlier in the process - and oftentimes when I'm feeling inspired versus trying to force it. Because really, I can do a stylescape at any point after the kick-off call and before I start on the homepage design. So if at any point during that 2-3 week period, I'm feeling inspired, I can dive into a stylescape.
👏2
🤘🏼1
Chris W.
·
I like that. Damn good idea
John
·
That was some good support. May have improved my design process.
John
·
We have a hurricane brewing out here. Live in Florida. I short, my priorities shifted for the day, but I am going to take a crack at this tonight.
Matt J.
·
Understood John, stay safe. You know where to find me if you have any questions!
👍🏼1