Webflow Conf 2022 Keynote
[McGuire] Everyone knows superpowers. Are real. Every superhero.
Every super villain. They harness the power they have to do incredible things — huge, unimaginable things. And when used for good, they can reach heights that were previously impossible, often to create a change or save the world and (work to...) Sara (over): Wait a second. [McGuire] What’s up? [Sara] Grimur, super strength is not a superpower.
[Grimur] I made this list. [Sara] Good. [Grimur] I HAVE super strength.
[McGuire] You don’t have super strength. [Grimur] I’m Icelandic, okay? [McGuire] Okay. [Grimur] I got Nordic fire in my belly.
[McGuire] That’s not a real thing. [Grimur] I once ran something called a marathon, ever heard of it? Sara (to McGuire): A half marathon. [Grimur] And I work on these bad boys...every day.
[Grimur] Crunches. Oblique v-ups. And tuna from an aluminum can. [Grimur] Anymore questions? [McGuire] Not really. [Grimur] Didn’t think so.
[McGuire] SUPERPOWERS, by definition, introduce something unique — an advantage or a special ability to do more. But the REAL advantage is when you start to COMBINE these things. Combining superpowers and superheroes? Results in protecting justice, or (defeating evil...) Sara (over): Sorry, one more thing. Grimur, you put Force powers? [Grimur] What about it? [McGuire] She’s right, it’s not a real superpower.
[Grimur] Really? [Sara] Where even did you get that? [Grimur] Actually, it’s by a crystal... It’s the same with web development. Except in development, superpowers take on DIFFERENT forms. There’s frontend superpowers here for building user interfaces, animations.
Backend superpowers...for reading and writing data (that means content, assets, users, payments). And logic superpowers here that glue these things together — powers that let developers actually define BEHAVIORS and integrations... [Grimur] Are you saying — hold on. [McGuire] What’s up, Grimur? [Grimur] Are you saying that these developer things are as powerful as literally having lasers shoot out of your eyes? McGuire (looking to Sara for confirmation): Almost, yes.
[Sara] (looking back to McGuire in agreement): Yeah, totally powerful. [Grimur] Wow. Alright. Let’s continue? [McGuire] Developers can piece together all this stuff in different ways to build amazing things. And THAT’S the secret.
All the greatest things? (The best, the most powerful, some of the most transformative stuff on the web?) ALL these things are built with THESE developer primitives (these building blocks). But by COMBINING them, developers can create almost ANYTHING. That’s how you build a site like Netflix.com.
Or Twitch.com. Or Airbnb, Unsplash, Pinterest. Even an Apple.com. THESE superpowers have led to the creation of pretty much everything we see on the internet today.
(Almost all of it.) Those who WIELD these powers...can create something that can be brought instantly to millions or even billions of people.
Developer building blocks? Are among the greatest superpowers in the world. But it wasn’t always this way. Back in the 1990s, most of that stuff didn’t exist. If you think of web development sort of like building a building, back then, every developer started on the ground floor.
They’d cobble together the parts they need, to build maybe a 2 or 3-story website, never ever reaching the heights we see around today. Back in ‘97, to build something like today’s apple.com, you’d quite literally need a miracle (because almost NONE of today’s building blocks existed yet). Even if you COULD build it, trying to RUN a site like this would catch a computer on fire. [Sara] What? No, no, no. That is not fire.
It’s vintage. That’s how you know it’s thinking. [McGuire] As time went on, new technologies emerged. Things like libraries and frameworks, powerful browsers and toolkits — developers could now start building at the 5th or 6th or even 7th floor. At each and every turn, it got better. New developers could stand on the shoulders of giants, no longer needing to start their work from scratch.
And all the kinds of stuff they built could reach NEW heights BECAUSE of this. So maybe you couldn’t build today’s apple.com out of the box, but you could certainly piece a lot of it together. And CODE your way to sort of match most of it. (And the bigger...) [McGuire] ...Grimur.
[Grimur] I put it out. [Sara] It wasn’t even smoking anymore. [Grimur] I saved the day...again. [McGuire] Through all of this, the more building blocks you had access to (the more you could write or develop with), the higher your starting point, and the taller you could build. But the problem still remained for quite some time: only those with all this power (these incredible coding superpowers)...had the chance to build these things at all.
Then came Webflow. A deceptively simple concept. The super secret business plan wasn’t to create another WYSIWYG. It was “take these core developer primitives (these superpowers) and build a development environment AROUND them.” Not avoiding the principles of web development, but creating an interface that leans into the POWER of it.
(An interface from which you could build and directly manipulate the very things that used to require writing code by hand.) And WITH that, the goal became even clearer: give designers the same coding superpowers DEVELOPERS have. So instead of piecing it together, starting on the ground floor, or even the 6th or 7th floor, you’re starting on the 50th floor. That’s not a feeling unique to those who use Webflow. (Software developers know it well.)
But that’s where the bigger work begins: expand the FIELD of development to empower way more people...to create for the web. Put simply: Bring developer superpowers...to designers. [Sara] Wait. JUST designers? [McGuire] No, lots of people.
[Sara] What about someone named Bob? [Grimur] Bob? [Sara] Bob. [McGuire] Yes. [Grimur] What about Mariel? [McGuire] Yes. [Same thing. “Bring developer superpowers to Mariel.” Then back to...]
[Sara] Riker. [McGuire] He’s from Star Trek. [Sara] They don’t have the internet in Star Trek? [McGuire] Fine. [Grimur] Actually a small correction, he was promoted to captain.
[Sara] What about, Haaaamilton [McGuire] Yes. [Grimur] (Indecipherable gibberish) [Sara] What about, Ffffffff [Grimur] Crumbsk. [Sara] What about, Huurrrr [Grimur] Shsssssss [Sara] What about, Ssssssss [Grimur] (Quacking and crunch noise) [Sara] What about Broooom...
[Grimur] It’s getting a bit complicated. [McGuire] Let’s just say everyone. [Sara] [Grimur] “Everyone.”
[McGuire] Good, but on the title card. [Grimur] That makes a lot more sense. [Grimur] Perfect. [Vlad] Good morning.
Welcome to Webflow Conf 2022! We have hundreds of people here in San Francisco, and THOUSANDS joining us remotely from across the world – it’s SO amazing to have you all here today! We have a lot of exciting things to talk about today so let’s jump right into it. Today is all about the power of these building blocks. Some of these are technical, some of these are creative. But what they all have in common is one thing; by combining these building blocks in different ways, we unlock SO much power. That’s what we’re building with Webflow. The power to build and maintain the best the most creative and the most performant sites in the world.
And it’s not just us saying it. Throughout the world, we’re seeing countless stories of people using Webflow to transform their businesses, and even their livelihoods. Webflow is becoming THE platform for people to build and scale their businesses on. There are now over 7.5 million sites on Webflow (almost half of those in the last 12 months alone.)
Including some stunning examples of creativity and power. And the momentum around Webflow is accelerating. We originally launched Webflow because we wanted to build a tool that lets people visually develop simple sites that outputs clean code. That was it. Since then, it’s grown into something that is used to build and run some of the most powerful sites in the world.
We’re seeing it getting adopted by hundreds of thousands of freelancers and agencies Service providers using Webflow as a development platform to build powerful sites for their clients. People making a living — so many of them as full-time Webflow developers Something we’ve started to see not just on job postings, but on resumes and CVs. And we’re seeing a huge shift in larger and larger companies coming to Webflow to streamline their development process.
More and more businesses are switching to Webflow, which is empowering their in-house teams (designers, marketers) to build and maintain world-class production sites that are beautiful, and interactive, and so much FASTER - not just the sites themselves, but in the speed and the efficiency of giving designers and marketers at THESE companies the power to directly develop using Webflow. This is transformative. People are switching from platforms like WordPress, Adobe Experience Manager, Drupal — things that have been around for DECADES. But that’s not it, because we’re ALSO seeing Webflow used by students. All over the world, people are using Webflow BECAUSE it uses many of the same principles — so many of the same developer primitives as writing code by hand — people are using it to learn development and kick off careers in design AND development. We’re seeing the start of something HUGE with students.
So whether it’s freelancers or agencies, or in-house teams switching to Webflow in droves, or students across the world using it to hone their skills and start their careers Webflow is gaining the reputation as the most powerful way to build and launch world-class sites on the web. So today, we want to talk about superpowers across four categories in Webflow: Development Superpowers, Collaboration Superpowers, Community Superpowers, and of course, and something new we’re calling SUPER Superpowers. And to talk about the first superpower, I'll pass it over to McGuire. [McGuire] Okay. Development superpowers. Three things to talk about here.
UIs (user interfaces) data and of course, logic. Let’s start here with logic. Logic brings the power of automation natively in Webflow. Here’s a slide that says “Logic brings the power of automation natively in Webflow.”
So. How does it work? There’s three building blocks. Triggers (like a form submission or incoming webhook) Conditions (if this is true, do this; if not, whatever). And of course... Actions (this is where it gets fun) WHAT we want to have happen as an OUTPUT based on the rules we define. You can do a bunch of things — modify CMS items, send an email, or even call an external service or API using an HTTP request.
KC Katalbas, as an example, made a Podcast site — so WHEN people fill out a form (and fill out their location), they get early access to tickets when the podcast announces a live show...in their city. Aleberry made this system (it’s a sort of Project Request and Ticketing System) for their agency’s website. Clients can USE this (they can submit new requests that auto-populate on the site so Aleberry can keep track AND keep clients in the loop within ONE place. And finally, Bailey Fisher here created a job candidate tracking system on Black Peak’s site, where people (where candidates) can apply to an open Webflow Designer role. And the candidates are tracked and they’re rated according to their qualifications, and the Black Peak team is notified when there’s a strong candidate in the pipeline with...and
you can’t make this up...a Philips Hue bulb literally flashing. But that’s Logic. Logic, of course, is in beta and available to anyone who signs up, so check it out if you haven’t already.
Okay. Let’s move into user interfaces. Now we’ll be showing all of this on desktop, but as you know, everything developed in Webflow supports responsive layouts.
That means larger devices and tablets, mobile landscape, mobile portrait, and of course, Dynamic Island. We actually look at user interfaces in a pretty simple way. We look at these incredible things that are built on the web, and when we see something we like (whether it’s a rebrand, a new Apple product launch), we’re obsessed with seeing how it was built.
(How it’s put together.) We want to find out: what core technologies (what UI superpowers) are their developers USING to build these incredible things. The secret for UIs in Webflow is that it’s NOT powerful because it’s a new way of developing. It’s powerful because it takes all those SAME development superpowers...and it just exposes them in a direct interface. (That’s it.)
You have your HTML (all the elements; all the nodes you can add). You have your CSS (all your styling and layout). And of course, you have Interactions (usually JavaScript you’d write by hand, then connect to a library to set up triggers, animations.)
With Webflow, you declare ALL these things directly. And the things that people are BUILDING with Webflow are remarkable. Incredible interfaces.
Powerful, interactive experiences people are developing using the Webflow Designer. Today, we’re introducing a NEW user interface concept in Webflow. And it’s all about building (and really maintaining) production-grade UIs.
Because today, not only are we announcing, but we’re LAUNCHING COMPONENTS. So what’s this all about? Well there are five phases to what we’re calling the Webflow Component Universe. We’re launching For Phase 1, components are the next evolution of Symbols. At their most BASIC level, components let you design something once and then reuse it throughout your site (navigation, a card, a form, or a footer — whatever). And even though you design a component once, you can change content...RIGHT on the canvas. (This is super powerful.)
Not only that, but you never ever have to manually create text overrides. Because with component PROPERTIES, things like text properties are AUTOMATICALLY created and linked (wait till you see this). And it’s not only text properties; you can also show an element or hide different elements WITHIN instances OF that component.
(A ton of control.) Of course, you can nest components INSIDE of other components. And for the first time, you can use (you can CONNECT) components dynamically (you can connect the elements INSIDE a component...to your dynamic data inside a Collection Page). Here’s what a component looks like. Here’s what it looks like when you’re editing.
Here’s where you can add PROPERTIES to modify stuff on a component (properties for content AND you can see where we can control the VISIBILITY of the BUTTON in this case, which is INSIDE the component). And here’s how we edit content RIGHT on the canvas (directly with the element) Here’s a NAVIGATION component used on two pages. Notice how we change the order on the contact page, it updates on the homepage, too.
And if we change the text, it keeps everything neat and consistent. So. That’s what they LOOK like let’s take a look at components in a live site.
All right, live demo. Okay, so here we are in a website. It says Zen in your pocket. Let's scroll down. And we have a card right here.
Of course, this card is not yet a component. Let's change that by right clicking and we're going to create a component. We'll cleverly name this one card and now we've created experience. The power of look at that.
We've got a little notification here letting us know the power of components. So now that we've created the component, of course, let's go over to components and we'll drag that card. Of course we can put it anywhere we want. Let's put it in the card wrapper next to the other one.
Now notice how of course everything's matched and consistent. So if I edit this component, of course, if I change the dom order in something like that, it matches. We know this, it's even a match. Let's undo because it looked better before. But here's the real cool thing.
If we escape right here, let's go out of our component can just double click without creating an override or anything. I just double click and change the text on the second instance of the component. And that's it. So you design your component once, of course, and you can use it wherever you want and you can update the content right on the canvas.
Let's look at another example. So second demo here. Got a kind of two by two design. So this is pretty neat.
So what we can do in this instance is of course we can edit the component. Let's go in and let's add something to our component. So let's look in, of course we have card content. Let's add a text block right inside of the card content.
And we'll just say something like, Offer ends very, very soon. And just like we, we'd expect you see that instance absolutely everywhere we see that, maybe we can do some styling here. So let's go over and make some changes. So we have 300, 400.
Let's go bold. We'll make it a little bit smaller. And why not? Letter spacing and all caps. All right, so we have all of those. Now what if we wanna control visibility on that offer end soon? We just created, so we can just at any time, we can click on the text block and create a component property for visibility. And just like that, we now have these controls unlocked.
So maybe on this one, the offer doesn't end very, very soon. So we can just turn that off. Maybe on this one we want to turn it off there so we can control visibility properties on each instance. Here's another pretty good example, Okay, so in this instance, we're actually using a component to generate, to keep track of, to keep this design consistent for the hero section. So we have this card, of course there's a lot of elements inside the card.
We could open that up, we can look at it, that's pretty good. But what if we wanna use this in a dynamic instance? So if we go to our collection page, we have case studies template, let's open that up. And of course, here's a section, it's blank, and inside the section's a container.
Let's go ahead and add that card. Let's add that card that we have right inside that container. So we'll place it right inside.
This isn't a surprise. I mean we have a lot of controls here. This is good. So we have this, but here's where it gets really powerful. We talked about linking to our collections earlier.
We can just take this H one heading, this heading right inside the component. And without doing anything but going to element settings, we can see this little purple plus let's plus it and let's link it dynamically to the name field. And just like that, we're pulling in dynamic data, But it's not just text. Check this out hero image. Let's select that. We'll go to the plus and this time let's pull it from hero image.
And just like that, we're pulling straight from our collection. So. The Webflow Components Universe. That’s just Phase 1: initial launch. For phase 2, we’ll be adding more power to components management (how you manage and preview components to organize your UI building blocks). Also adding support for connecting components on ANY page using Collection lists.
But for phases 3 through 5, the ability to reuse and interconnect these things becomes its own superpower. In Phase 3: more power and control. Modify styles per component instance (this is huge). And JUST as big, workspace-level components. (Reuse things like FOOTERS across MULTIPLE sites in Webflow), and keep the content and the branding consistent across all of them.
And we’re not going to talk about Phase 4, but we will say Phase 5, of course, has Loki Season 3, the next Guardians film, and Captain America: New World Order. Components are available to everybody in Webflow — and you’ll see them right in the Designer later today. And that is Components (but we’re going to come back to add even more on this topic later on in the keynote).
Up next in UI...is something pretty great. And that... is Variable fonts. Variable fonts are like the shapeshifters of typography. Matthew said that in a meeting yesterday, and it had to be the first bullet. Only one font file (so instead of loading a bunch of different weights like 400, 500, 700, 900), you load ONE file.
And very often... a variable font... ...has a smaller file size than two or three DIFFERENT weights loaded separately, which means faster load times. But it’s not just weight. You have control over ALL kinds of properties. Different axes in DIFFERENT fonts, like width, optical size, and slant, “wonky” is an axis.
And rather than just talk about it, let’s take a closer look. I'll show you in a second. It's really cool. So with that, rather than just talk about it, let's take a closer look at variable fonts. All right, here we are. Basic sight.
It's just a body set to flex, everything centered. You can see. Let's go in and select this little heading that says superpowers right now it's aerial inspiring and let's go in and change it. Let's see what fonts do we have? Let's do Frances. So let's just choose this and see we have our weight, but we're not gonna touch that right now. Instead we're gonna go down to font variations.
Check this out, add access, and instantly we have control overweight and we can just drag and directly manipulate. What if we wanna change something else? Let's add a second axis. So here's optical size. We can control the optical size and another axis and control softness.
So it's not just static though. This is pretty great because we can set this once. What if we want though to change what it looks like on hover? So let's go in. Let's mess with that.
Let's really tweak our softness. Let's make it thinner here. Let's go to the weight, pop that up, change our optical size.
There we go. So if we hit escaped, now we have the variable font on hover. We're all thinking the same thing. It's not animated enough.
Let's change that right now. We all know how to do this. Let's go into transitions. And just like you can transition any kind of CSS properties, we're gonna go in and change font variations.
We're gonna create, get ready for this. Let's create a custom easing curve right here on stage. We're gonna do it.
Let's make it wild. Yeah, there it is. And watch this. You ready? Look at that. We have so much fun with this stuff. It gets so much better though.
Check this out. So I'm gonna add a heading underneath superpowers. We're gonna write super superpowers. Check the spelling.
All right, so it's another heading. Let's choose a different font. Let's see what else we have in here. So we have Frances. We can do something like duff.
We have din puff loaded and each of these fonts are really cool. They have different axs. So you can go in and this one we can see what they have. Let's called font variations. Of course we have weight here so we can control weight. Let's see what else of width.
So we can control width. So let's start maybe a little narrower like that. Let's start with a little bit bigger of a weight. We can do something like that.
Maybe let's just actually clear these styles. Let's try a different font. What if we wanna try something like enter.
So this is a variable font for enter. Let's see what controls we have here. So let's do weight. Let's start really thin.
Go really thick is not enough. Let's go to interactions. So of course interactions. We could add something on the element on the page.
In this instance, let's go to the trigger and we're gonna control, we're gonna control what happens when the mouse moves on the screen. So let's create a continuous interaction, mouse move and viewport on mouse move. We wanna perform an action. Which action will we wanna play? This mouse animation, and let's call it mouse animation one. And so we wanna control along the X axis. So let's say it's 0%.
We want to add a font variation and we can add our axis here. Let's hit plus, let's have the weight super thin when it's over on the left. And of course on the right, let's go and add one more font variation.
We'll make it really thick. So check this out, turn, live, preview on and instantly we're adjusting live on the canvas. So I said we had fun with this. So Skylar Kitchen and Matthew Munger put together this demo.
I gotta show you. This is great. I'm gonna put this up. This is fantastic.
So what they did, this is all native and weblo. This is just a tabs component and what's happening is there's an interaction that's running. So based on the mouse position, you're able to control. This is just a published site. This isn't even the web. This is a published site.
And you can control this one, which is along an access called pro. Let's switch to plus. Look at this.
We have this happening as we move our mouse. And of course what happens if we press Ultra? We got ultra. So. Let’s add to this list. Support for states. Set transitions between those states.
Add interactions using variable fonts (timed animations like on page load, continuous animations like where your mouse is or where you are as you scroll through the page). And we’ll be launching in beta next month (fonts touch a LOT of stuff in the Webflow codebase, so we want to make sure it’s rock solid, and you can get your hands on it to start building...with Variable fonts in Webflow.) That’s variable fonts.
And that's everything in UI. What about Data? Of course, in Webflow, we have three parts of our data infrastructure: CMS, Ecommerce, and of course, Users. Let’s look at the CMS.
People DEVELOP with the Webflow CMS for a really straightforward reason. Instead of developing a page, and getting it right, then duplicating the page dozens of times, then realizing you want to update the structure or the design, only now to have to go back and update each and every instance OF that design? Only to end up realizing you had it right the first time, so you go back and update dozens and dozens of pages again? You just define (or you import) your data in the Webflow CMS. And you only have to design ONCE.
The magic is when you BIND that data (you LINK your design TO that data). Or in the sophisticated variant of that same exact thing, the magic is when you link your design to “those data.” Or in the Star Trek variant of that same exact thing, the magic is when you link your design to Lieutenant Commander Data. And we’re seeing individuals and teams manage incredible sites they’re designing DYNAMICALLY. They’re using this to build some of the most powerful CMS-driven sites we’ve ever seen.
And we think businesses, we think artists, and designers — we’re seeing extraordinary value derived from using this REALLY powerful — from using this very serious tool. So. Over the past year, we’ve been building a brand new storage architecture for the Webflow CMS.
And it builds on a lot of the improvements we’ve launched around Designer performance, and improved content management flows. We shipped content filtering in the CMS. Bulk updating (so if you have a new CSV, it’ll ask if you want to update JUST the changed data).
We shipped bulk publishing, so you can select, and publish MULTIPLE items without publishing everything. We unlocked support for more CMS Collection items, going to 20,000, 50,000, 100,000, even well beyond that. And as announced nine minutes ago, we can now link up components to dynamic data in Collection Pages.
Not to mention the fact that CMS has four fewer syllables than SAYING and 22 fewer keystrokes than TYPING “Content Management System.” But the OTHER big thing we’ve unlocked is this. As we’ve built out a more scalable CMS and data infrastructure, not only does that unlock building larger sites (which it does), but it also unlocks Webflow’s internal teams so they can work on something big.
Something that’s one of the most highly requested features in the history of Webflow. Because now that our team has prepared the CMS for scale, we now have the core foundations in place to invest heavily into native support for multi-language sites in Webflow. Let’s take a closer look at what we’re building.
First off, what we’re building is native to Webflow. You’ll be able to localize static content. As well as dynamic content through the Webflow CMS. But it’s not just text content; you’ll be able localize IMAGES. Full support for localizing alt text. You can swap out page settings (SEO titles, descriptions, slugs).
We’re also building out localization APIs so you can programmatically provide translations through EXTERNAL tools (external translation management services, like Weglot — they’re doing a ton in this space). Why is this important? Well, if you’re a freelancer building a small site, or if you’re a huge org doing global business, you’ll be able to leverage our APIs to plug in to wherever your translations already live. (Of course the goal here is to get your multi-language site up and running faster). So if we’re starting in English. We can switch our canvas language to French Then we can translate static content directly on the canvas (or through our element settings) We can provide localizations for images and alt text And we can switch to our CMS and also edit DYNAMIC content to provide localized versions of those as well.
So. Multi-language is a massive effort, and our team is building the best possible visual development experience for multi-language sites (along with powerful APIs to connect to existing translation services), and we’re working towards getting multi-language in your hands as early as we can in this coming year. So.
Again: three parts in our Data infrastructure. (That’s CMS.) Now let’s talk Ecommerce! Of course, Ecommerce sites built in Webflow are built on the same infrastructure foundations as the Webflow CMS — it just applies them in a different way, so you can create and you can sell, you know, products and services. Webflow Ecommerce is still relatively new, and we've already seen businesses sell over 5.4 million products on the platform. And our biggest Ecommerce release yet Webflow Memberships, adds on the USERS functionality.
With USERS, you can define different experiences BASED on who’s logged in. So a couple things to talk about here. As of today, we’re adjusting some of our Ecommerce plans to raise the number of items supported in those tiers. (So starting today, Ecommerce Plus is going from 1,000 to 5,000; Advanced is going from 3,000 to 15,000.) But we’re also announcing three things specific to Webflow Memberships. First, today we’re enabling access to the Memberships Beta in-product, so it’ll be available to everyone in the Webflow Designer today.
(You’ll see Users RIGHT in the UI just like you see Ecommerce and CMS.) Second, when we first launched the Memberships Beta, we had an early upper limit of 300 and then 1,000 users. But because we’re scaling our data infrastructure, we’re now 20x-ing that (and the team’s just getting started here).
But third...is a big one. Element-Level Gating. This means you can CONTROL which elements are visible (or hidden) BASED on whether someone’s logged in or not. (So if you want the experience to change so new users see one thing, but logged in users have a DIFFERENT thing, you have ALL that control.) So. Element gating is coming out next month, and the in-product beta plus increased user limits are shipping later today.
So. That's data. Let's recap what we've talked about so far in development superpowers: Webflow Logic. Add the power of automations natively in Webflow. If you’re not already using it, and you haven’t explored it yet, head on over and sign up for the Logic beta.
In UI, we covered components (of course, available today). In data, we talked about the new scale of the CMS, we got a sneak peak at Multi-Language in Webflow (teams are actively working on this now), we got increased item limits in Ecommerce, And finally, Memberships is in public beta today (available right in the Webflow Designer for everyone): 20x increase in users, and element-level gating based on whether people are logged in or not — that’s available next month.) But we’re just getting warmed up (because this was only the first superpowers section).
Because I’m super excited to pass it over to JZ, Sara, and Grimur at Webflow headquarters to take us into the next section: collaboration superpowers. [JZ] Alright, Collaboration superpowers. All over the world, teams are using Webflow TOGETHER to build and maintain production sites.
This includes freelancers who are working with contractors, agencies who are working as teams on design and content, and businesses of all sizes, who rely on Webflow as a critical part of their design, their marketing, and their development workflow. What we're announcing today builds on our past two years of improving Collaboration in Webflow. Last year, we launched MAJOR updates to the way people work together within the Designer. We made it so that others can edit content while someone ELSE is designing. You can see where other teammates are working. You can hand off design control from one teammate to another.
(This was the first time multiple people could actually be in the Designer together.) AND this laid the technical groundwork for MULTIPLE modes of editing within Webflow. Earlier this year, we released Workspaces: simplifying how you create and grow teams. We also introduced roles and permissions: you can now define who can do what...so that
people who’ll remain unnamed, like Grimur, who wreak havoc on some of our sites with millions and millions of visitors... These people can now be locked down with the right permissions, and we can LIMIT what they’re able to do. All of this is built so people can work together in the Webflow Designer. Today, we’re announcing three new collaboration superpowers. Starting...
with GUEST role. If you are a freelancer or an agency that works with clients, you’re probably familiar with the following workflow. Sara? [Sara] Thanks JZ. I run my own agency. Grimur is my client. I’m building Grimur a world-class website.
He says... [Grimur] Wow. I’m so excited to have a world-class website. [Sara] Riveting.
Now that I’ve built it, I’m ready to transfer the site to Grimur. Did you get it? [Grimur] Yes, I did. [Sara] My client clicks on the link, which prompts him to bring the site I just made...into his free Workspace. Do you see your site? [Grimur] I see my site.
How do I change everything? [Sara] Change what, exactly? [Grimur] Did you try making it pop? [Sara] I don’t even know what that means. [Grimur] I really like the color, but can you change it? [Sara] Change it to what? [Grimur] Why is it not like I said it should be? [Sara] Because you said it should be something else. [Grimur] I have more final final changes [Sara] That’s literally what you said last time.
[Grimur] I don’t like it and I don’t know why. [Sara] Can you tell me what you don’t like about it? [Grimur] I’ll know what I want when I see it. [Sara] What do you want? [Grimur] Can’t you just COPY it in? [Sara] Copy WHAT in? [Grimur] You said...you’ll deliver...the copy. [Sara] The text? [Grimur] That’s what I mean.
“Copy and paste.” [Sara] I don’t think COPY means what you think it means. [Grimur] Can you find one that looks less like a stock photo. [Sara] It’s a photo of you. [Grimur] Who’s Lauren? [Sara] Wait, what? [Grimur] Who is she, Sara? [Sara] I have no idea what you’re talking about. [Grimur] Tell me.
[Sara] Tell you what? [Grimur] Who’s Lauren Ipsum? [Sara] And there it is. The reality...of client management. But BECAUSE I need to make these changes, we need to do one of three things: (1) my client would need to upgrade his workspace and add a seat...(2) He has to share his username and password. Or (3) I have to ask him to transfer the site back to MY agency’s Workspace...each and every time they want ME to make a change.
[Grimur] I’m pretty sure you’re just trying to bill me for something else. [Sara] Back and forth we go...transfer, transfer, transfer. JZ? [JZ] Thanks, Sara, Grimur.
And that’s the last time we have to think through that workflow. Because Guest Role. Any Workspace, like this client here? Can invite a freelancer or someone at an agency TO that workspace with full design access. As a guest. [Sara] For free? [JZ] For free.
[Grimur] I like free. [JZ] And this makes collaborating with your client far easier. You don’t have to share Webflow workspace passwords anymore, your client can configure any billing on their Site plans, and you can still go in and make site changes (this includes design changes, DNS, site settings, whatever you need).
And through it all, the client’s workspace is protected. (Which means that the guest won’t have access to confidential Workspace settings.) The result...is so much better.
Sara? [Sara] With agency or freelancer guest role, my client can invite me to his Workspace. [Grimur] I invited you to my Workspace. [Sara] All the changes my client wants me to make? I take care of them behind the scenes.
DNS, Publishing, Design tweaks... [Grimur] Are you done with the changes? It’s been like two minutes. [Sara] Soon, Grimur. The result of working this way? Now I have the power to collaborate with my client THROUGH their Workspace. And my client feels more empowered than ever.
[Grimur] Any update on those changes? [Sara] Check it out. [Grimur] This is so good. [Sara] I know! Agency or freelancer guest role is THAT powerful.
BECAUSE I can be a guest in my CLIENT’S Workspace, they never have to pay for my additional seAT [B], or share Webflow login credentIALS, or transfer sites back and forth. [Grimur] I’m literally giving your agency a 5-star review. And paying the contract in full.
In cash. [Sara] Back to you, JZ. [JZ] Thanks, Sara and Grimur. That’s Guest Role. The second thing we’re announcing is site-specific access.
So you can control which sites ANYONE in your Workspace can access - whether they’re a guest you invited (using guest role) or a member of your Workspace. Sara? [Sara] There’s two examples here. One is between an (agency or a freelancer) and their CLIENT; the other is in larger orgs that use Webflow in an Enterprise Workspace. First, let’s go back to Grimur . [Grimur] Fine, but I’m playing a different client this time.
You probably noticed, my accent is very different. [Sara] With larger clients with multiple properties (multiple sites), they often want to collaborate with agencies and freelancers on SOME projects, but not all. [Grimur] I only want you to have access to my real estate business, my law firm, and my art gallery.
[Sara] Sure. [Grimur] But my cologne empire is OFF limits. [Sara] Your what? [Grimur] I can’t tell you. [Sprays] Top secret. [Sara] Is that (you...) Grimur (over): Proprietary scent.
It’s a musk. [Sara] It smells foul. [Grimur] It’s a pungent odor. [Sara] So with site-specific access, Grimur– (honestly that’s terrible). [Grimur] I extracted it from elk glands.
[Sara] Mmhmm. With agency or freelancer guest role, site-specific access can help control WHICH sites those guests have access to. [Grimur] That’s right.
[Sara] Okay. That’s for the relationship between an agency or freelancer and their CLIENT, but what about for larger teams on an ENTERPRISE Workspace? [Grimur] For this second example, in larger organizations, there are tons of sites in a Workspace we might WANT people to access, but also sites we DON’T want accessed. [Sara] So if there’s sensitive information, or you work with someone like Grimur, who, in real life (this isn’t a bit)...Grimur repeatedly goes in and messes with certain sites (sites that have millions and millions of visitors)...
[Grimur] I do frequently go in and mess with (I very slightly add a transform — a little rotation) on major headings on several production sites. [Sara] With site-specific access for Enterprise workspaces, you can control which Workspace members have access to certain sites IN the Workspace. Meaning I can go in and make sure Grimur only has access to the sites in the Workspace he NEEDS. I can protect my sanity, and my business can protect sensitive sites and trade secrets, by limiting who can access what. JZ? [JZ] Site-specific access can be granted to anyone in your Workspace — whether they’re full Members or invited agency or freelancer guests. We’re adding more and more controls to configure workspaces to not only enable collaboration where it’s helpful, but, in some cases, to DISABLE collaboration when it’s not.
This is super critical in major production environments where you want to decrease access risk or security risk. So. We’ve covered guest roles, we’ve talked about site-specific access for freelancers and agencies as well as for larger teams.
Now, I’m really excited to share the third feature in collaboration (something enterprise customers have been asking for for a really long time), and that’s page branching. Page branching allows multiple designers to work on separate designs in parallel. This enables faster build-to-launch times, it unlocks productivity for design teams, and it allows you and your team to explore design and development ideas in a safe environment. Sara? [Sara] Grimur and I are working on documentation on Webflow University. [Grimur] Wait a sec.
Didn’t you site-specific access me out of everything? [Sara] Access changed, you should be good now. In this site, I’m working on the design. But here’s the thing: while I’m updating the documentation HERE, I need Grimur to work on another page. With page branching, Grimur can now create a branch for that page (my screen’s on the left; Grimur’s is on the right). And now he can design on that branch. And it’s not just editing content, but while I work, he can ALSO do ACTUAL design work — he can create new classes, change element ordering, modify content, and even make changes to style and layout ON that new class).
[Grimur] I’m making so many changes. [Sara] Oop! Got some more people here. We got Meg, we got Mirely and Mackenzie and Skylar. Vlad’s — I don’t know what Vlad’s doing in this design. That’s like 15 — nope, 16 people working on the site at once.
[Grimur] I’m done with my changes. [Sara] When someone’s done with all their work? I can choose to go in, and merge their changes from that branch. And when I’M ready? I publish Webflow University.
JZ? [JZ] We’re so excited about how teams are working together to create and ship some of the most powerful sites out there, and we can’t wait to see what you build next. Now, back to the stage at Webflow Conf! [McGuire] So. Three announcements in collaboration agency or freelancer guest role (shipping later this month). Site-specific access for agency and freelancer guests, as well as for Members on Enterprise teams — that’s shipping early 2023. And page branching for enterprise customers and enterprise partners.
That’s shipping today. That’s it for collaboration superpowers (at least for today). And that takes us to our third category: community superpowers.
With that, I’m super excited to welcome up Webflow’s Director of Community, Emily Lonetto. [Emily] Thanks McGuire! Community has been at the core of Webflow since the very beginning. And that’s led to a couple things: we see so many members of the community as an extension of our team (we are building Webflow together) Which allows us to not only build with community in mind, but also get candid feedback — sometimes REALLY candid feedback), but it’s also led to us finding and getting to know and even work with some of the most incredible people in the world. Now.
A lot has happened in the world over the past few years to challenge how we AS a community, operate. Teams who were used to working in an office suddenly became distributed, events moved online (meetups, conferences, hangouts). Suddenly things that once felt so big and important... weren’t. And it forced a priority shift.
But despite all of these changes, that need (that HUMAN need) for creativity, for connection, and the need for community, became more critical than ever. People decided now was the time. Things that would have otherwise felt completely out of reach — all of a sudden weren’t. They jumped to full-time freelancing, joined agencies, found new communities and gained other means of financial independence. Some even found the time to simply slow down, to learn something... or if you’re “literally” me, play an obscene amount of Sims 4.
So how did this affect the Webflow’s community? 11 years ago, this was the Webflow community. Today, people ALL over the world are building on Webflow. Freelancers, agencies, business like Lattice, Greenhouse, Discord — global orgs like, the New York Times, PWC, NCR, TED, Yahoo, and Tinder for Fish. Not to mention, the countless students and educators all over the world — from Harvard, MIT, University of Toronto, all the way to Oxford — using Webflow for free through the Webflow for Classrooms program. But that’s not all. This year alone — the community has created over 3-million sites in Webflow.
People have connected online and others in person. HUNDREDS of events, meetups, and ENTIRE virtual communities that have flourished. Like Floxies, and Flow Party, and No Code North, TechJunior, Webflow Cafe, State of Flow, Relume ... just to name a few.
And through this, SO many connections and and so many friendships have formed. Even today, we’re joined live by tens of thousands of people from 61 countries across the globe. Now, we also know Webflow showing up doesn’t just mean celebrating wins — it also means understanding how we can step up even more to empower others. And there’s a lot we’re doing. Today, I want to talk about two things specifically. First.
Community grants. Webflow’s unlocking $10 million to invest DIRECTLY into the community — whether they're creating courses, workshops, hosting community events, building impactful curriculum, or working on projects that empower more people to build for the web. With that — I’m thrilled to announce some of our very first recipients. Starting with ADPList and Useful School — who are increasing access to learning design through mentorship and curriculum. TechJunior and No Code Kids — doing incredible work to empower STUDENTS.
And No Code North and the Great Design Lead Podcast — and Floxies — programs and communities that are empowering each OTHER — and the broader Webflow Community. We’re only JUST getting started here, I STRONGLY encourage checking out these recipients and heading over to apply for Webflow Community Grants if you’re wanting to leave YOUR mark. So. That’s Grants. The SECOND thing I want to talk about is...the Webflow Marketplace.
The Webflow Marketplace, is the all-new home for all Webflow products and services. What’s the goal here? We want to centralize all the creativity and ALL the expertise that our community is putting out there. And we want to create even more opportunities for THOSE building businesses on Webflow.
Let’s talk about how. With Marketplace, we’ve taken Templates, #MadeInWebflow, and of course Webflow Experts — and we’ve brought them together in one, simple place and that’s Webflow Marketplace) FIRST. Let’s look at Templates. For a lot of people learning, Templates is actually one of the first places they go. But it’s ALSO an incredible opportunity for template creators to MONETIZE their deep Webflow expertise. Today, there are over 5,000 Webflow templates available.
With top template creators making upwards of $100k/year. And one template creator making over $1 million in the last 12 months alone. With Marketplace, templates are even MORE discoverable, simply by the sheer fact that everyone’s going to one place.
Which’ll make it easier for Webflowers to find the PERFECT Template. Not to mention, it’ll also make it easier for Template creators to build and GROW their businesses. And That’s templates. But what about cloneables? Let’s just set the stage here: there are over 15,000 cloneables in MadeInWebflow. Things you can open up, see how they’re built, clone them, use them for whatever.
Now. When we launched Made in Webflow earlier this year, we said that we were building a critical foundation for a lot of new things to come. One of which, we’re launching tomorrow called Creator Profiles. Let’s take a look at the new CREATOR PROFILE. Now. The goal, ultimately, is to start building the way you show up and brand yourself within the community.
With a streamlined view for all information like followers, important links, projects, and your own updated url ...and of course — how to get in contact. But there’s more, and to show exactly what I mean by that... let’s move into Experts. The Webflow Experts program was built to improve the way we partnered with the many highly-skilled creators in our community. Through this, we introduced new ways for certified experts to build their brands, businesses and ultimately connect with new and prospective clients.
As Webflow Experts (and the community itself) has grown, we’ve heard that picking the RIGHT Webflow Expert can be a daunting task... often resulting in having to reach out to MULTIPLE Experts — adding a ton of manually back and forth, just to see who’s compatible with their project. Which is obviously not the best experience for users OR Experts in the program. Now, let’s talk about how we’re going to solve this. First, the Experts Directory.
The Experts Directory is now part of the Marketplace. This comes with a few things, updated UI, easier to filter and search. AND... just like we saw the redesigned Creator Profiles, a redesigned Expert profile. Here’s what the NEW Expert profile looks like.
And starting tomorrow, every Expert will be able to update and give a much needed refresh to their profiles. But, there’s still the problem of how can we make it easier for people to find the experts they need... that also MATCH the EXPERTISE they’re looking for? That leads me to our next update — Matchmaking. Matchmaking takes the guesswork out of hiring an Expert. With this new matchmaking flow, we’re streamlining the process from search to match. Just like tinder for fish.
Except for humans... We start by asking them a few, simple questions about their project scope, timelines, and budget - and then recommend up to seven Experts who are well suited to take on that work. (If only other things were as simple).
This not only gives clients the ability to see MULTIPLE Experts at once, but also compare multiple OPTIONS — all in one place. The best part, all of this will be made available starting today. But we’re not done yet.
Finally, I’m excited to share a brand new Marketplace category, and that’s Apps — launching today in beta. It’s no secret that our community is creative. They not only push the limits of what’s possible in design... but also the limits of our platform.
Apps are a step toward making what was once impossible — possible... better yet, they make it easy. Apps unlock powerful, third-party functionality that extend and enhance Webflow’s core capabilities. Allowing users to add to their site, take advantage of enhanced functionality or as some may say ... boost their powers on Webflow.
And with Apps now listed in the Marketplace, you’ll be able to discover and add any App to any site... anytime you need. Starting today, you’ll be able to access powerful apps built by some of the earliest members of the Webflow developer community... names many have already grown to know and love. From unlocking powerful Ecommerce workflows, to allowing you to add filtered search to your site in just a few clicks, to apps that allow you to collaborate even better with your teams. All of this, built by community members who are superpowers in their own right, like Jetboost, Monto, Whalesync, and NoCodelytics.
The best part? This is just the beginning. Starting today — you can easily find and install verified Apps, directly from the Webflow Marketplace into your site. Allowing you to create and plug into all sorts of stuff throughout your site - collections, products, workflows and more. We’re so incredibly thrilled, not only about what our community is building, but how they’re showing up to support each other.
There’s still lots to be done — but through programs like Community Grants and the brand new features unlocked by Webflow Marketplace — the future is looking even more creative, collaborative, and within reach. And that’s Community Superpowers! Back over to you McGuire. [McGuire] Next. Super superpowers. First.
Is something we’re calling Webflow Libraries. And this is incredible. For the longest time, if you’re wanting to build custom layouts in Webflow, you’d usually start in one of three ways: (1) you’d build the layout from scratch, (2) you’d buy a template and MODIFY the layout, or (3) you’d find something you’d like on Made in Webflow, and you’d see how it’s built, maybe clone it (copy and paste LAYOUTS...TO your Webflow site).
So, whether we're looking to drop a custom layout directly into our site, or we’re wanting to learn “how does Relume or Finsweet maintain their class structures?” We're bringing the Webflow community (and all the expertise and creativity that comes WITH the community) right into the Webflow Designer. And that’s what Libraries are all about. And it works like this: if we go to the Add panel, here’s all our elements (different nodes). If we go to Layouts, we see the Starter library (these are pre-built layouts that anyone can use; they’re included automatically). But at any time, we can press this button, and we’re taken to the Webflow Marketplace. Where we can explore ENTIRE libraries of custom layouts by some of the top Webflow creators.
And when we add a library, it gets added TO our site (we can see the added library here), and of course, we can use it right away. Speaking of which, let’s see Libraries in action. Here we are, of course.
We go over to our ad panel and go over to layouts, and we can see we have the Combine library right here. Let's see what happens when we click on that. And we can see all of our categories. We have gallery, blog, team, faq, clients, pricing, contact, tons of options here, even banners right here.
Let's go down and take a look at nav bars. Let's find a nav bar we like. So you can see a live preview of course, as you hover over each of these so you can kind of see what each of these headers look like. Let's grab a nav bar and let's put it right at the top inside the body. And just like that, we have a nap bar.
That's it. You can add anything from. So if we wanna go ahead and go to our layouts, we can go to the combined library, we can say we wanna add a blog element, we could do that. We can add a blog, let's say right under, let's put it above the nap bar for design creativity, and then put the nap bar back on top. And of course, the really great thing about this is because we're respecting and because we're using the class structure that the library creator used, we can go ahead and make modifications. So if we're using combined tech size, small, combined, tech size, regular, et cetera, we can change something on any one of them.
And of course it will change on multiple. So. That’s how to USE libraries in a Webflow site. But what about the other side? What about CREATING a library? If you ask our software developers, even simple things (let alone complex layouts) require a TON of time to get right. There’s a lot of code that’s written and a lot of code that’s tested to make sure you never ever have to worry about writing or testing code for even complex stuff.
But with Libraries, we’re bypassing ALL of that. Because the creator experience for libraries isn’t based on writing code to build a layout. That’s because a Webflow site YOU create...becomes the source of truth.
Which means...ANYONE who can build layouts in Webflow...can create a Webflow library. We asked Sara and our design team to create an exclusive library. Something they’ve been cooking up for...not that much time, because they had to prep it quickly for this demo.
And I gave three parameters: (1) it had to be good (if you know Sara, and you know her team, you know this is a given). (2) It had to be pink. And (3) it had to honor legendary Webflow video lead and Jigglypuff superfan Stacy Han. So they got to work and created THIS Webflow site. It’s just a Webflow site.
But BECAUSE they’re using the Libraries creator experience, they can create COMPONENTS for each layout IN the library. They can add the right metadata. And when they submit, it’ll get reviewed and hopefully approved, and that...is how
a library is born. All right, blank site. That's okay because libraries, let's go in to layouts. And you can see right here we have the Stacyland Library. Let's click in tons of pink. We got it.
That's our second checkbox. It's good. Let's make sure by dragging in some stuff, let's drag in some navigation. So let's use navigation two.
That looks pretty good. Let's go ahead and add some more stuff. Let's go and add, let's say gallery section. This one looks okay. There we go. Gallery dragged right in.
Let's add something else too. Layouts. Stacyland Library. Let's do a footer. Don't put the footer of course, right at the bottom. Or if we wanna be really different, let's put the footer at the top and then hit undo.
Cuz that's a terrible idea. All right, so just like that, we've put this together, but check this out like we showed in the first one. This is using WF text medium. Again, everyone might use different class structures.
That's okay. Choice is a very good thing here. And that means of course we can modify one of these. So if we change the size, let's make it obscene.
Go really large on this. Of course, it's affecting anything that's using that class. So it respects the class structures that library creators are choosing.
But that is libraries in Webflow. So. Libraries in Webflow. Build beautiful sites with some of the best practices from the start. Learn and explore how some of the best creators out there build THEIR layouts. Over 1,000 layouts available today.
18 libraries. Including Stacyland, which is an exclusive release which will go OFF the Marketplace November 14th. And the creator experience we showed is in development now, so sign up on the waitlist so you can join th
2022-11-13 18:55
