Office Hours: Dive into Branching

welcome to the uh branching office hour so if you're not familiar with office hours office hours is a time that uh the designer advocates as well as other uh fig mates from figma will come on and we will talk about a new feature uh sometimes do interviews with people that use figma at their organizations uh best practices and things like that and an opportunity for you to ask questions as well too so today we're going to be focused on branching go ahead and get started here a couple of just uh housekeeping things the session will be recorded and available on youtube.com figma design um this is the recordings usually come out about a week later there is a q a button you'll notice too as well so um the uh if you go down to your zoom menu you see that separate from the chat there's a separate thing called q a go ahead and click that and you can ask questions in there it's easier for us to follow the questions there than it is to follow the chat feel free to just talk away in the chat as well too if you're enjoying that make sure that if you're using the chat you have it set to panelists and attendees we do love hearing from you but it's also great if everyone else can hear you too and lastly we do have a code of conduct please be kind uh we absolutely love the community that we have and we want to keep it that way and it's everyone's responsibility to make sure that we can do that so please be respectful of our code of and conduct that let's go ahead and get started um i am anthony dipezio one of our designer advocates i'm joined here with chad chad you want to say hi hello everyone thank you for joining us this morning my name is chad bergman and i am also one of our designer advocates here at figma and excited to share a bit more about branching with you today yeah and we've also got a few people from our few figmates from the team with us today um i'm going to let them uh just say a quick hello each so uh shayna you want to kick us off yeah hi i'm shayna i'm a designer at figma i work on branching and also design systems features here kiko go ahead yeah sure um my name is kiko and i'm a software engineer here at figma i'm one of the engineers who work on the branching feature and i also work on the other collaboration features um like comments another communication tool or figma awesome and oscar yeah hi everyone i'm oscar i'm a product designer on the signal team um i've been doing a little bit of work on the branching project together with shaina um last couple of months and it's been yeah super interesting that's great thank you and we're really happy to have the three of you on today uh these are the real folks that actually uh built the stuff and really know it inside and out so but we're going to kick off today with just talking a little bit about branching emerging and getting some uh some some more information from the team too as well so a couple more things just to keep in mind this will be a great session for for learning but if you want to go through the basics and have something to refer back to there's a help center article on branching and merging there's also we have an intro blog post that sort of explains a little bit about uh the feature why we built it and things like that as well so you can definitely uh check those out oh yep and we are not in the interactive components beta so thank you very much for that we'll go ahead and fix that too as well this is a branching if you can tell thank you chad see chad's already in there taking care of it a little behind the scenes um if you can tell the last one that we had was our big interactive components data as well so branching beta perfect now let's go ahead and start talking about branching um i'm actually gonna go ahead and just stop sharing for a minute so we can just have a little bit of a conversation here too um i think one of the things that we want to start with first is just um what is branching and oscar i kind of i want to kick it off to you and just sort of ask you know in your mind what is branching what's the concept right so essentially i think i think of it as like a new way to collaborate in figma um we all know like multiplayer and like being in the same document and working like that as a way of collaborating uh but branching is a bit more structured uh because you can take a file uh split it out into a branch uh work in this uh like a separate branch a separate from the main file um but then also kind of bring your work back again into the main file so it's like a like a new way of collaborating and working with with files in figma that's kind of um goes kind of beyond multiplayer and that's a bit more structure right right and i think you know it's it's interesting because multiplayer itself is already handling a lot of you know i think of branching in the sense of there are other tools out there that have done branching before other design tools that do it too as well um and a lot of our multiplayer experience already can handle a fair amount of that sort of how do people work together you know we don't actually need full uh branching emerging for every single little change because when you're working together you can actually the multiplayer experience itself takes care of a lot of that just by being live and in the file together as well this concept also goes goes further back uh shayna i don't know um you know where did you want to speak a little bit to like sort of where branching originates and where that comes from yeah so it's it's definitely been a paradigm that's been around a while in the engineering world and so for anyone familiar with like git or subversion um like there's a long history there of like developers needing to work on projects together um and being able to distribute that work and also to make changes in a really controlled way and so like pretty much every engineering team will use some form of branching in order to like make their changes and then merge them back in and make sure that everything works nicely together and we've basically heard that like as design teams become more mature and do like complex work of maintaining design systems and maintaining like files that you need to be absolutely the source of truth um designers also want that kind of control so it's something that we're we're lucky to be able to pull from kind of like this long history of how engineering has done branching and figure out how we can bring that to a designer's workflow and make it something approachable for designers too as well yeah definitely uh yeah uh kiko and i want to ask you so um you know there is ideas of branching and merging as far as how they can work it seems like with figma we've done some stuff to actually just make sure it works well within figma i mean can you speak to that at all as far as like how we approach that yeah definitely um obviously all branching files still have multiplayer so you can still collaborate with other people on the branches and they definitely still have version history so you can always go back to a previous version on branch file and also the main file and obviously all the figma features still exist on both main files and branches right so you can still even do your real-time collaboration in the branch and then bring back in the main file doing more real-time collaboration there as well real-time collaboration everywhere um shayna i you mentioned a little bit more about um good use cases for for design systems can you can you explain a little bit more on that too yeah so i think like design systems are a case where you usually have like a core team that's maintaining all these components um they have to be like designed in a special way to make sure that they work well across your organization um but sometimes you actually want the rest of your team to be able to contribute in some ways or suggest changes and so like what we've heard from a lot of customers is like they want the small core team to be able to kind of like maintain this main file um but like with branching as we've introduced it in figma like you don't have to have edit access to the main file to actually like make a branch and suggest changes so that means like any contributing designer can make a branch like maybe fix some components to work better for their use case and then they can submit it for review and then the people who actually maintain the design system can like decide to accept that change and so we've seen that this will be like basically a way to give that core design systems team a lot more control over their system and make sure that it's designed the way it should be yeah yeah it's awesome and definitely something we've heard from some of our larger teams too as well doing really really complex design systems and distributed design systems as well um i want to uh to the product designers i wanted to sort of ask a question to both of you and oscar maybe we'll start with you just around when you were designing this experience um designing this feature what were either some of the considerations um that you were thinking about anything that was fun or challenging yeah yeah for sure yeah so as i mentioned i'm pretty new on the team uh so i'm excited what shane has to say too but um for me a few things that's been really interesting about this type of product problem is um i mean as shayna mentioned the type of um this type of workflow has kind of kind of coming from the development world world in many cases um and a lot of like the language like terminology and kind of ideas are coming from there and and translating those might be a bit tricky because um for example some of the wording is kind of probably a bit unfamiliar to many like like what what's a conflict uh like we should talk about it for example um things like that um merging conflicts branches like there's a lot of terminology um and then it's a question of like should we um uh kind of stick with that and kind of keep it consistent with the development world or should we kind of introduce something new and kind of make it a bit more kind of fitting to to like the designer world or like figma um so questions like that uh super interesting uh but also like um i mean we're talking about design systems a lot but this can be used for many different things and just thinking of like the kind of infinite amounts of like collaborative kind of um ways it can be used this is pretty interesting because every team kind of works slightly differently uh even though we're really focusing on design systems yeah yeah and we're going to look at a few of those examples in just a minute too as well um shane anything to add yeah i think with branching um we've tried to like bring it into this like designer's workflow in a way that is like fairly simplified but still powerful um so you'll see that it's like like you don't need to like make commits in order to basically see their work although like um i know some people kind of prefer a lot more structured working style and so we're starting out with kind of like this easy way of like you're already working in sigma sigma will already save your work um and when you like make all your changes and you're ready to merge them back in you can go ahead and do that and like review that um branches are kind of automatically archived as you merge them in because we're kind of assuming that like every branch you make is to improve your main file and like make the status your main file up to date and so um it's definitely been an interesting challenge of kind of like taking what can be a really complex system of workflow and like bring it into figma and figure out how it fits into the rest of figma and like the general workflows we have today yeah kind of like our flavor of branching and how we see it working well with figma's design process too yeah awesome and then one last question kika i do want to kick it over to you as someone who got to work on the development side of things um and probably coming from a fair amount of understanding of branching and get workflows already in your own day-to-day work um what was it like for for you to work on the development any anything fun challenging or exciting yeah for sure i think branching is definitely one of the most interesting technical challenge that i work on i think for code if you think about it it's a lot easier to compare if something has changed because it's text based right so you can just compare them line by line and it's really easy to know if you have changed that line of code but it's actually a lot more complex and challenging when it comes to a design file so throughout the process the team has come up with a few really creative ways to do that and it was definitely a really fun technical challenge and also because of this size file format different dimension um a design file versus a text based file um there's also a lot challenging problems when it comes to like performance like how do we make sure it's fast when we compare the changes and stuff like that right right yeah and we're gonna look at a few of those examples we we're gonna look at differing we're gonna look at branching we'll talk a bit more about it and i think that this is a great time for us to go ahead and get into the file and actually start looking at some stuff right now um so i'm gonna go ahead and pass it over to uh chad to get started and uh chad i'll let you take it away and and go from there all right awesome thank you anthony and so we've talked a little bit about branching already and just to show the basic form of branching here in figma you know let's just take a quick look at how to actually create a branch so here on canvas you know we have a frame with a couple of shapes in here and let's say that we want to do some exploration we can go up here and we can say create a branch and let's just say we're going to add a frame so as i create this branch you can see that it's telling me i'm now working in my ad frame branch and i can come in here i can add in another frame perhaps i just want to add another shape in here now let's say i want to also add another shape up into this side and let's go green on this one here so i've now done work within this branch and if i go back out to my files here and i come back into my main you can see that it has been unaffected so i still have a clean main source of truth here and i can quickly come over here and open my branch and i have all of my work that i had completed here now if i want to say great this looks good let's merge it in i can come right up here and i can review and merge changes and it's going to check for any changes and it's going to say here i have added a frame and i've also edited an existing frame by adding a new shape into it here so i can click again i might have not placed those shapes inside that frame originally sorry about that but we've got a new frame there as well so those other shapes yes that's uh we do it live and so here we can see there was nothing here before yeah here if we had those other shapes we could do an overlay here as well and see what was there previously versus what is there now and then we can hit merge if it all looks good and we notice that that branch has now been archived and our main source of truth now has that new frame in here yeah it's awesome so branching is i you know for i saw a question come through around like what exactly does it mean it's literally you are branching you're creating like a tree branch off of your file so if you think of the trunk of the tree as like the the main file itself the branches are going to give us experiences where we can we can branch off there do other things in that version and then as chad just showed actually then merge those changes back into the main flow of the file as well too yes so now that's the just the basic portion but let's take a look at some of the use cases where branching can really be beneficial for teams so you know we talked briefly in the introduction about design systems and you know let's say that this is a published asset library you know we don't really want to be making changes in the main published piece perhaps you have documentation inside of your file you know folks are coming in maybe they're referencing documentation or maybe they're using it as a sticker sheet and they're taking the component instances out you don't want to be updating it and confusing people on what is truly ready for production use versus what's still in an exploratory phase so let's say that we are going to take a look at our buttons and maybe we want to do a different shape or color or change the type so we can go again and create a branch and one thing i always like to recommend with branching is think about different workflows that you may have with your development team you know maybe you use ticketing or maybe you use different types of labels to really describe what type of work is being done in the branch um so i usually like to prefix my branch names and say let's say i had a ticket that was like five one four one it's a ux ticket and i am going to explore button shape so this might be something coming from like a project management tool jira sauna or something like that exactly so i can go in i can create my branch and now i'm free to work in right here in my branch so let's say we want to go try some pill buttons you know maybe we want to come in here and say uh i want to use some blue buttons beautiful i had a little uh i had a little piece there so let's just leave our colors for now and maybe i just want this to be bold instead just add a little bit more weight on to my button label here and i think that this looks good you know i think that we've gone you know maybe i want to test this i can share and i can get a link directly to this branch and share that out to get feedback we'll talk a little bit more about that here as we go on but for the sake of this let's say we've gone through and we're ready to merge this change in once again we can go and review our changes and we can see the button has been edited and it impacts the different variants by changing the one and i can say yes that looks good and then once i merge my change in it's now there and if i look at my assets here you'll notice that my button is now changed in the assets panel as well if i had this library published i could now do a publish and then everyone would be prompted for the update for this button right so previously flows where you might have been putting um you know you've got new components maybe you're putting them on another page maybe you're trying to do naming conventions where you're saying this is you know this is in testing or or this is uh something we're working out um or or maybe you are actually using the uh period or underscore at the beginning of the name trick to actually hide it from getting published until you're absolutely ready you can now just use a branch to actually handle a lot of that as well yeah one important note here i think would be that you won't be able to publish from the branch so you won't be able to fork your actual published team libraries the team library will always come from what's in the main branch and what is currently published so the branching is great for exploration proposals ideas things like that but you'll want to make sure that you put them back into the main branch when you're ready to uh sorry into the main the main file when you're ready to uh publish again as well absolutely you know and another area where this is really beneficial in the design system use case is really about um a contribution model and you know for folks who maintain a design system and those who consume it we also talked a little bit about some of the use cases earlier where you know contributions maybe there is something that works better in a use case for a product team and you don't necessarily always want to open up your design library to everyone in the organization to be able to edit it so what we're going to show here anthony let's say anthony has a ticket and he wants to increase the font size on the button because he wants the lines to be more legible now anthony is not actually an editor on our file you can see he's only a viewer but he does have editor access in the organization because he's he's another designer and he has product features he works on but he'd like to make a recommendation to do a design system update so i'm going to stop sharing here and let anthony show a little bit of what that workflow looks like definitely i'm gonna go ahead and take over here on my end i'm gonna say share screen great there we go get out of this awesome so um yeah so so picking up from from from that point right there you'll notice that i'm in the same file as uh as chad but i'm actually just a viewer in the file so i saw a couple good questions just around who has access to work on branches create branches and things like that you've got to be an editor in your organization to use branching so so again designers and things like that if you're just a viewer role you're gonna you'll need to be an editor to actually use them but if you're just a viewer on a file we actually give you a little bit more control and you can actually create your own branches on a file where you're just a viewer uh where you only have view permissions so what i mean by that as you can see it says i'm view only here but uh let's say i'm not on the design systems team right i'm just a designer and i have a proposal maybe i was using these uh buttons or uh you know maybe i did get a ticket where i'm supposed to come in and change something in the design system but i'm not one of the owners of the design system or i have a good idea of how this component can be more expressive you know maybe i want to i want to go in and change something in the base component maybe add in a place for an icon or something like that that's something that i want to that i want to change i can actually so i can't edit the the main file but i can actually create my own branches so i could come in here and again i might have a ticket name or something like like chad was showing where how you can uh have match your match your different systems together by using consistent naming conventions making it easier for everyone if they see your branch and they see a ticket with the matching name or if they or if a developer has a branch with a matching name you know you can do those types of things as well to have a better coordination with with your different uh your your different counterparts on your product teams let's go ahead and for now i'll just say this is uh i'm gonna i'm gonna actually do uh we'll keep this uh i'm gonna do something like feet update button i used to do a lot of development so i get in the habit of doing uh sort of like camel case lowercase kabob case kind of writing things if you want to though and if you're working with a small team it's totally fine to do you know however you want to write these anthony's awesome button something like that too as well right so you can really use branch names for how it's going to make most sense for your teams um for the segment i'm going to go with feet awesome button there we go cool if you do enough development you sort of get in the habit of not using spaces and file names and things like that and only using capital letters when you when you're doing camel casing um you'll see here so i'm now in that branch again right so i'm in my branch i have edit access to my branch but i don't have that access to the main file so if i were to go back to the main file um you'll see that i'm still a viewer over there but here i've actually got all of my editor controls that i need so i can go ahead and i can update these things however i want i think we said we wanted to bump up the font size a little bit so i can go ahead and do that go to our base component bump that up oh we got a nice auto layout kicking in too beautiful a little more space between these here we go use our smart selection tool awesome uh so now i've made some changes in my branch in fact you know what let's go ahead and actually i'm going to add a new component here too as well so i'm going to disconnect this recreate this as a new button um just so that we have a little bit of a a different component here too as well so i've gone ahead and i've made some changes and i'm going to call this you know maybe maybe i'm going a little bit rogue as a designer i'm just calling this anthony's awesome button there's a good chance i may not want to be like merging these types of things in uh automatically um in the sense that i might need to get review from someone who works on the design team right so one great way that you can do this is that we mentioned earlier that all of the features from figma work in a branch just like it's another almost like another file but it's actually just a branch on this file so everything from from multiplayer mode but also things like commenting as well so i can go ahead and i can actually leave a comment back to someone on the design systems team you know i can say something like hey chad you know i need you to um can i can i get a can i get a review on this and post that chat will get notified he'll be able to he'll get the the same notifications from normal comment system he'll be able to come into the branch um oftentimes i find that we see with larger design systems teams that they'll generally have a regular cadence to these types of reviews meaning that you you know every other week maybe once a month something like that you'll have a session where you actually sit down together and you'll talk about your changes maybe you'll re-audit your design system for the next batch of changes things like that sort of working in like a sprint pattern for how you make changes to your design systems so you can see here chad has actually came into the branch so here we can do multiplayer in our branches just like we're in a normal file as well so he can come in he can review this maybe give me some feedback and says uh oh what's the use case yeah okay so maybe i went a little bit rogue as a designer and i shouldn't be having anthony's awesome button so we might go in and do some reviews and things like that as well but i at least bumped up the font size and and so hopefully i can get like it looks good to me on that and then um chad would actually have the ability to go in and merge this you see as a viewer on the file even though i can edit my own branch i can't actually merge those changes back in because i'm not the owner of the main file or i'm not sorry i'm not an editor on the main file um so i don't have that access but tag could go ahead and do that um for the sake of this one chat maybe if you just want to bump me up to editor role so i can go ahead and go through that process again real quick yeah absolutely there you are great okay so i should be an editor now on the file let's go ahead and reload this cool review and marriage changes so now that i'm an editor on the main file i can also merge the branches in as well so i'm going to go to that review changes dialog that we're looking at here it's doing a quick check for for conflicts and any of the other changes that i've made here as well we'll just let this finish cool so we can see here that i've added my my new button i've changed some i actually did not i changed something about the bass button so we have that here as well too but you can see here i've actually got some of our design system changes um again it's showing me if i have things like variants and if i have things like um components styles or anything like that you're going to get a nice readout of exactly what was affected so you'll know that if you did a change that has um sort of like a sweeping um you know a drastic change to a lot of different components you're going to be able to see that very quickly and identify it so if you accidentally made a change and it says this is a change to 600 components and you weren't expecting that you can catch that before you actually need to merge those changes back into as well again we can use that cool overlay technique you can see how much i sort of just increased the font size and i also increased the size of the frame over here as well so we can look at a side-by-side comparison of what changed we can also use that 50 50 mode again this is for this example it may not be as useful but we're going to show a couple more where that's pretty powerful um as we go through it here as well happy with the changes i can merge those changes back in and now i've got those changes back in my design system file here um i messed with the base component a minute ago so uh that's why you're not seeing it here but that's how we get it back into the file with that let's go ahead and look at a couple of the other use cases here that we have as well too so um we're looking at design systems but again as oscar mentioned in the beginning here there's a ton of use cases beyond just design systems too right so um maybe we want to be branching on actual features on actual design files that we're working on not just our components and our styles and things like that but the actual designs we want to branch not because we're changing the component but because we have new ideas or we want to do some testing or we want to do anything like that so let's look at a couple of those cool examples here um first one that i want to show here is um looking at a little bit of a b testing as well too right so let's say you have something like um maybe we want to do some a little bit of a growth experiment right we're trying to track how this how this text is doing are we getting people to actually click this banner ad and uh get some additional orders that are going through and things like that so we weren't doing a little bit of a growth experiment that we want to validate previously and and you can still do this when you're experimenting with your designs is you know you might make a couple extra frames um you might um you know change some colors and doing things like that directly in the main file but it gets a little bit harder to prototype and to test and do things like that because we're all on the same page or we've got to create multiple pages and then we've got to keep track of all that kind of stuff so branching can actually really help with these types of situations where what we can do is instead of creating additional frames here i'm just going to go ahead and create a branch and we'll just call this uh a b test a b test on banner and i should probably you know say which test this is right you know like the new test you could do date systems you know again so far these naming conventions things that are really going to help you identify which branch is which um just general best practices there as well we very similar to how you're doing things like naming pages so um again we always use things like emoji conventions or or just very descriptive names as to what it is that you're trying to to create here um we're going to call this we're going to bump this up to 50 off cool so we're going to create this branch we now have that branch and i want to test out some maybe testing so we're going to not only change the price here but we're also going to make this a little bit more visible we'll go for a nice sort of darker make sure that we're still hitting our accessibility contrast levels so we've got something like this and again i'm in the branch and now here's where it's a little bit different i'm not going i'm not going to immediately merge this branch in or anything like that because we want to do some testing with this and what's cool is that every branch has its own prototype link as well so if we open up a couple of different things here i'll put these side by side so you can see them go back to our main file here i now have our main file which has its own prototyping link which i can open up and i have our a b test that we're doing here or our b test and you can see that each of these have a unique url so i can actually have two prototyping links for each one of these i can test out these experiences i can see what we're doing here again this is a rather small example of a type of experiment and this might be something that you can even just do straight in code but you sort of see where you can take this with if you want to do more complicated flows or more complicated changes maybe you've got something like a landing page or a different experience for how somebody maybe scrolls through a collection or something like that and you can use these links independently they're each going to have their own url and they're each going to have their own sort of ability to share out to individuals as well here too when your test is successful you can go ahead and merge that back in um before i do that um chad anyone just want to make sure that if there was anything else on the growth experiment stuff there chad i know you had some thoughts on this one i think but uh i might have covered it for you so yeah you know one thing that i like um to say with this one is you know perhaps you're running multiple tests early on in the design process to narrow down what is going to be like a true built out production a b test so you may have four or five different screens and scenarios and ultimately you're going to want to take whichever one is the most performant that you move forward with and merge that one to become your new main so you know previously i've seen folks do it where they might use different pages and do different prototypes but then you have all of those excess pages or there's not an easy way to archive them to come back to later so the nice thing with using branches is you can still keep track of those previous explorations that were done and archive the ones that you're not going to move forward with and they'll still be there for reference later yeah yeah great point great point in fact we could even look at this review you know maybe we're reviewing our changes here this might be a fun one where you can actually sort of see the difference between the overlay as far as what's changing between the two um also what's great is in the side by side you'll notice down here we actually get some pretty detailed pretty granular change details as far as what's text has changed which uh the fill style and the rectangle that i changed as well so you can actually um as as shaina and ankiko both mentioned earlier you know sometimes it can be really hard visual diffing can be a little bit harder to sort of interpret what has changed whereas with line by line to thing for for code systems that can sometimes be a little bit easier to sort of see the differences here we can actually get a written understanding of that information as well too so we can actually look at them together i do love the behavior too as well where both of the panes will move simultaneously so if you want to just compare two parts of the same design you can just very quickly go go down here and check that out as well uh yeah and so to chad's point here too let's say this was actually not one of our tests that we thought was successful it was too aggressive didn't work people people were turned off by the red or something like that we can actually go up to the top here and editors on the file similar to being able to review and merge have a few additional options that they can do they can decide to duplicate the branch as a new file they can rename the branch and they can also archive if you archive without merging that's basically just going to archive the branch so that it goes into a special archive let's go ahead and just run the archive on that one where you can see we're back now in the main file in fact i'm in the main file twice there we go um and if we go up to see all branches this is where you can see all the branches that you have we currently don't have any active branches i can see branches that are uh mine which i currently don't have interactive as well but we can look at all of our archived branches and again there's two ways that a branch is going to get archived either you just archived it without merging or these green ones here that are tagged with merged meaning that they were merged in and then it gets automatically archived because it was merged back to the main file so this is a great way to i mean there's a lot of things that we can do with this archive here too as well as far as just using this as a place to reference those earlier ideas for ones that we either decided to put back in our main file or maybe ones that we didn't just ones that we wanted to merge what we wanted to to come back and take a look at and you can still restore from those restore those branches here as well too you can also permanently delete them if this gets very cluttered and you're trying to keep your archive clean for any reason probably a good case would be something like a design system you might want to keep your non-merged branches trim those trim those branches a little bit so you can go prune them i guess you can come back in here and do that as well one other test to show would be let's look at something like because we have the um because we have the uh other prototyping links as well we can use that same technique of something like an a b test also with testing things like prototyping flows and whatnot so again some similar concept but um you don't have to be limited to just a small single experience of a one to two change or something like that you can have an entirely different flow with lots of frames you could even have things on multiple pages if the two if the two were not part of the same flow um because remember when you create a new branch you actually get the branch has all of your pages in it as well so it branches at the file level which is really important um you're not just branching on that one page so if you do have your multiple flows broken up into different pages right you've got maybe a home page test you've also got a user test that you want to have a different version of um you could come in create a branch for that so let's say we want to have a different flow than our normal flow because we want to test some new things so we're going to say new checkout flow create a branch here and now i want to update my flow maybe i've got some new screens i'm adding in or i have i have something about the the shopping cart experience that i want to change you know maybe we want to actually have the shipping details come before and just trying to optimize our flows and we want to be doing some testing uh in this branch again i can use those prototyping links i can test these branches and because we have all of the features of figma here as well i can even do things like remote user testing right i can actually use observation mode to follow someone around in the prototype with the new app that we have the new figma app you can now send someone a link to the prototype on their phone that they can then run through you can observe them on the desktop as they're doing that and then leave comments for yourself too you know you could say you know user struggled here or something like that you know as you're going through it i probably want them to be more descriptive than that but just as a quick example and again we're going to have all of those features so you're going to get those comments in your branch and you'll be able to actually um sort of isolate that experience and all of that feedback that was for that one particular experiment into that branch as well when you go to archive that or when you go to merge that branch those comments will get archived with that branch as well so it's not going to merge those comments back into the main file it's going to keep them with the branch in your archive so if you do need to get back to them you can just go to the archive you can open the branch you could restore the branch to as well if you needed to awesome see we've got a ton of questions coming through i i'll pause there if anyone else had anything that they wanted to add to that but um chad i don't know if you wanted to or or i guess i can go through um why don't i go through the uh um some of the advanced use cases here i think we actually maybe covered a fair amount of this stuff as far as um let's look at um how we can actually what happens when someone's actually updating the main file as well too right so everything that we've been looking at here has been working very smoothly because no one's actually been editing our main file right there haven't been any changes to the main file so you picture the tree right when we branched the tree didn't keep growing but what happens if the tree keeps growing while you're out on your branch um let's go ahead and take a quick look at that so i'm gonna go ahead and open up a branch here or actually i'll just stay in this new checkout branch that i have and chad why don't you go ahead and make a change to the main file yeah let me jump in here so if i'm in the mail yeah and let's say that you know we're back to exploring the banner again and we decided that the 50 did work in a subsequent test and it was just being blue so i've made some changes in the main file there and say that this all looks good to me cool so when chad did that you'll notice that we actually have something new up here at the top we're saying hey there are updates available for this branch meaning that there are updates from the main file do you want to merge those in because what we can do is we can actually take our our branch that we had going off the side and we can say yeah let's go ahead and take those changes that we had in maine and move our branch up to where the tree is currently growing right now so that we have all the new updates that came from the main file good example might be that another designer was working on a branch and that branch got merged back into the file while you you were still working on yours this allows you a simple process to avoid having to deal with lots of complicated merge conflicts there is a way to handle merge conflicts if you do happen to edit the exact same thing um but again with the granularity that we have in the multiplayer experience and the way that the branching works um unless you're touching the exact same object you're not going to have to do a merge conflict resolution but here we can just go ahead and accept these updates from main i can see the things that that chad actually changed over here as well and i can say update from main i will get those changes in and i can say apply changes and i can now actually see that new banner that that chad has here in the file so um i my branch now has is up to date with what was in the main file so when i go to merge my changes in i don't have to worry that i'm accidentally going to uh mess with something that had been changed after i started my branch yeah anthony i think another thing would be great for us to show here is you know we've shown a lot about when we are in the file and seeing the branches but there's a great question about you know what happens if we're at the file browser can we see if a particular file has branches on it great question and uh you can see here back out at the file level any file that has branches on it you can actually see there's a little drop down menu right here so you can either double click uh on the file and go directly to the to the to the main file you can also go straight to a branch from the file browser as well so if you go to the drop down you can select that um you can switch which one is being visualized uh in the file browser experience and then you can open that file uh directly here as well meaning that you could you can set different you know if you had enough content change you can actually use that thumbnail as you're looking at the different branches to see which one it was so you know i might say oh yeah my new checkout flow okay that's right i know that one looked a little bit different than my other one so you can come back into your file and edit that as well very cool um awesome yeah i i think uh i think we've covered most of the stuff i'd love to get get to some of the questions that we have that are coming through here so um seeing as if we have a hundred hundred so questions that have already been answered um i wanna make sure that we can cover uh a couple of other good ones that we saw here so thank you for everyone who was asking questions i know i know that most of them um do we have any one that came through earlier that i think would be a really fun one would be is there a way to give descriptions to your branches i mean i i'll ask maybe uh oscar shaina akika if there was any consideration to that like what if you could like give a name to your branch or not yeah that is in the works um so we're currently going to build out a way for you to basically like title your merge request and add a description you'll be able to tag reviewers um and that's all currently in development as we're still in beta and still looking to build out a couple more features so stay tuned awesome oh so it's going to be cool one of the things that's pretty neat is that when you do bring your your branches back in let's go ahead let's go back to the main file for a second here and let's take a look at the version history of our main file one thing you'll see here is that all of our branching actions are being tracked here as well and you do get the name of your branch so your the descriptive name of your branch is important in that sense because as you're looking back in your version history you're going to be able to see when you branched but also when you when a branch was merged back into the file um one thing to note which is kind of cool about the the version history here is that it actually does two quick saves it does one save right before you merge and another save after you merge so you actually have two points that you can grab from so that just in case there was anything that was um that hadn't been saved right before you merged the branch in it make sure to do that really quick so that way you actually have a point in time that you can come right back to in the event that you want to revert your merge and the way that you revert your merge is you can just use the version history and just go back to before the merge existed the branch if it was merged will will still exist but it will be archived so you'd have to go restore that if you wanted that branch back again too as well uh cool awesome ooh api support kiko you think we're gonna get some api support for uh branching and merging um in the future but we don't have a committed timeline yet but it's definitely a no road map awesome yeah i could i could imagine some pretty complex flows there as far as people tying into their uh i know someone's gonna do it so whoever's out there listening somebody's gonna figure out a way once we have those apis to tie it into github and things like that too as well so that would be awesome or maybe tied into some project management tools or something great question that we have here in the uh q a so thinking about um designer and developer collaboration and handoff process um being able to send a link to you know individual pages or files today you know what about with using branches so let's say that we wanted to restore the branch you had created for the banner and we wanted to hand that off to engineering you know could we maybe show what that looks like yeah chad do you want to you want to drive on that one or uh sure cool let me fire up here awesome all right so if we come back in here and i go back to look at all of the branches and we decide that you know hey and oh am i oh i missed your banner right there bottom one so i'm going to actually restore this branch so i can work on it again all right so let's say that we have tested and this banner is going to be a good one for development so we can keep this branch and actually share this out with an engineer who can then come in specifically to this branch you know they'll have just the inspect view when they're in here and it'll be isolated here now what's great is if your engineering partner is working on their own code branch you can keep this design in its branch to have a qa against so once they've built the feature in their branch and it's ready for qa you can now compare that into this branch and when everything's good and it gets merged on the development side then you can merge in your banner on this side and that way the code source of truth is the same as the design source of truth um also talking a bit about the merge conflicts here you know again we have this update from the main file that we had done earlier where we did a blue banner and now we have the red banner so if i look here these changes have been made in the main file so now i can apply those changes now but maybe i've applied these and i'm saying oh it's now going to remember that i already have my red one here and i can go in and now i can merge awesome uh we actually had another good question too um the updates from main piece as well um i believe that it could just be that we are working in the file pretty repetitively and i might have dismissed it but i believe that there's a a toast that will pop up sometimes right or a banner shayna is that or oscar yeah that's that's exactly how it works you get a little kind of banner in the corner um and also if you're like in the review in the merge view you also get like a banner that tells you if you want to update before you're emerging awesome yeah so actually chad i'm gonna take over for a second here real quick and just see if i can um trigger this as well real quick just so we can sort of take a look at it but yeah so it is more than just that little blue banner in the corner you'll actually have um the full toast in the corner similar to like the you have new updates from from a published library um so i might have just dismissed it earlier when we were working on it but let's say if i were to create a quick branch so new component create this i'm now in my branch um if we go back to the main file i've got you i'm making some changes okay yeah i can make some changes there i should get it i might just have dismissed it too many times already in this file but uh you should see it as you're going through it in fact if you watch the video from config you'll see it in a few of the the examples that we had there as well yeah i'm not getting it interesting well something for us to take a closer look at too as well too um there was a great question i saw um uh uh how can we use uh branches that have for pre-existing files that have large multiple pages will branching duplicate those pages it will so you definitely want to think about your sort of migration process there if it depends on what your pages are for right so if you were using those as iterations on your ideas there's no reason why you can't continue to use pages right you can use pages in conjunction with branching i tend to find that pages are valuable when i'm very early on in my iterative phases and i want to actually have two things right in front of me constantly because i want to look at one look at the other maybe very quickly switch between the two maybe i have components that i've made there that i want to make sure that all of my instances are impacted at the same time pages would still be valuable in that case as well too um i think with branching what's nice is because branching is opt-in meaning that you don't have to change anything about your files today you can continue to use your workflows and just sort of add this on you can probably start on your next feature or your next thing where you maybe would have previously made a page you can go ahead and make a new a new branch instead uh and that that'll be a quick way to go about that uh awesome very cool oh wow these questions are getting answered so fast we've got so many figments going with us on the on the end here um awesome so yeah to that question josh if it updates the library file if you update the main file does it update the branch only if you accept the changes if you don't accept the changes it's it's fine you might just have more conflicts that you need to resolve meaning you got to choose between the two do you want the version that was in the main or do you want the version that was in the branch there as well too and yeah so there's a i see a lot of questions coming through around the um who this is available for currently this is available for the oryx plans we did a lot of research on this and looking at um how we can make this most valuable for teams of specific sizes and things like that um so it's currently available in beta for orgs there's a signup form that we'll be dropping into the chat it's probably already in there too as well we do want to hear from professional teams as well if this is something that's going to be valuable for you please let us know because that's the kind of feedback that we're looking for and yeah that's that's that so yeah currently orgs uh and then there's a beta link that you can sign up for it as well too awesome looks like we've got uh time for maybe one more question here i'm gonna go ahead and just see what we've got in the stream uh t-mobile designs we'll probably do another office hours for that one so we can come back to that too as well um viewers in a file can they see branches that have been archived yes so viewers in a file can see the branches specifically anyone with can view access in the main file can view branches and anybody with can edit access can also view those branches and then have the additional controls of uh being able to rename archive duplicate and then actually merge those branches back into as well very cool awesome yeah i guess uh something that would be kind of fun would would be uh you know kika shayna oscar i'd love to know a bit more like where do you see this going you know you we mentioned things like maybe adding in little descriptions for the for the actual branches that are getting merged in uh anything else that that the team was considering that that would be looking at for the future or yeah i think so like we are working on kind of like a more official review workflow um which will include like those features that i mentioned before um really i think we're excited to just like get it in front of more customers and to get more people using it and to get more feedback i'm so excited to to talk to more of the customers we'll be adding to the beta nice nice um great i think with that we will probably go ahead and uh move to our closing thank you to everybody who asked 160 questions uh thank you to the team who's been answering them uh so uh just really well in in the chat over here as well if we didn't get to your question uh we apologize and and definitely feel free to follow up with us either on twitter or anything like or um

Channel: Figma

Views: 14,892

Rating: 4.964602 out of 5

Keywords:

Id: euS0iOI0-5c

Length: 54min 49sec (3289 seconds)

Published: Mon May 10 2021