Collaborate in the Webflow Designer

Work collaboratively with your team in the Webflow Designer and take turns editing content and building out styles and layouts with an easy handover process for full control of the site.

Note: We're transitioning to Workspaces, and this lesson has been updated to reflect that change. Visit the Workspaces blog post to read more about these updates and changes.

If your account hasn't yet switched over to Workspaces, please visit our legacy lesson about collaborating in the Webflow Designer. You can also learn how to check if your account is on Workspaces.

This video features an old UI. Updated version coming soon!

Clone this project

In this lesson, we'll explain how you can now work together in the Designer, and I’ll show you how I can more politely kick Meg out of designing a project our team is working on.

Meg: If you touch this project…

Grímur: What? What are you gonna do?

Meg: I’ll tell you what I’m going to do. I’m going to come over there..

Grímur: Aha.

Meg: And unplug that MONSTROSITY.

Grímur: This is premium. XBDR 3.2.

Meg: It’s a cheese grater.

Grímur: Meg is the designer on this project. But I, Grímur...I can edit content while she designs and builds out the site. So. We’ll demonstrate that, then we’ll talk about how you can successfully hand off design control between your teammates.

Meg: Not even a chance.

Grímur: And we'll wrap up by talking about how you can see where other teammates are working within the project.

Now, this applies on projects within Webflow Team accounts. So let's start there.

Here is my team’s Dashboard.

Now, if I open this project (which Meg is in), we now have two people. (Two roles.) Meg, the designer (she can style stuff, add stuff, move stuff around), and me, the content editor: I can edit text, swap out images, upload and import CVS files to the CMS...

Meg: Okay, first off it’s “CSV.”

Grímur [writing on paper]: C….S…..V….

Meg: Second, why are you showing slides?

Grímur: Oh, I was giving you the chance to change the design. That’s why I did the slides...

Grímur: Just to demonstrate. Sort of a “demo.” Just to… you know, emphasize. Emphasize the...

Meg: Go back to Webflow.

Grímur: You got it, I’ve entered the project, and since Meg has design control, you can see I’m “editing.” But since Meg is making changes, we can see that design updates have been made. So we can save our work and refresh to load up all the updated styles, elements — everything in the project.

But as someone who’s editing, I can click in and change this text. I’m just changing text on the canvas. And when I’m done with that edit? Meg?

Meg: I’m still here.

Grímur: Meg. Did the text change on your computer?

Meg: Yes.

Grímur: Magic. We just changed the text while Meg was designing.

Now, as the editor, can I also edit all my CMS stuff? Why, yes. Yes we can.

Let's navigate to our CMS collections and find our Team Member collection.

Laura, a fictional team member for this fictional site, just got promoted. Congratulations Laura. So let's update her title. She is now the Content Marketing Manager. Let's hit Save. And let’s make another change. Amira's last name is misspelled in this field, so let’s fix that. We’re just making the correction here. Hit save again and let’s go and review our changes, and we’ll — WHAT?!? Stacy’s joined the project? And Sara? And Miguel?

It’s almost like this was planned…(or meticulously edited in post-production). But ANY of them can edit content, too.
Well that’s working together as teammates in the Designer, where one person has the design control (Meg) and the others (like me and Stacy) can edit content.

But what If I want to take over design control? I can just request design control here from Meg. And she can accept it from her computer.

...Meg? Can you...can we try that again?

Meg: Yup.

This didn’t happen in rehearsal. So, I’ll go in and request design control.

Grímur: You declined my request?

Meg: Yeah.

Grímur: I can’t demonstrate how this works if you decline me...

Meg (over): This is what happens in real life. I’m doing you a favor.

Grímur: Okay.

Grímur: Here’s what would happen if Meg accepted my request. I could take over the design, and she would be switched into “editor status.” (I can’t demonstrate that, but it is what would happen.)

Now. Suppose for a moment that Meg is away from her computer.

Meg: I’m literally not ever leaving.

Grímur: Meg would have 30 seconds, which I’ll demonstrate with a screen recording in post-production — this is exactly what it would look like on Meg’s screen if she didn’t keep declining.

Meg: Why did you cut to me?

Grímur: That’s uh…that’s not MY decision. It’s Miguel’s. As he edits this video. In the future.
So. At any time, an editor can request design control, and the designer can accept or decline, or control would move over automatically after 30 seconds if the designer does nothing.

But that's how we hand over control between teammates, where you can politely request and give control within the Designer. (Or...not. That’s okay, too.) Let’s move on to the third and final step. Who is in the project? I can see who’s here in the project with me. Here’s Stacy and I can even see more people in the same project in this dropdown.

So. We covered a lot here. Some of it successful, some of it we’ll have to add in post. We learned how teammates can now work together in the Designer, who can edit and who can design. We showed you how you can request design control (and what some of the potential outcomes are there), and we wrapped up by looking at how you can see where your teammates are working within the project.

That’s Team Collaboration in Webflow.

Uuuu. What are you doing? I need that. I have another lesson to film.

On memberships.

If you’re part of a team, you and your teammates can work together in the Webflow Designer. Multiple teammates can edit content while one person designs and builds out the site structure. To keep the design process fluid, you can also hand off design control between your teammates and see in real-time where other people are working within your site.

Note: Workspace Owners and Admins can manage teammates’ roles, which sets each teammate’s access to admin, design, and publishing permissions. For more information regarding roles and permissions, please visit our Workspace roles and permissions article.

In this lesson you’ll learn how to:

Work in Design mode

Collaboration inside the Designer is a feature available for all members of a Workspace. To access your site:

Visit the Dashboard
Hover over the Workspaces dropdown menu in the top left of the Dashboard and click the Workspace name
Choose the site you want to open in the Designer

The Workspaces dropdown menu in the top left of the Dashboard is shown.

When you enter the Designer and nobody else from your team is in the site, you’ll be in Design mode. Design mode gives you full control to add classes, style elements, build layouts, create interactions and everything else you need to fully build and launch your site.

When you’re in Design mode, as soon as other people open the same site, you’ll see their avatars or initials added to the upper right of the Designer, which indicates additional team members are editing content in your site.

Teammate avatars or initials appear in the upper right of the Designer.

Alternatively, if you open your site in the Designer and another teammate of yours is also in the Designer already in Design mode, you’ll be placed in Edit mode.

Work in Edit mode

Edit mode allows you to edit content in the Designer while another teammate builds and designs the structure of your site in Design mode. Multiple people can be in the Designer at the same time, but only one person can use Design mode, and the remainder of your team can use Edit mode to add or edit content.

Your editing status appears in the upper right corner of the Designer alongside avatars of your teammates who are working in the site, too.

If you are in Edit mode, your editing status appears in the upper right corner of the Designer.

Teammates in Edit mode can work with the following content:

Static copy and images: Edit text and images right on the canvas (excluding background images)
CMS content: Add, edit, and publish new Collection Items in the Collections panel
Ecommerce: Add, edit, and publish new products, categories, and discounts
SEO and Open Graph metadata: Tweak SEO metadata and Open Graph details.
Assets: Upload new assets, grab links to existing assets to download them, and manage image alt text attributes
CMS content and products: Upload content and Ecommerce products via CSV, or download it to migrate content between sites

Teammates in Edit mode will not be able to:

Publish the site
Make design changes (e.g., structural, stylistic, or settings changes)
Edit root or Symbol overrides
Edit dynamic content on the canvas
Adjust page names, work with page folders, edit page slugs, set a homepage, or set page password protection
Add or edit custom code
Update CMS settings

Incorporating design changes

As you work in Edit mode, your teammates’ content updates in other Edit mode sessions will sync live to the canvas in your session as well.

Structural and design changes that your teammate in Design mode makes (e.g., adding and removing elements, changing layouts, tweaking styles) will not automatically sync live.

When the site design and/or structure has changed, you’ll see a yellow indicator at the top of the Designer indicating that your Design mode teammate has made changes. To incorporate these changes and continue working with the most up-to-date version of the site, save your work and refresh the site to continue working.

A yellow indicator at the top of the Design indicates that your teammate in Design mode has made changes.

Good to know: Changes made in the Editor will also sync live to all open Designer sessions.

Request design control

Oftentimes, you or your teammates will need to move from Edit mode to Design mode to work on the structure of your site’s design. To switch from Edit mode to Design mode, you can request control from your teammate in Design mode.

To request design control and enter Design mode:

Click the mode status dropdown to the right of your teammates’ avatars (the mode status indicates that you are editing in the Designer)
Click Request design control
Press the Request button to notify the person in Design mode that you’d like to request design control from them

When you are in Edit mode, you can request design control from your teammate in Design mode.

After you’ve pressed the request button, the person in Design mode has 30 seconds to respond to your request for design control. The person in Design mode can choose to either keep design control or hand over control to give you full Designer access in Design mode. Once your design control request is accepted, your site will refresh to load you into Design mode, and the teammate who granted you design access will be switched to Edit mode.

When you are in Design mode, you’ll receive a notification that your teammate in Edit mode has requested design control. Once you hand over control to your other teammate, you will be switched to Edit mode.

If the person in Design mode doesn’t respond within the 30 second time limit, the person who requested design control will automatically enter Design mode and have full access to the Designer. Meanwhile, your site automatically saves and syncs between all people in the Designer — whether they are in Edit mode or Design mode.

If the person in Design mode declines your request, you’ll be notified.

If you are in Edit mode and have requested design control, your teammate in Design mode can decline your request.

Good to know: After 2 minutes of inactivity in the Designer, the person in Design mode will automatically be switched to Edit mode. If another teammate requests design control, the person originally in Design mode will be notified once that teammate takes control. If no one else takes design control during the period of inactivity, the person originally in Design mode will continue on in Design mode once their activity in the Designer resumes.

See other teammates in the site

At the top of the Designer, you can see avatars indicating which of your teammates are in the site alongside you. Hover over an avatar to display full names and what they’re doing in the site (designing or editing) as well as what page they’re working on. If a number appears, click on it to reveal which pages your teammates are working on. You can also click on the teammate directly to navigate to the element they’re touching.

Good to know: You can update your avatar (your profile picture) in your account profile.

At the top of the Designer, you can see which teammates are working inside the Designer with you, as well as which pages they’re working on.

If you are the only person working on a page, your teammates’ avatars switch to a number (e.g., 2, 3, 4, and so on) to indicate how many other teammates are in your site, but on different pages.

If you click into a page where other teammates are working alongside you on the same page, the number indicator will change to individual avatars of each of your teammates to let you know you are all working on the same page together.

When you click into the numbers or avatars, you’ll see a dropdown indicating exactly which pages your teammates are working on. You can click on the teammate directly to navigate to where they’re working in the site.

And there you have it: team collaboration inside the Designer. Build all the things together!

Try Webflow — it's free