Webflow Conf 2023 Keynote

Webflow Conf 2023 Keynote

Show Video

[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

Show Video

Other news