Webflow Conf 2023 Keynote
[APPLAUSE] Good morning, everyone. It's so awesome to see you. And welcome to Webflow Conf 2023. We have hundreds of people here in San Francisco and 20,000 joining us remotely from so many watch parties and from home. And over 150 countries represented around the world. It's so, so amazing to be here with you all today. [APPLAUSE] Webflow's mission is to bring development superpowers to everyone.
This means giving those of you who want and need to build really powerful websites the tools and the knowledge to make it happen. And that mission is at the heart of everything that we do. It's the reason that we exist as a company. It's the reason we're all here today as a community. And it's what drives us when we look at the possibilities of a better future that we can all create together. And the web has now been around for 30 years. And in the last three decades, it's reshaped how we live, how we communicate, how we work, and how so many of us conduct business. And Webflow has now been around for 10 of those years. And in our first decade, we're so proud to say that we've served hundreds of thousands of customers, so many of you in this room. We've helped create millions of sites and served hundreds of billions of page views
through our platform, almost trillions. My dad just asked me, why not trillions? And we've helped the no-code and visual development movement grow to new heights. And this morning, and all throughout the conference, we're going to talk about some big leaps we're making towards our mission to unlock more and more development superpowers and putting them into your hands. So what are those development superpowers? Well, when you look behind the scenes of every single pro website out there, you'll find three foundational code-based technologies that power pretty much everything that you see in the browser.
First is HTML, which describes the content and the structure of a site, the words, images, elements, all the tags that define what's there on the page. And then there's CSS, which enhances that core structure with color, style, and layout to create beautiful and responsive sites. And JavaScript, which builds on both by adding interactivity and animation, deeply customizing what happens when somebody interacts with the page. And Webflow combines all three of these into a seamlessly integrated visual development environment, unlocking the possibilities behind these technologies to everyone who aspires to build for the web. And we want the power behind HTML and CSS and JavaScript to reflect not only in our product and in all the things that all of you in this amazing community create with it, but also in our brand new logo. [APPLAUSE] I know, right? It so now visually embodies our mission of bringing these powerful development superpowers to everyone.
So this is the new Webflow. It's a Webflow that holds true to the original ideals that we started this company around, and a Webflow that sets us up for the next 10 years of bringing even more development superpowers to the world. And a Webflow that represents each and every one of you, our customers, our incredible community that we're so lucky to be part of and to have, the people, the real human beings who are harnessing these superpowers to build amazing sites and to change how the web is built one pro site at a time.
And starting today, you'll see our new logo and our new brand flow through everything from our website all the way to our product. And speaking of our product, let's dive in into some new development superpowers we're bringing to Webflow, which I'm sure so many of you are here for. Today, we're going to talk about some new site capabilities, some big things around styling and design systems in Webflow, about how we're growing the Webflow ecosystem with new apps and developer capabilities and the integrations and external tools with platforms that make all of this possible. We'll cover how collaboration around building powerful sites in Webflow is evolving. And
we'll share some amazing things happening across this awesome Webflow community. We'll start with new site capabilities. But before we do that, I'm going to take a little bit of a drink of water.
I didn't have to open it last time, like last time. All right. First, you'll notice that all parts of Webflow, especially the core Webflow designer, are evolving to reflect our new brand and the kind of pro websites we want to enable all of you to build with it. This goes live today. And you'll see us use this UI all throughout the demos in this conference. With that said, let's talk about some new things that we're really excited to unveil. We'll start with something that brings life to some of the best, most award-winning, most captivating pro websites out there. And that's-- can anybody guess?
3D. [APPLAUSE] Today, we're bringing the power of expressive and interactive 3D via one of our favorite tools in the world, Spline. [APPLAUSE] Spline is an amazing tool to create stunning, interactive 3D experiences on the web. And we've already seen a ton of captivating sites using Spline in creative and really innovative ways. So today, to make it a lot easier, we're launching native Spline integration in Webflow. [APPLAUSE] We're making it a lot easier to work with both tools together. And the real magic is what's
unlocked when you supercharge Spline with the power of Webflow's interactions engine. This means full support for not only dropping a Spline scene into the Webflow designer natively, but instantly unlocking the power of Webflow interactions to control that scene. And when you do that, you can now control objects, cameras, even lighting, right? [APPLAUSE] You can also animate groups of objects based on user interactions.
But all these slides really don't do it justice. So I'm going to jump into a demo to show you what it looks like in practice. [APPLAUSE] All right, so here we have...we're making a website for an amazing new bike that we're creating. And we can see the Spline scene. We have a beautiful 3D model. So I'm going to jump into this site that we're creating that has this Spline object already dropped in. But what we want to do is really make it so much richer with Webflow interactions. So
I'm going to click on this first section here. And I already have an interaction bootstrapped. If I go to this hero section, I have a scroll interaction set up here. And what if I want to, maybe around this area, turn the bike towards the camera, and move it over to the side so that it doesn't get in the way of the text? I'm going to do exactly that. I'm going to have-- I have this e-bike that's the entire model selected in interactions. And I'm going to
move it over and rotate it towards the camera. [APPLAUSE] Do a little this way. All right, now I'm going to scroll up and preview this. So as I scroll down-- [APPLAUSE] All right, so let's save this out. That's just the beginning. If I scroll down here, I have this other section. And just to show you the level of control you have over individual objects and groups in a spline scene, I'm going to go into another scrolling interactions that I have selected here. And what if I want to, as I'm scrolling this section, I want these elements to come towards the viewer and move towards the camera? So I'm going to select the screen here. And I want it to go up here and towards the camera
and maybe rotate a bit. All right, I'm going to preview and scroll up. And as we scroll, I have complete control over these objects. All right, we'll save here.
And then this is my favorite part. We have a scene here with the same bike. And I have a light set up in the spline scene. And I want to control that light through Webflow interactions. And I'm going to set up a continuous interaction here. So when I'm on the left side of this entire object, as the user scrolls, I want them to engage with this model and start to move the light around. So here, I have this point light selected.
I'm going to turn on preview. And I'm going to move the light all the way to the left. And when I'm on 100% of this container, I'm going to move the light all the way to the right. All right, let's show preview here. [APPLAUSE] All right, so I'm going to save this really quick and go into preview mode. We just started with a pretty static site with a 3D model. And in just a few minutes,
we created some beautiful 3D interactions that really bring life to the site. [APPLAUSE] So that's bringing spline and a ton of new 3D interaction possibilities natively into Webflow. And this launches today. [APPLAUSE] Absolutely can't wait to see what you all build with it. OK, next up in Site Capabilities is something that we've been working really hard to get into your hands. Because for countless businesses with international audiences, so many of you here in this room and watching online, crafting a website that caters to various languages and locales is absolutely crucial. So today, I'm super excited to show you and show off localization.
[APPLAUSE] I am so proud of our team for building it in a way that is uniquely Webflow. It lets you build and deliver fully localized sites directly to the Webflow designer, visually without writing any code or having to configure complex integrations. But before I talk more about it, let's actually see it in practice. [APPLAUSE] All right, so here I have a brand new site that I'm designing for a bank that I want to be available to multiple audiences. And I already have-- let's start with France. I already have set up in the site, in the localization settings, I set up a French locale with a subdirectory that sets up a new menu here in Webflow to switch between languages. So I'm going to go ahead and switch into French. And of course, as you would expect in Webflow, I can double click on anything and localize directly on the canvas.
All right, but that would take a little bit of-- that would take quite a lot of time. So what I can also do is right click and translate to French using machine translation. [APPLAUSE] And I can go through each element and do that. Or I can go to the body and translate the entire thing to French. [APPLAUSE] Sometimes it does get a little ambitious. So I'm not quite sure that looks right. So I'm going to reset to the default locale, just like you can through all of Webflow reset to inherit from the default locale. And of course, I have complete control over all the content
here. We can see here that we still have some things that are not localized. And it's really important because we're showing currency. We're showing text. We're showing things that are not localized to French. So I can just double click on this image and choose. I have a French version in the asset manager. And here we go. Easy as that. And of course, you can localize all text and everything you would expect to make it a fully localized experience. I have another image here. And here we go. All of our static content and images are translated directly on the canvas.
And there you go. I know, right? What about this? We still have some English here. Guess why? It's in the CMS. Thank you. All right, we're going to go into our testimonials collection.
And we'll just translate one item here. And of course, I have complete control over each of these fields in my French locale. But I also have access to speed up my process with machine translation. So I'm going to translate a few of these really quickly and hit Save. And then we'll switch to-- I mean, you can see already, we have the French version. If I switch to English,
it's all in English. And if I switch to French, our CMS content has now translated to French. [APPLAUSE] And before we publish, we want to make sure that things like SEO settings are fully up to par. So I'm going to go into my home page settings here. And of course, I have the same level of control here. I can machine translate or manually edit or using some of our API partners. You'll be able to do this automatically through TMSs.
I will translate-- machine translate this meta description. I already have an Open Graph Preview set here. And I'll hit Save. And now, by the way, one of the best things about this is the new edit mode that we announced a few weeks ago has all of this built in. So you can have translators using edit mode to do everything that I just showed you.
All right, now I'm ready to publish. So actually, let's switch-- oh, and you have complete control over the language switcher with the ability to design it however you want. So I'll go ahead and switch to English and publish it. And as we wait for that to happen, everything publishes server side. So there are no complex JavaScript integrations. It runs really, really quickly. It's server side rendered. We're publishing all the sitemap, all the SEO settings to make sure that we're delivering a super robust, super fast experience to every locale. So here, I have my site in English. And I'm going to go ahead and switch to French.
And here we go. We just started from-- [APPLAUSE] So that's native localization in Webflow. And localization is available for enterprise customers and partners today. And we'll be available to all customers next month. [APPLAUSE] And we have several teams that have had early access and have already gained a ton of value. For example, the team at Sojern has already seen dramatic improvements in
their workflow and are really excited to see their business growth accelerate globally. And the team at Maloko now feels fully empowered to create custom experiences that will boost engagement now for their international audiences. With localization, we're putting the power to quickly create development grade localized experiences in all of your hands through the magic of visual development. And we can't wait to see what you build with it. So those are new site capabilities-- 3D in Webflow using the new Spline integration and localization natively in Webflow. [APPLAUSE] Next, let's move on to updates across styling and design systems. And in this section, I want to bring you back to one of the core web technologies that we talked about a little bit earlier-- CSS and how we're now bringing a very powerful part of it natively for you to leverage in Webflow.
Over the last few years, website developers leveraging CSS style sheets have moved towards more modular, scalable, and reusable systems to build and maintain really critical and large production websites. And they're creating shared design tokens through CSS variables that can be reused through a style sheet and manipulated centrally to affect really broad changes throughout a site or a design system. And Webflow color swatches already use CSS variables under the hood, but they're limited to just colors. So today, to replace and really elevate swatches, we're introducing variables. [APPLAUSE]
This is a big evolution to the style primitives available in Webflow. I can't wait for you all to see it. bringing the ability to create design tokens far beyond colors to reusable values like size and topography and more. Best way to see it is to actually see it in practice. So let's jump to the demo.
[APPLAUSE] All right, here we have a, I don't know, pretty exciting site. It's kind of bland right now. It's a little wireframe-y. But to show you the power of variables, this site already has the beginnings of a design system set up in this new variables panel. So you can see things like border radius, color, topography, font size, spacing. And it's all set up in one place. And now in the style panel, you can now reference these variables in various parts of the designer. So here, we'll select the hero heading. And you can see already
that the font is inheriting from the heading variable. And we have a size here. Maybe I want to take the size, and I'll hit this button to get the font size from one of the variables.
Well, does that look-- let's see. Let me undo that and actually do something a little custom. I'll type in 4.5 rems. That looks awesome. So what I'm going to do is actually from the style panel, create a variable directly from this value. [APPLAUSE] So I'm going to hit this little plus icon here and name it XXL, and hit Save. And all of a sudden, I have in my variables panel this new variable setup that now is driving can be reused by other parts of the designer. So I'm going to show you what changing just a few variables can actually affect across your entire site. So I'm going to open the variables panel. And I'm going
to choose some of these colors and maybe make my primary color a little bit of the light green and then a more spicy green color. Let's see. I don't know. Maybe this teal here. I'm just playing around. And a darker green for the background. And let's see. What do we want to set for the heading? Times New Roman. Any votes? Lobster? Great vibes?
Ubuntu? Let's go for this one. And then for paragraph, we'll go for Inter. And I'll close this out. And all of a sudden, we have all of these things here. [APPLAUSE] And now you can see how if I go into, let's say, the heading color, I can also hit this little pencil icon here and change the value of that variable to see what the effect will be, just like you could with swatches, across the entire site. I'll go ahead and undo that. The cool thing is that the power of variables is also connected to Webflow interactions. So if I go to the interactions panel, I already have a-- I forgot to save out of that. If I go to the interactions panel,
I have this mouse movement in viewport set up that essentially takes the value of my primary color variable and gives me full control over what that variable becomes based on user interaction. Starting on this left side of the page, I might have my original color. But on the right side of the page, let's pick something really wild. Any votes for colors here? OK, deep pink. Stacy, I know you'll love this. All right.
OK, we're going to make it pink and then turn on live preview. And I have that variable changing directly in the canvas. And you can now-- by the way, in the variables panel, every variable, you can access it directly via a CSS variable. So I've copied that. And I have an SVG here, for example, that references some of these. So as I move my mouse, everything that references that variable pulls in from there. And that's just a really small taste of what that tiny, tiny primitive unlocks in Webflow. And just to show you what else is possible, we asked a few community members to put together a little bit of a demo for each of these.
And we had Leo and the Refocus team create this awesome interaction where, as you scroll, it changes the things like border radius, colors, et cetera. And their team also put together this awesome demo that affects font color, SVG composition, even WebGL elements based on the value of the variable. And of course, through the power of Webflow interactions, you can change the value of those variables and create really, really awesome experiences. [APPLAUSE] I know, right? OK. All right, the next one, this is really cool. Yuan, who won last year's Speed Build Challenge, created this awesome little playground. I'm not quite sure what its overall purpose is, other than pure joy and delight. And it's 100% built in Webflow. And all of these
colors are driven by various variable values. And you can change things like border radius, gap sizing. There's all of these possibilities that open up through the power of variables. And he went a little extra and actually created light mode and dark mode across all of these things.
[APPLAUSE] And even-- yeah. Really awesome, right? And this one is-- honestly, I hit the floor when I saw this. Yuan also created this awesome little playground for a playlist that, as you move the mouse, transitions variables that change the experience from his wife's playlist to his son's playlist.
[APPLAUSE] And it even has this cool little spinny interaction. 100% built in Webflow. How awesome is that? That just shows you the magic of variables. [APPLAUSE] So that's variables in Webflow. And it launches today. [APPLAUSE] But it's just the beginning for variables. Because over the coming months, we'll be expanding the types of variables you can create beyond color, size, and typography. So you'll be able to create variables for things like shadows, gradients, transitions, and far beyond. And more and more parts of the designer will support binding to
variables in places where you can manually enter styling values today. And similar to the demos I showed earlier that switch between different modes, like light mode and dark mode, we're also working on bringing that concept directly into the variables panel in the near future. So that's variables. [APPLAUSE] Next in styling design systems is something that we think will be a big improvement to those of you who frequently add custom CSS to bringing more styling power to your sites. Because right now, if you want to use CSS properties that don't exist in the style panel, you need to go into the custom code editor. Well,
we want to simplify this and make it much easier for you to harness more of the power behind CSS. And we're doing that with custom properties in the style panel. [APPLAUSE] So just like Webflow has allowed you to add custom attributes to any element on the canvas, we're working on making it possible to do the same with CSS properties. Let me show you how this works. All right, so here we have this website advertising space. Obviously, space is awesome. And it's not quite done. We want to spice it up a little bit and make it out of this world. You know?
All right, so we're going to make-- if I scroll down here, in the next few months, we'll make this section available in the style panel. So I'm going to choose, let's say, this vertical text div. And I have some horizontal text here that I want to be vertical. And of course, I can do something like a hack where I transform it 90 degrees. But what if we pull in a new CSS property that has a lot of browser support now called writing mode and vertical RL? Boom, we just made that text vertical. [APPLAUSE] All right, what if we wanted to change the-- you can already do something like create an underline for a span inside of a heading. But what if we wanted to change the color of this span here?
So what I can do now is-- actually, you know what I'll do? I'll go to the variables panel. And I'll take our accent color and copy it just to show you these things working together. And I'm going to add a new custom property, text decoration color, and paste that in. Here we go. We add that variable. And if I select this button, by the way, and I go change-- just like I showed you before, if I change this to something completely different, we're now seeing that variable pulled into native CSS classes and custom properties that are pulled in on this custom property. Awesome, right? We also have-- sometimes you get into really advanced builds where you want more control over mouse pointer events. So here, I have this decorative planet in the
background that I kind of want to get out of the way. So I can type in pointer events none. And we can move on to the next one. All right, now, if we go down here a little bit-- let's see. Check out this section here. I'm really excited about this CSS property. We have some text here and a round image that maybe we want the text to react differently to this image that's floated here. So let me show
you what that looks like. I can go to this image and type in shape outside, circle 50%. Boom. And now, we have this powerful CSS property driving what's happening on the canvas. All right, last but not least, if we go to this section here, we have this paragraph text. And if we go to our tablet breakpoint, you can see that it's quite small. And of course, I can go to every breakpoint and select a text value or a font size value that makes sense for that breakpoint. But what if I want to go into deeper and more custom CSS? So what I can do
here is type in font size. And you'll notice that Webflow shows you that any property that already exists in the style panel, it's going to move that value into the style tab. So I'm actually going to use a pretty advanced CSS function here called clamp. And this is in the same category of calc, et cetera. And clamp, what that allows me to do is set a minimum, a preferred, and a maximum font size across all breakpoints. So in my main breakpoint, I'm going to say,
I never want this paragraph text to be smaller than one rem. I would prefer it to be one em. And I would never want it to be larger than 1.5 rems. I'm going to hit Enter here and scroll back up here. And in the size area, we have this custom value that is now representing that custom value that we entered. And of course, when I go to my breakpoint, I can now see that that has a much better appearance across all breakpoints.
How awesome is that? [APPLAUSE] So that's custom properties in the style panel. It's a really convenient new low code option to define advanced CSS declarations with your existing Webflow classes, including linking values to the variables you have defined on your site. And we're working on making this available in the next few months. This feature will also help us identify the most common CSS properties and values used here so that we can get informed by what things we build natively in a no-code way in the style panel. So variables and custom properties enhance styling in Webflow.
But now, let's talk about structure and how to reuse elements and layouts across all of your pages on your Webflow sites, which brings us to components. We've been making a lot of improvements to components in order to help designers and teams create more cohesive UI kits and design systems to power larger and larger Webflow sites. And today, we have two updates around components. First, starting today, you'll see a new user experience that makes it easier to centrally manage all of your component properties in a dedicated panel. This means creating and binding properties is now much more streamlined. Whether you're building out new components for the first time or using existing components as instances on the canvas. You'll now see a more intentional and focused user experience when working with component properties. And the second big update to components is slots.
[APPLAUSE] Slots are placeholders within a component that give you significant flexibility by letting you add elements or even other components inside of a component instance. And the key difference with other component properties is that you don't need to specify what goes into a slot, like a text string or an image or a link. And instead, you can create a slot that can have all kinds of elements as children, which gives you a ton of flexibility. So let's see both of these together in action.
[APPLAUSE] Let's see. Here we have a tennis site that we're building. I promise it has nothing to do with breakpoints. I don't know if anyone's into that documentary. And-- sorry, one second here. All right, I'm going to have to wing it...or swing it. [LAUGHTER] All right, so here we have a ton of components on the site. We have a call to action component, a founder card, et cetera. And you can see now, when you select components,
we have this dedicated instance panel that can create all-- where you have full control over the values in that component. Of course, you have that complete control on the canvas as well. But if we double click into a component, we now have this new dedicated props panel that declares and clarifies all of the props that you want to pass into that component. So what we're going to do is actually create-- what we want to do for this component is to create an image that can now be set externally by those people who instantiating a component. So I'm going to go ahead and create an image and call it founder card.
And I'm going to select a default image here. Let's pick something generic just so we know that we'll need to replace it. And then in this component, I'm going to go and bind that image to the...Let's see. What did I miss up here? I call it founder card. See, I'm going to go back to the props panel and rename it. Founder image.
See, that's what happens when I don't have my brain screwed on right. Just kidding. All right. Let's see. I'm going to go into this card and click on the image and bind this to founder image. And now, when I go to my main page where I have instances of this component, I'm going to select this first one and double click on this image. And we'll
replace this with Luis here. And then we have another player named Precious that I'm going to set really quickly. And just to show you how fast this is, change something here and change the player name, et cetera. And you get the picture. I now have complete control over all the properties. There's no
distractions. You see everything that is you can pass as props to this component. All right, next up, let's look at slots. So if I go into this other section here, I have a call to action component that if I double click into, what I really want is the ability to say anything on this right part of the component. I want any kind of content. I want the people who are using this component later to have complete flexibility of what they put in there. One way to do that is to use a lot of complex visibility controls and put some Booleans into the component. But we want even more flexibility. So I'm going to go
to the Add panel here and drag in a slot. And I'm going to name this something like Right content. And now, when I'm on my canvas-- we'll use Quick Find here really quick-- I can add anything into here, like a paragraph. Or here, I'll add a rich text. And the best thing is that it's not just basic Webflow elements. I can go ahead and type in-- put a newsletter form in here. And in here,
I will put a whole new location slider. So I have complete control. I go into preview mode here. I have so much more flexibility over components in Webflow. All right. [APPLAUSE] So those are the updates to components. The new property management experience is available today. And slots will be landing in the next few months. With both variables and components, you can now see how we're taking the best practices established by developers and surfacing those superpowers to all of you to build powerful production websites in Webflow in more scalable and faster ways. But there's so much more that builds off of this. And for that, let's take a look at how
our partners and developers are extending Webflow to bring even more tools and even more power to help you build incredible sites faster. To start off this part, I'm going to hand it over to Alan, Webflow's chief technology officer. [APPLAUSE] Thanks, Vlad. Hi, everyone. How are we doing today? [CHEERING] I wasn't supposed to ask that question, but now I'm glad you responded. OK, when I first joined Webflow, I was so amazed by the strength of Webflow's entire ecosystem. I learned that there are over 100,000 freelancers and agencies that
utilize Webflow on a regular basis to create sites for the clients. We have over 1,000 certified experts taking on tens of thousands of paid client proposals a month, establishing Webflow as not just a product you use, but as a reliable source of leads and income. On top of that, there are thousands of templates in the template marketplace, and some template designers are making over $1 million a year. [CHEERING] Good amount of money.
[APPLAUSE] But what excited the engineer inside of me was the robustness of our developer ecosystem. We already have so many apps on the Webflow app marketplace. And today, I'm excited to share with you how we're greatly expanding Webflow's footprint and potential with incredible enhancements to our APIs. [CHEERING] [APPLAUSE] So let's start by acknowledging that truly impactful websites are deeply integrated with powerful tools that provide critical functionality and help businesses thrive. Things like your CRM system, marketing automation platforms, analytics, and so much more. Just over a month ago, we unveiled the next generation of Webflow apps in the Webflow marketplace. For those building and managing sites in Webflow,
this meant some really big and exciting changes. We greatly expanded the power of Webflow by bringing apps right into the designer. This new functionality unlocks powerful new ways for you to supercharge building in Webflow because now apps can add and edit site elements such as forms, images, and text right on the canvas. But not only did we make what an app can do more powerful, we made it easier and more delightful for your teams to connect to mission-critical tools used every single day.
And we launched with amazing new apps from partners like Unsplash, that lets you add any of Unsplash's over 5 million beautiful free images to your site. Finsweet Table by the amazing team at Finsweet. [APPLAUSE] Give it up for Finsweet. That lets you add semantic HTML table elements to your site by copying, pasting, or uploading a CSV. HubSpot, for marketers to seamlessly connect their existing Webflow forms to their HubSpot account. Jasper, there you go. For bringing on-brand
generative AI-driven copy and content right to your site. Member Stack, that lets you easily add secure and encrypted user authentication and Stripe checkout. And today, we have a few brand new additions to the marketplace we wanted to share. First up is Wized, a new app from Finsweet that lets you build complex web apps directly in Webflow. Next, we have the Better Shadows app, built by Diego, a longtime community member-- [APPLAUSE] That's right-- which lets users easily add realistic drop shadows to any element on a site. And finally, Lokalize, which lets customers seamlessly use Webflow's new localization alongside Lokalize's Translation Management System.
All right, give it up for them. [APPLAUSE] Those are just a few examples of what's now possible with Webflow apps. Go check out all the latest apps in the Webflow Marketplace. You can do that today at webflow.com/apps. These apps are all made possible with multiple types of Webflow APIs that we provide. So we've recently enhanced our REST APIs for accessing more of our core data models.
These let developers seamlessly integrate their products with more of Webflow's core features, like CMS, custom code, assets, pages, forms, and coming next month, support for localization. That's the solution we just launched. And a few weeks ago, we launched Designer APIs, giving developers the power of working directly with the DOM and the Webflow Designer canvas. This means elements, styles, pages, folders, all through the new Designer APIs. And starting today, we're adding Designer APIs for variables and components features, which are available right now. [APPLAUSE] Feels good to ship stuff.
All the documentation for these developer updates are available today. If you've been thinking about building a Webflow product integration, there has absolutely never been a better time. Developers have never had more power and flexibility when building on the Webflow platform. You can learn a lot more and get started at the brand new developers.webflow.com. At CTO, there are a few things more exciting to me than APIs. Because with APIs, they open up so many possibilities for innovation. And now, to show you a bit more of what's possible, I want to bring on the stage my friend and Webflow's co-founder, Bryant. [APPLAUSE]
[MUSIC PLAYING] Wow. So good to be back here. Thanks, Allan. All right. So we know designing and developing professional sites in Webflow doesn't happen in a silo. Often, your designs live in Figma, or they live in code, or often both. So let's talk about some big improvements we're making in these workflows.
Earlier this year, we launched the Figma to Webflow plugin, allowing designs in Figma to be quickly copied over into Webflow. Since then, there have been over 130,000 downloads. [APPLAUSE] And after getting a lot of great user feedback, we've continued to improve and develop the plugin to make it even easier to go from design to production faster. And powered by all the improvements across variables and components that you just saw in Webflow, we're releasing a new companion app. And this makes the sync process that much more seamless. So with this new app, not only can you sync Figma components and the variables they're linked to right into your Webflow site, you can review and accept these changes as well. And these changes will be updated onto your site. Who wants to see a demo? [APPLAUSE] All right. Let's see if I remember how to use a mouse.
All right. So over here, we have a furniture design website. And it's pretty bare. And that's because we haven't brought our Figma components in yet. So what you see here is three different components. But
these components actually have some children components within them. And this is the existing Figma to Webflow plugin. And for those that have used it already, you can select some elements. And you can go ahead and click Copy to Webflow. And you could Command-V, Control-V, paste it into your Webflow site. But we've added a
new tab. And we're calling it Design System Sync. And when I switch over to this tab, I can now fire up the companion app. So this companion app establishes a real-time connection over to your Figma project. And this is really cool. [APPLAUSE] So now you can see that I can sync this over to Webflow. And it actually shows
me what my current selection is. So this particular component has four variables in it. You can see some of those variables here in the Figma panel, accent one, colors. And I could actually go ahead and bring all of these over. And I'll press Sync
to Webflow. And what's happening here behind the scenes is that the Designer Extensions app has now brought all those components over. So I can go ahead and review these updates before I bring them in. So we'll show you a preview of your Figma components here. We'll show you the
connected variables that those components are using. And I could go ahead and import them. And as I'm importing them, it's bringing over all those variables, all those components, all those nested components. So Designer Extensions, these APIs are actually available to developers today. And these are the same APIs that we're using inside the Figma to Webflow app. So let's go ahead and bring this navbar in.
Boom. This is the same navbar that was designed in Figma. Let's bring in this button over here. All right. And I think I have one more. Let's bring in this card.
OK, nice. Let's duplicate that. All right. So let's see what happens when you make some changes in Figma. All right. So let's say we want to change this color over here. I want to make it a little bit more pink maybe.
And then there's this border radius. Let's change that to 100 to make this button round. And when I go ahead and select this-- actually, let's just bring this one over. And what I'm syncing it over, what I'm actually going to get here once this diffing completes, is I actually get a review, the actual CSS that changes. [APPLAUSE] See the background color changed, the border radius changed. And then, boom, when I click Accept, now my variables and that component is affected. [APPLAUSE]
All right. So that's the new Figma to Webflow experience. And that's landing in about a month. So we're not just working on making it easier to bring your designs to production in Webflow. Developers are a huge part of building the most sophisticated and powerful websites out there. Last year, we unveiled DevLink, a new capability that allowed you to export your Webflow-built components to your React environment.
Since launching DevLink to public beta earlier this year, we've seen an immediate impact on customers' execution time. Software developers like Jean at GitGuardian are able to use DevLink to build an entire single-page app to power their documentation hub in record time. Today, we'd like to give you a sneak peek about how we're evolving DevLink. So we've heard from many of you that it's been great to export components out.
But what if I have a React component built already, say in a design system that lives somewhere that I want to bring back into Webflow? I'm excited to share that we're adding exactly that. [APPLAUSE] Let's see how this works. [APPLAUSE] All right. So over here, we have a TED conference-style website. And over here, I'm actually going to Alt-Tab, Apple-Tab, over to my code environment. And this is a code environment that is very similar to what a React developer would set up. In this case, this is a Next.js app. And this is what a component looks like in code. So as you see,
we're actually calling some browser APIs. So these are browser APIs that you're not able to call natively or visually inside of Webflow. But what developers want to do to enhance this Webflow-built component-- by the way, this was actually built using DevLink.
And we exported it out. And a developer enriched it with this type of behavior. We're going to try to bring this back in. Here's a Twitter timeline component. And what we actually have is that we now have some APIs that give a React developer the ability to describe in code what type of properties exist on these components. So for example, this event locator has a property called results to designate how many results should be shown. This Twitter timeline component has two properties-- profile and theme-- that designate how this component should behave once we bring it into Webflow. So what we also have here is that we also have updated our command line app or tool.
And what this command line tool does is that you point it into your development directory. And after it looks at your manifest over here, it actually walks your component's dependency tree. It actually bundles it all up. And it puts it right into your Webflow site. So now if I go back to Webflow, if I go over to Layouts, I now see my React library in my Add tab.
Let's try to bring this one in. So this is the events locator one. And just to prove to you guys, this is real custom code. This is asking the browser's geolocation API. So I'll go ahead and allow it. And it's going to take some time. And while that happens, I'm going to go ahead and start styling this. And I could actually use some of the properties that are in the Style tab to control the styles here. So let's go Tahoma.
I can even change some of the colors here. And then just to show you the props, here are the props that we've built. So four, five. So now a visual designer can actually go in and preview how this all works right in Webflow. [APPLAUSE] All right, I got one more to show you.
Here's the Twitter component. And this is what typically an embed looks like in Webflow, where you actually have an embed script. And this is not obviously rendered in Webflow. But then here, I could actually go in. And this is actually rendering live from the Twitter API. So I could go ahead and adjust this height.
And here are some of the props that the developer actually set up. And I could go ahead and change some of these props. And these should update right there. [APPLAUSE] I'm really excited about this, because this is the first time that custom code can be brought into the Webflow designer. And we're actually rendering that right in the designer. So that's how we're evolving DevLink. And we're working hard to get into your hands as quickly as we can.
All right, so whether your design system source of truth is in Figma or in code, you can easily bring them into Webflow. To sum it all up, lots of new apps in the Webflow marketplace, new APIs for developers to extend Webflow's designer, a huge new update to the Figma to Webflow app to sync components and its variables, and updates coming to DevLink to pull React components directly into your Webflow designer canvas. And that's everything in integrations and extensibility in Webflow. [APPLAUSE] Next up, we're going to tell you more about how we're improving collaboration across Webflow. And for that, I'm going to hand things over to Linda, president and chief operating officer. [APPLAUSE]
Thanks, Bryant. Hey, everyone. Building for the web is inherently a team sport. And there's a lot more we want to do to continue supercharging how teams work together. Over the past year, we've been making significant advancements in how teams collaborate across Webflow. Our community is made up of teams of all sizes and configurations with a common goal of building powerful marketing sites with both speed and quality. And that involves a lot of different people coming together across different roles contributing along the way.
One of the key updates we launched was Guest Role, which improved how agencies and freelancers collaborate with their clients. Today, Guest Role is being used by tens of thousands of teams and is one of our community's most loved releases. Seeing your response to Guest Role gave us even more conviction to double down on better ways to collaborate in Webflow. Since then, we've shipped a ton of exciting updates that we want to make sure you don't miss.
First, I want to tell you about new modes and ways of working together. Comment mode enables anyone in your workspace to leave comments directly on your build in Webflow. This keeps your projects moving forward quickly by collecting all feedback within the context of your latest work. With this, we also released a designated commenter role. You can now invite other stakeholders into Webflow in a comment-only capacity so they can leave feedback without granting full access to design or publishing permissions. And best of all, the commenter role is free. [APPLAUSE]
This just launched a few weeks ago, and we were thrilled to hear the reaction from freelancers and agencies, their clients, and large teams alike. Our new edit mode empowers content editors like marketers, copywriters, or clients to quickly edit and publish content in Webflow in a simplified environment that doesn't affect designs or page structure. This brings the foundations of the original Webflow editor into the designer so content editors have access to new, more powerful functionality, like the ability to upload or organize assets, publish to staging before production, as well as improve performance and reliability. So while edit mode helps members of your team quickly add or update content on existing pages, we know that many of you are looking for ways to take this one step further and enable your teams to compose new pages in a safe, guided way using design or approved components. This is a big priority for us that we're actively working on and will have more to share early next year. Now, that brings me to the second area our team is focused on-- critical workflows to help larger teams ship quickly and with confidence.
First up, our new publishing workflows, which give larger teams even more safeguards by providing visibility into all proposed changes before publishing, and the ability to publish your site directly from staging to production. For customers like Launch by NTT Data, this update serves as a red flag check, enabling them to make sure that the changes that they intended to push are actually what's getting published. This can help calm their anxiety, especially with new or junior developers shipping mission-critical updates in production. Additionally, there's page branching, which we announced last year. It borrows
best practices from our partners in engineering. Multiple designers can work on different branches at the same time, allowing for fast iteration without the risk of colliding changes or publishing the site in error. Since then, it's been one of our most widely adopted features, and our enterprise customers love it. For the team at Dropbox Sign, page branching has been an overwhelmingly positive impact on productivity and has allowed for a more collaborative team effort in shipping site updates quickly. We're excited to share that we're taking this functionality to the next level with branch staging, which will allow teammates to test their branches on their own staging sites in parallel to reduce the risk of any issues being merged. [APPLAUSE] Additionally, we're working on approval workflows so teams can be confident that every change that gets merged to go live has been reviewed and approved. These are just some of the
ways we're focused on ensuring Web Pro provides the best experience for teams building for the web. That's everything in collaboration. So to help us summarize all of these changes and more, I'm going to pass it over to Emily, our director of community and agency marketing. [APPLAUSE] Thanks so much, Linda. So we announced a lot today, starting with a brand new look and feel across our platform and a handful of powerful updates and features rolling out today, like native spline integration, variables, updates to component properties, and of course, last but not least, localization, available today for enterprise and partners and next month for everyone. [APPLAUSE] And that's just what's available today. We have even more coming soon, starting
with three new APIs coming to Webflow , two of which you can play with today, one for variables and one for components. And of course, we have one coming for localization next month. We also have updates to DevLink, component slots. And not to mention, we'll be dropping our Figma to Webflow app next month as well. We've also got custom CSS properties. And finally, collaboration features like branch staging and approval workflows. But that's not all. While these unlock a ton of new capabilities for Webflow
, we have also been hard at work, shipping over 260 tiny but mighty improvements across all of our platform, from heavily investing and making speed and scale improvements, like 30xing the number of CMS items that you can use, and increasing static page limits by 5x. To updating and adding much needed functionality like quick find, additional keyboard shortcuts, and expanded CSS support. And starting today, I have another one for you. Aspect ratio is now available natively within the style panel. [APPLAUSE] This means that you can now constrain your images, videos, or elements to a given aspect ratio with a single input, saving a ton of time, especially for image and video heavy sites like Webflow University.
And the best part, you should expect this momentum to continue and truly accelerate as we get to this next chapter for Webflow. Now, Webflow Conf. You see, Webflow Conf wouldn't be the same without recognizing some of the things that make Webflow inherently special. So for this next section, I'm going to switch things
up a little bit. See, up until now, we've talked a ton about the product. But for many of you, myself included, Webflow is so much more than just a product. It's a way to bring your creativity to life. It's the backbone of many mission critical sites. And for some, it's a gateway into brand new careers, opportunities, and of course, community. You see, over the past 10 years, the things that have made Webflow so special and have helped to shape the product that you know and love today weren't just features. They
were the people who inspired them and those that helped to build them. And like most things, Webflow started out just as an idea. The idea that building for the web shouldn't have to be restricted to just those who knew how to code. And thus, was born our mission to bring development superpowers to everyone. But to get to everyone, the team needed to start somewhere close to home. And that meant starting
with a problem and a person that they knew they needed to solve for. And that was Sergie. [APPLAUSE] You see, Sergie represented the original customer for Webflow , a designer who had the vision, but wasn't empowered to bring that vision directly to production. And in the process of trying to untangle how to empower designers, they created the very first iteration of, you guessed it, Webflow. [APPLAUSE] Fast forward to today, there are now millions of Sergies. Designers and teams all over the world, building professional sites, and it needed the tools to give them the superpowers to make it all possible. And over the past decade,
the needs of those designers have evolved. But thankfully, so have we. We've seen the sites built in Webflow go from simple landing pages and MVPs to robust mission critical sites for brands like Orange Theory Fitness, Monday.com, Jasper, Phillips, The New York Times, IDEO, Dropbox, Discord, and many, many more. Not to mention, we've built programs to support the next generation of designers and developers, empowering startups around the world with the help of partners like Stripe Atlas, Accel, and Y Combinator, and breaking down barriers for students to learn new skills with hundreds of schools around the globe.
But this story isn't just about us. It's about you, the Webflow community. You see, the community is where Webflow comes to life. It's where we celebrate. It's the people who challenge us and those that have helped to partner with us to achieve the unachievable. It's about community members like Melissa, Sarkis, KC, Vincent, and JP, who've inspired not just our team, but countless others in the community through cloneables, templates, interactions, and more. It's about the tens of thousands of
you who've become freelancers, agencies, and designers, and have expanded your skill sets, built agencies, taken risks, and even made a living off the work that you create. And it's about the hundreds of thousands of you who've transformed how your company is built for the web, doing the impossible at so many iconic companies all around the globe. And not to mention, it's about partners like Member Stack, Relume, Nocodlytics, Slater, Jetboost, all of which who have even built and grown businesses on top of Webflow. And of course, it all wouldn't be possible without the millions of people who are connected to our mission and those that help to usher in the next generation of builders, people like Claudia, Josh, Colleen, Mason, and so many more than I literally would ever be able to fit on this slide, who truly make this community so special. It's stories and people like this that
remind us that we're not just building software, and we're not just building for us. We're empowering people to build. And even a decade in, the best is yet to come. So whether you're a designer, a developer, a marketer, CMO, founder, or somewhere in between, we are committed to making our product live up to the immense responsibility of supporting your projects now and well into the future. So before we come to a close, I want to thank every single one of you in the Webflow community. It's one thing to build and support a product like ours, and it's another to truly care. Your feedback,
your passion, and how you show up for each other is something that we don't take for granted. And while there's lots to reflect on as we look back on the first chapter of Webflow, this next chapter is even more driven by what you all build and how you drive the web forward. So to bring this all home, help me welcome back up to the stage, Vlad.
[APPLAUSE] Thank you so much, Emily. What about Emily's shoe game? I don't know if I can do better than that. I'm actually not going to end with any dad jokes, or one more thing, or anything like that, but I do want to end today by saying three things. First, I want to take a moment to thank the Webflow team for their incredible focus and really hard work, some of the most innovative, creative work I've ever seen. [APPLAUSE] Thank you so much, team. Second, thank you all so much for your energy and your excitement and for being part of this incredible community that we're so lucky to have. We look forward to sharing this stuff with you,
not only because we just use it ourselves every day, we obsess over it, but seeing how it lands with all of you as I'm showing it off is just such an incredible feeling. Thank you, thank you. [APPLAUSE] And finally, as big as Webflo
2023-10-09 15:59
