Relume Community Icon
Relume Community
  • 🏠Home
  • 📅Events

  • 🔵Announcements
  • 🔵General
  • 🔵Getting Started
  • 🔵Issues
  • 🔵Showcase

Powered by Tightknit
General
General

Optimizing Your Workflow: Figma, Relume, and Webflow Explained

Avatar of Daniel H.Daniel H.
·

New to webflow, figma and relume and I have a question about workflow. What is the industry standard or what are the pros and cons of using Relume? Specifically, after I get my wireframes do I export to Figma and use time (bill clients) and then from figma to webflow? Or do I go from relume wireframes and export to webflow? As someone new to this process I see lots of resources like FIGMA TO WEBFLOW videos and relume has a relume>webflow but they also have relume >figma. So the way I see it that I need to learn is either relume>webflow or relume>figme>webflow. Thanks for your time.

8 comments

  • Avatar of Matt J.
    Matt J.
    ·

    Daniel H. I did a full walkthrough of how I work with the site builder tool. and how it translates to figma and back to webflow - its an hour or so long...rough draft. It might give you some insights https://relume.notion.site/Using-the-Relume-Site-Builder-Full-Walk-Through-409e549d44594f0986c7b3453d93a5e4?pvs=4

  • Avatar of Daniel H.
    Daniel H.
    ·

    thanks so much --

  • Avatar of Blair
    Blair
    ·

    Hey Daniel, this isn't very clear to most people TBH 😊 Relume

    • Sitemap

    • Wireframes

    • Get layout and content finalised

    Figma

    • Clone Relume starter project

    • Install Relume plugin

    • Import site map and wireframes

    • Update style guide page in Figma with fonts, colours etc

    • Add logo and images to wireframes

    • Modify components by detaching and recreating to enable faster styling of wireframe.

    • Get design approved

    • Export assets (images)

    Chrome

    • Install Relume extension

    Relume

    • Clone Webflow starter project (style guide)

    Webflow

    • Install Relume app

    • Site settings / Fonts

    • Import wireframes (or copy and paste components from Relume)

    • Make sure page structure is:

    • Body

    • Component

    • Navbar

    • Main

    • Sections (components)

    • Footer

    • Update style guide page (fonts, colours...)

    • Get approved

    Webflow (to create account on behalf of your client)

    • In private tab, sign up for webflow with your email (name+client@domain.com)

    • Invite yourself to workspace as a guest (requires Freelancer workspace plan)

    • Accept invite via email

    • In your workspace transfer final site to client workspace you just set up

    • Accept transfer via email

    • Change workspace account email to client's email

    • Get client to add a paid site plan to the site you transferred (requires their credit card)

    • Update other site settings, e.g SEO

    Publish site from client's workspace. Done ✅

  • Avatar of Jack G.
    Jack G.
    ·

    Blair this is an excellent resource! Can you explain the reasoning behind the process with the private tab:

    • In private tab, sign up for webflow with your email (name+client@domain.com)

    • Invite yourself to workspace as a guest (requires Freelancer workspace plan)

    This side of managing client projects is kinda hard to find content on!

  • Avatar of Blair
    Blair
    ·

    Sure, the goal is to have a client who is new to Webflow set up with a new WF account (workspace) and for you to be a guest and for the site to be transferred to their workspace. I tried explaining all this to a client and we got there in the end, but it is easier if you just do it all for them and then change the WF account email to their email and it's all done. Plus you're a guest so can do whatever you need. They just need to add the site plan with their credit card.

    👍1
  • Avatar of Jack G.
    Jack G.
    ·

    Very nice... That's really useful 🙏

  • Avatar of Blair
    Blair
    ·

    I got that tip from Matt J. 🙌

  • Avatar of Jack G.
    Jack G.
    ·

    Matt knows a few tricks alright!