[Music] [Music] hello uh thank you all for joining us as part of this double feature about new Dev mode functionality uh we're going to take you through the new Dev mode workflow features and go deeper into how they work uh let's get started um to start us off I want to talk a little bit about zooming into the details and zooming back out to the bigger picture uh let's start zoomed out you've probably seen a diagram that looks like this explaining how a team should build products and this makes it look pretty simple uh you should just follow these steps and you'll end up with a great product in reality your process probably looks quite a bit more similar to this uh feels a lot more chaotic and you're kind of saying where'd that nice structure go um if you feel like this you're not alone we feel like this too however when you sort through all this chaos you can see that there's a few pieces that always exist no matter what steps you took to get here there comes a point in your process where you and your team have decided on something to build these steps show up every time and this is where handoff takes place handoff doesn't mean the exact same thing for every team but there's always a moment in time where you align something to build and developers start building this is a really key point in time after this point every single change to the designs needs to be clear and understandable to everybody involved it's also at this handoff moment where ready for Dev comes in you want to indicate that a specific design is ready to be built so you mark it ready for Dev but what happens next it's rare that that design is going to stay exactly the same throughout all of development what's the right way that you should use Dev mode to support this Loop of handoff changes building iterating before I get into those details let's jump back in time one year to talk a little bit about how we got to this point with Dev mode we've been busy since our open Beta launch one year ago after our launch we shipped hundreds of fast follow improvements and fixes based on feedback from all of you at the beginning of this year Dev mode came out of beta with new features like annotations measurements and an overhauled compare changes tool just two months ago we launched code Connect into beta um and stay tuned there's a talk coming up right after this to go deeper into that and that takes us to today as we were building features like annotations and measurements we kept hearing about handoff and how supporting a good handoff workflow between designer and developers can be hard so we wanted to dig in deeper and learn how Dev mode could help we talked to all different types of teams large small agile waterfly cooc distributed to make sure we understood what was actually Difficult about handoff all these different teams emphasized that changing designs really caused challenges if designs never changed handoff would be a lot more straightforward even for teams that were happy with how they ran their handoff they still weren't happy with their processes for dealing with changes that happened after handoff from our research we pulled out three truths about handoff inigma today the first truth is that designs are going to change no matter what type of team or process you have the second truth is that finding the specific design you've been handed off H can be hard um I'm sure you've tried to find some specific frame or section in a massive file can be really tough it's even tougher for your teammates often developers who spend a lot less time in figma and third was what you have easy access to while you're inspecting is really important it's not enough to know that that information exists somewhere in figma it needs to be access and visible without needing to hunt for it let's talk more about how each of these handoff truths impacted what we built for Dev mode going back to this first truth that designs are going to change uh changes aren't necessarily a bad thing there's a lot of good reasons for designs to change uh maybe you learned something during implementation like something was harder to build or easier to build than you originally anticipated maybe you've gotten feedback from stakeholders or from users something like user testing where you've learned that there are ways to improve usability or maybe you're just coordinating with other teams uh who are launching features or building things that impact the space that you're working in all of these are good important changes but even these good changes have consequences knowing that designs will change what would it look like for Dev mode to make those changes as painless as possible ideally Dev mode would do a few things first would be making it really clear when changes happen to a design that's been handed off it should be obvious that that design has changed without needing to dig deep to find that info second is understanding why the why the change happened having information right in figma about the intention behind the change why was that change made um sometimes changes are obvious but often there's important context that needs to be shared third is making it even easier to compare before and after changes compare changes the the tool can show you a detailed diff but it's not always obvious when you should open that tool or what you should be comparing if we made these types of improvements changing designs would be a lot less painful for both designers and developers working in figma the second truth is that finding designs can be quite hard figma is flexible and Powerful but it doesn't require you to organize in any particular way this is great before handoff as it's easy to quickly iterate and riff and try different Explorations without being constrained uh but when it comes time for the developer to find that one specific design that they need to build all this all these other designs across all these different pages can be confusing and distracting just getting to a specific design can be a major challenge especially for people who are less familiar with the the ins and outs of figma so what could demo do to make it easier to find the relevant designs uh first is giving developers a way to see only the designs that are ready for Dev even though today you can use ready for Dev to indicate frames or sections uh that are ready you still have to navigate across the canvas and across many pages to find where those designs are the second is more tools for finding within that set of ready for Dev designs exactly the design that you want if you're like us you probably have dozens of frames and sections that are marked ready for Dev after handoff tools to search or filter within that set of designs would definitely help speed things up especially for Developers and third is the ability to close the loop once designs have actually been implemented they still say ready for Dev uh until now there hasn't been a way to indicate that those designs that are ready for Dev have actually been completed Dev mode had these pieces of functionality go a long way towards improving the handoff and implementation experience the final handoff truth that was really clear from our research was that what's at hand what's right at your fingertips is is really important while you're inspecting there's a difference between information being available and being visible it's crucial to have this high priority information like what has changed obvious and visible to everyone we heard from developers that it was easy to get overwhelmed and distracted by other things on the canvas and that specific important pieces of information that they really needed were easy to miss how should Dev mode help solve these problems one way is giving developers a way to focus on a specific design when you're inspecting a a specific frame section all the other information on the canvas can get distracting with a way to focus on just that specific framer section and tune out all the other noise developers would have a much easier time inspecting and getting the information that they need another way that Dev mode could help is by surfacing important information even more prominently when you're inspecting there's so much information available to developers Dev mode should help developers focus on the most important aspects of inspection including change history without requiring you to have to dig in and search through a lot of other things to find it we took these learnings and we built some powerful new functionality into Dev mode to walk you through a live demo I'm going to hand it over to noga and Hugo thanks very much [Applause] Benson perfect thanks so much Benson um so by day obviously uh myself and noga uh are designer Advocate and engineering manager at figma but by night we Moonlight for a company called Epoch uh which is a platform a Marketplace for buying and selling 3D assets audio files for your next experiential uh experience so we've been working on a uh a feature to improve the library uh inside of our application and we've got to that point that Benson called out earlier that point between spec and and build uh where I'm starting to get these designs ready to hand over to NOA to think about the implementation so the first thing I'm going to do is I'm going to use Shifty on my keyboard to switch into Dev mode I tend to find this is easiest I but there's a bunch of different ways that you can obviously enter into Dev mode and I'm going to zoom in and I'm going to select um the measurement tool from down here and if you've been a bad designer like me and you've not used auto layout then this is a really great opportunity to call out certain measurements that might not be as abundantly clear to your developers on implementing so I'm going to draw a line from the top of this menu bar over to here and then I'm also going to do it out to the side and I've also got the opportunity to move these outside of the frame if there's maybe uh like an image as a background in some instances things to just sort of make that a little bit clearer when they when a developer comes in to inspect this design the other thing is I'm going to use The annotation feature which is really helpful for calling out uh certain aspects to do with properties that might require the developer to make a deeper level level selection inside of the design and this is really like a great opportunity uh to call those things out because even if something changes within the design between now and when we actually ship these things can update dynamically so the first thing I'm going to do is I'm going to select this layer and actually what I want to do is not select the input form that's here but actually select the layer above that and I can rightclick that on uh inside the layers uh inside the layers panel and I can click add annotation and what I want to call out specifically here is the fact that this has a max width and the reason for that is because we've had some discussions prior to this Handover about how some of the Reflow behavior is going to work between the mobile view and the desktop view over here and we want to make sure that that all assets section moves over to the right um once the viewport expands so I'm just going to also add in a little comment about that just to say uh Max width defined to help with Reflow then I'm going to click return and all of those things have now marked up now obviously this is just some smaller ones for the smaller uh details that we're adding for the purpose of this demonstration you'd probably add a bunch more to your screens um but this is kind of a starting point and I feel like this is now ready uh to hand over to NOA uh for development so I'm just going to select the arrow key at the bottom here select the frame and Mark this as ready for Dev now I can actually copy this link directly from the canvas by pressing command L and I can share that link and it will uh dive NOA directly in but because she's already been working with me on this file because design handoff is not a linear process uh noga will actually be receiving a notification to let her know that this has changed so I'll now hand over to noga to inspect the design thank you you go um as Hugo mentioned since I have a Dev mode seat and I've been already in this file before I just got a notification letting me know that Hugo marked something new uh as ready on the file I'm going to open open that file and then instead of searching for the designs all over the canvas I can go straight to the new ready for Dev view here I can see all the frames and sections that are ready to be worked on in one predictable view regardless of how Hugo set up his file by default this is sorted by recent activity so I can quickly go over and see what recently changed I can also see um different sorting options like sorting by Page or an Al etical order uh the ready for Dev view does not require a Dev mode seat so it's really useful to share a link to this space with your team and they can always land in it as a useful entry point for the file even if they don't have a Dev mode seat and one other thing I'll call out here is that we have our feedback button right here if you hit it it's going to uh open a feedback form where you can share your reactions and Impressions with from the new features with us um we're reading every comment that's submitted here and we're really looking forward to hearing from you uh going back uh real fast um I will now uh click on this first design right here that I see Hugo marked as ready just two minutes ago this will open it in Focus view Focus view shows me just the design I selected and it hides everything else on canvas so I can focus on just what I'm about to build here I can hover the designs to get all the information I need about the components that are being used and I can also click them to get the properties I need for building in the right hand panel looking at this design I noticed that there's a search bar here and this reminds me of a screen I implemented a few days ago to the same app where we had the search functionality and also a filtering option uh functionality I think we could fairly easily implement the same filtering functionality here and I think our our users will love it so I'm going to quickly go back to the ready for de view going to filter it by completed to see uh what I just marked as completed 3 days ago that was really easy to find and I'm going to copy a link to this filter uh component from here to share with youo I'm going to right click copy link to selection and then using the x button here I can can go back and uh go to the designs we were looking at before here I'm going to choose the comments tool mark this area whoops mark this area and tag Hugo uh with my suggestion so I'm going to say I think we can quickly add filtering here too like we did in browse and I'll even add the link to that compon component so he knows exactly what I'm talking about uh what do you think and let's see what you go thinks about my idea cool so back on my screen I can see that the notification has come through and this is a like a really good idea to be able to implement and I think this is this like back and forth between design and Engineering if there's these opportunities or like constraints some of these things don't appear until you're in that process of implementation so this these good ideas can come from anywhere and I think that you know the suggestion here from noo is great so in order to be able to implement that I'll just switch back into design mode um I'm actually going to go into the assets panel because I know where this component lives and I'm going to type in filter I'm going to scroll down I'm going to drag and drop this directly into my auto layout frame and this all adjusts accordingly now I've made that change but there's also been another change that has happened which hasn't been capture directly inside of figma and we recognize obviously that that's the case for a lot of teams there's a water cooler moment and I've had a conversation with Benson around how we might need to update some of the copy this section at the bottom says all assets but maybe we need a way to make this a little bit clearer to Define that you as a user looking at this view know that all the assets that are below this part are all ones that you've purchased so I'm going to select this text here and I'm going to update this to say your instead and put a little space and you'll notice that the indicator for ready for Dev up at the top here has now turned to Yellow if I hover over this you'll see that it says design has changed since it was marked as ready for Dev and if I select it it pops up this dialogue that asks me to be able to provide some context for the changes that I've made now I think this is the kind of thing that's really good for designers to take into consideration you know often times we will make Chang but maybe not be the best at communicating those things back and some things happen outside of figma that need to be communicated so I like to see this as a really great way to think about the business decisions that have happened so that this information can appear inside the versions inside a focus view so that any developer or anybody looking inside a focus view knows exactly what those junctures are so I'm just going to use like a bulleting for this I'll just say like uh added filters as this um this existed if I can type existed in browse uh based on a conversation with noga and uh copy change uh based on a conversation with Benson and noticed I don't really need to specify exactly what the copy change is because all of this will become apparent once noo inside of focus view so I'm going to say that I'm done with changes and I'm going to hand back to noga to be able to look at that implementation cool so it looks like Hugo made some updates to the design um and it actually looks like he's still here in the file so let's say hi hi Hugo um when viewing a frame and focus view as you can see uh what I see is the live version of the file so if Hugo was were making any live updates I would seen it here in real time when I have nothing selected in Focus view the right hand panel shows me the versions of this design if for some reason I don't want to see the live version but I want to work off of a previous version I can inspect it um by clicking the alpis right here and choosing inspect this version but this time I don't want to inspect an older version I do want to implement this version with the latest changes that Huga introduced and Huga left some really useful notes for me here about the context behind those changes but I'm going to hit compare to latest versions just to see the actual diff between those two versions and make sure I have everything captured so here I can see the diff both visually side by side and also encode and I can easily see that he added the filtering button just like I suggested and he also made this copy change which is great I can go ahead imp M those changes um and when I'm done I can go back to this file and Mark this design as completed using the button right here this will let Hugo and other teammates know that this has been implemented and here I want to call out that um developers even with just view permissions to the file can Mark things as completed so you can uh you don't have to give edit edit permissions for developers to be able to change that status um and now let's go back to the slides so you might be wondering is anything ever really completed and really we recognize that a full product itself is never actually complete a specific deliverable that we all aligned on and agreed should be shipped can definitely be completed and marking is as such in and figma closes the loop and lets your teammates know what's been implemented these new features all allow your team to spec build and ship while staying aligned let's reiterate what we've seen we've introduced a new home for everything that's ready for Devon a file this is a useful entry point for developers to land in find what they're looking for and see what recently changed we also have a new focused inspection experience Focus view hides other elements on the canvas so that developers can easily concentrate on just the selected design and get the information they need for building and finally then you changed and completed statuses help designers and developers stay in sync throughout the process now when a designer is making a last minute change they can notify the developer and leave notes the developer will get a slack notification they can compare changes to the previous version to see exactly what changed and know what they need to work on next all these features are now available on organization and Enterprise plans we've only been able to build these new workflows based on the feedback that you've given us so keep it coming we want to hear from you what's working what's not and what could be improved be sure to hammer that feedback button that you'll find in the ready for de VI which noga showed during the day demo all of this feedback goes directly to the to the team building it as she mentioned so please be kind and we want to continue the conversation directly with you we are really interested to hear how different teams are defining your own ready for death moment during handoff so please join the conversation with me over on X to share what you found to be most effective and why because if there's one thing that we want you to remember it's the change is good even during handoff you just have to find better ways to Signal it and we have a responsibility to find better ways to support you in that communication across design and development because ultimately when you zoom in it's the details that matter thank you thank you [Music]