The hardest part about building dark mode is that people think it’s easy - Figma team (Config 2022)

welcome everybody and thanks for being here i'm ryan a product designer at figma and i'm jacob one of the product managers over here at figma who was leading the dark mode stream when we first started working on dark mode i thought it would be a really easy project in fact another another designer at figma martin has a whole blog post dedicated to how to create a dark mode in just one day the basic approach is to invert and hue rotate all colors easy right i even found a project from before my time where it felt like a bunch of the engineering and design work had already been done and i thought this just needed a little bit more work to get it over the finish line the reality though is that a lot of the big surfaces can happen really really quickly and the majority of the work isn't figuring out the system and the edge cases if and when it feels really close you're really only five percent of the way there ryan brings up a really good point here which is when you're doing these designs and you're converting them over for dark mode it can often seem like you're almost there at the very end unfortunately the problem with taking that approach where you take your light mode designs and you just convert them to dark mode it's not sustainable in the long run because we have to end up doing is you have to create these designs both in light mode and dark mode and build them in light mode and dark mode and do that for every single new feature that you create the problem there is when this scales out for the number of themes that you're creating you have to do that amount of times more work for each of those new features that you're building it's simply not sustainable and there's also a bunch of other issues that are there when you start looking at the nitty details when you're doing something simple like a invert and hue rotate kind of trick that's there at first it kind of seems reasonable when you start looking at those small details that are present such as shadows which now turn into glows things start to feel unnatural and in figma there's a lot of situations where we didn't want to just do a pure invert of those colors take for example the right click modals that are there in sigma design in light mode they are dark we didn't want those to appear light in dark mode so that invert hue rotate trick simply wouldn't work for us because there are areas of the ui that we wanted to stay dark not only that there's also situations where when we're designing things we don't want the designers to do double the work because it introduces inconsistencies in the design take for example these two little check boxes here a user a designer here may be implementing hundreds of different colors between each of these designs and doubling that surface area can very easily get you into a situation where you're not going to be able to understand both the light and dark systems in addition to that we also have situations where there's subtleties that are there which ryan's going to talk you to you about especially in regards to accessibility yeah accessibility has also been a pain point where oftentimes we lacked enough color contrast in our light mode we wanted to think um delib we wanted to be really deliberate about how we improved text contrast throughout the system and thought through ways to treat different categories of text to improve legibility we also noticed issues with our core brand blue and and core brand green where oftentimes these didn't work with our color contrast standards against for white text as background colors also some of our brand colors just felt a little bit off in this dark context absolutely and ryan brings up a really good point here which is that colors work differently in both light and dark modes that are there take for example a really saturated color on both a light and a dark background this saturated color can feel like it's more saturated in that dark context this is something that i like to call the neon sign effect the other aspect that's there though is luminosity works different especially at low light levels it's much easier for the human eye to see differences in light between low light levels than it is for them to see it at large light levels which means the separation of values in a dark context can become much more pronounced and this really means that we have to reinvent all of this from the ground up and start with the foundations one of the first things that we looked at was we reinvented all of our color ramps which ryan's going to walk you through right now thanks jacob yeah and so we had a system that had worked well for us for many years but was starting to show its age for example you might notice that we have a lot of different shades of red that are relatively similar to each other and no clear logic around when to use which one similarly we had a lot of different shades of purple one for fig jam and one for components and this led to weird edge cases around when when to use each of these shades we also were sort of hitting an inflexible system where with products like fig jam we wanted to have a much wider range of colors but we didn't want to hand pick each and every one of these shape or sticky note colors rather than sort of asking designers to add one off colors to our system we wanted to orient the question around first what hue do you need and so we organized these around like the core core hues and then second how relatively light or dark do you need that hue to be we also tried to bake in good system defaults like having light and dark ramps for each color yeah and this is actually a really interesting thing here in that we were still designing in light mode when we were doing this and if you look at the application of these ramps that are there in both light and dark mode one thing that we see is that those saturated colors are still more pronounced it's showing off that you know neon sign effect that we were talking about earlier and so we need to go and redesign all of this from the ground up and start looking at our actual color ramps and build them out in both light and dark mode which is what we ended up doing so here's a look at the final ramps that we actually ended up with here and we encourage you if you're doing multiple modes to do the same it's a lot more work but it ends up with a much better visual result that's there the problem with that though is it started introducing some feedback from our designers internally that it was too hard to select the right color for the right job we went from a system where we had 35 colors previously to a system where we had 190 colors and this introduced a paradox of choice and it made it really difficult to consume our system early feedback as you can see here was from our designers saying that they needed guidance for how to choose these colors and so are we really kind of cursed between these kind of two options here in the design system world where it's either allowing for all the colors that you need for your design or this like simple bit that's there where you know it's easier to pick them it seems like it's kind of just this like dichotomy that we have to choose from luckily there is a third option that's there which is to add even more colors and bear with me while i explain this so this hidden third option is something known as semantic colors and here's some examples of ones that we use right now this is the second step in building out this foundation for dark mode which is addressing your semantic color system this is a decision between semantic names and atomic names and it's good if you have both inside of your system as a demonstration of what these are we can see over here we have these semantically named colors which are named for how the colors are used such as bg danger text brand etc we also have the atomic colors which are named at the color that they actually are things like red or blue or gray what i recommend though is as you're building out these systems don't do it in a piecemeal way where you just go and like grab something and you apply it to a particular use create a system otherwise you're going to get into a spot where you're very unorganized with these semantic colors and you also have a lot of difficulty picking from them so that's what we ended up doing is we ended up creating a system because it really helps in weird edge cases as well take this for example where we have various types of red text that are text in a danger context are we calling both of them text danger here we're not really sure but if we were doing it in a piecemeal way we may end up in a situation where we'd call one text danger we weren't sure what to do with the other and so to create that structure we really need a schema to guide that consistency so i'm going to talk through how we built out our semantic schemas here at figma first and foremost what we did is we looked to identify the different types of elements we wanted to color take for example this phone ui that's here we have the background elements that are there and we have the foreground elements that are there so we separate these out into color background and color foreground to represent the background color itself as well as the color of the icons and the text but oftentimes we want a little bit more control here so we went a little bit further and we separated this out into color icon and color text for our foreground elements we went even a step further and separated out color border from that as well and then we ended up with the four different types that we were using inside of our system bg text icon and border the next thing we wanted to do was to talk about the color itself of these items because we want to represent different colors in this system so we have a bunch of different buttons that are here for instance and each of them are different colors normally we would look at these and think oh maybe i'll name this color bg blue the problem with that is this is a primary button and this button changes its appearance depending on the context that it's in take this easy example here we have this button both figma design and in fig jam in figma design we see it as a blue button but in fig jam we want it to appear as a purple button so instead of naming this color bg blue let's do something a little bit more semantic and name it color bg brand from there what we can do is extrapolate all the other ones and we're really talking here about the color roll rather than the color itself so we're breaking these up into all different types of color roles such as brand success danger warning etc but what about the actual text inside of these buttons this is an interesting thing where the text may change color depending on the background that it's in front of so we did here is we added an additional prefix for our color roll which is the on prefix and what we can see here is two applications of this we have text on brand and we also have text on warning both of which are represented as a different neutral color this allows us a lot of flexibility in our system but we can go even further the next thing i want to talk about here is prominence and that's the third layer of our semantic schema we can see here we have three different things such as a heading a body and a label we also have some other elements that are here each one of these is including a different level of prominence that it's displaying in our system and we want to be able to address that with the schema that we have as well so breaking these down what we're calling them is just our standard default one for the very top level and then we have secondary which is a little bit lower contrast and then lastly we have tertiary the least amount of contrast we can provide in our system the last thing we want to describe with our semantic schema is the interaction patterns so here we can see a button that is in its default state and we also see it in its hover state so we're adding this onto it as bg brand and bg brand hover this allows us to describe rich and complex interactions in our system take for example this little banner that we have right here with some subtle text on it we can call this color text on danger secondary hover it's a mouthful but by providing this amount of complexity in your schema it means you can sport all sorts of rich interactions inside of your applications and it becomes very easy to theme them as well so screenshot time here is the final schema that we actually ended up with here at figma we'll be aiming to release this at some point in the future under the w3c tokens group format that they've released which we highly recommend people use as we use that as an intermediary as well feel free to use this as a starting point in your own explorations for doing theming obviously though this is just the prep work to get it all started and this is really why one of the hardest things about dark mode is that people think it's easy you do all of this work at the start and this is before you've changed any colors inside of your app itself so people will look at this and be like hey where's the progress of this but ryan's going to talk you through the implementation of how we went about doing this and how we converted figma from light mode to dark mode using this schema thanks jacob so now that we had a schema we were ready to actually implement it as jacob mentioned this is super weird because there's so much up front work that goes into planning but zero visual progress up to this point in code we had thousands of instances of places where colors were being referenced and it was clear that there was a lot of repetitive work to update all of these colors instead of trying to do everything ourselves we knew we needed to find a way to equip folks across the entire company to make these changes in parallel so to do this we set aside a dark mode week where we could build excitement for dark mode and have many teams go through the same process of dark moding their surface areas in parallel for this to happen we invested a lot of effort into tooling playbooks and documentation for example like we wrote playbooks to help teams understand how to use the schema and how to avoid common pitfalls we also created tooling that would help engineers input legacy colors like f00 and see a suggested set of matching tokens like bg danger we also wrote a script that imports all of our tokens that we have available in code and syncs them with a color library file that designers can use in figma so that design and code are perfectly in sync since designers oftentimes don't need to specify all tokens in detail we've also thought about the ergonomics of picking colors and groups the most commonly used tokens at the very top of the list meanwhile when working with components we keep colors organized with the larger set of tokens that include things like deep interaction states over the course of the week we also had a central team that was dedicated to answering questions reviewing pull requests and making token updates when needed up to this point we really hadn't seen any visual changes and so it was a really great moment to celebrate early winds as more and more of figma was updated to support dark mode you can actually see here that the layers panel doesn't support dark mode yet of course not everything goes perfectly we hit a lot of moments where we noticed new visual bugs or things breaking in unexpected ways while going through the process it wasn't really important for us to stay flexible around the schema and modify it as needed even as teams were actively using it part of a challenge here is that there are multiple layers where things could go could go really wrong for example when we spot an issue we need to figure out is the problem in our color ramp values our token definitions or is our implementation using the wrong token in the first place the really hard cases are when we might not actually have a token for a particular case which means that we need to go back and define a new token for cases like a scrollbar color we found it helpful to create a set of special case tokens that can live outside of our schema but can still make use of semantic names there were also times where we were limited by our ramps and found ourselves needing to tweak the curves we use or the number of levels we have in order to get the effect that we wanted the combination of these factors could make it really hard to debug an issue but over time we could build confidence in our foundational layers and the issues gradually shifted from problems in the ramps or the schema to just educating people about the schema the coolest part is now that we've battled tested our tokens we can expose these same internal tokens we use to plug-in developers so if you're making a plug-in that needs to look like figma ui you can use the exact same colors that we use internally and that's it you've done dark mode once you really distribute that work amongst those teams that are there and you update every surface to support dark mode one of the coolest things about this is not only do you see the bulk of those changes happen in just a couple of weeks and you can launch that dark mode there the other cool thing is that you're not just building out support for dark mode you're building up support for theming in general and you can sport a myriad of themes so it makes those rebrands and those building new products so much easier when you actually have all of that in place and that's really it so go out there and do dark mode but remember one of the hardest things about dark mode is that people think it's easy thanks y'all from figma thank you

Channel: Figma

Views: 12,436

Keywords: figma, design, product design, tips, tricks, UI design, ux design, app design, figma design, design for figma, FigJam tutorial, prototyping, collaboration, UX tutorial, Design tips, whiteboard, Figma tutorial, Config, Config 2022, design system, product:none, audience:designer, language:english, format:standard, produced_by:marketing, theme:design_systems, event:config, series:none, type:other, level:intermediate, primary_feature:dark_mode, secondary_feature:

Id: 1DTnojio89Y

Length: 18min 32sec (1112 seconds)

Published: Thu May 19 2022