Design Beyond Breakpoints with CHRISTINE VALLAURE SmashingConf Antwerp 2023

[Applause] hello so hi as said I'm Christine and I run an online learning platform called Moon learning where I talk and teach about ux UI and these days it's a lot of figma and uh one of the subjects that people find most challenging is always when we talk about responsive design in figma because we use something called Auto layout which can be a bit challenging and we all know that challenging is a nice word for annoying um and it's not that bad actually so I'm going to show you some new developments around responsive design in figma where we can use variables to deal with this and I also today want to talk about my absolute person passion subject this year which is container queries and I want to first of all tell you what they are because they're actually something in the browser they're a CSS things so not really a UI design thing but I want to show you how we could start as UI designers planning for this great development that I believe is going to change the way that we deal with responsive design but first of all so yeah that was the reason I'm officially invited but I actually have a secret superpower which is why I usually get invited the to these sorts of things and my secret superpower is that I can make all of you feel 10 years younger with one click so if you're uh 9 years old then please leave the room now because it might be dangerous otherwise just get ready and it's going to be 1 two 3 and here you go ah do you feel it do you feel the energy returning to your body if you stayed up too late yesterday it's coming back so um I showed this at another conference a month ago and then I did a casual hand show who did know what that was and it was like half the room so I felt a bit of an age Gap happening here and uh I want to be really clear about it I'm not worried about me getting to alter the industry I'm really worried about you wasting your youth to maintaining Design Systems so um we're going to do this again so raise your hand if you don't know what this is and I'm going to explain it okay yeah it's less less so um what this was that basically at the beginning um of UI Design This is how we designed the page like we had this 960 grid we put it on this page and we designed around it and so what we did is basically we placed everything perfectly we even took when it was finished a screenshot in the browser and we could compare it and we really nitty-gritty pixels here and there and there were no other sizes so from today if you're looking at this you might think oh that sounded like a nice time to be a designer like this total control just this one page everything perfect but the ones who've been there with me know it was difficult times being a designer because so and don't get me wrong I like Photoshop Photoshop is fantastic if you want to edit photos but not if you want to do UI design there's no components there's nothing you're locked inside a bid map Hell and it just doesn't work for what we're trying to do but things moved on and um things started happening in the browser and responsive design I think the first article was around 2009 that mentioned that and people got very excited and things happened we got media queries we got flexbox we got CSS grid which is something I absolutely love and recently we got container queries things also moved on in the world of UI design and we got great new software appearing so I'm going to use figma as an example today but it doesn't mean that you have to use figma simply what I work in where I believe there is great features to deal with this um but there is other great stuff around especially if we're looking at tools like frame we see really really great development as well so figma also moved and there a lot of stuff happened and especially in the area of um animation these days with figma I can literally set up an animation in figma in one click that's going to make my developers cry for a month so we have to be mindful in both directions some stuff is super easy for us to do but but when it comes to the world of responsive design it still feels like we're trying to catch up and we're we're always trying to mimic the browser we're always trying to be code and we're not quite getting there and it always reminds me of this children's story um that I grew up in Germany and so this is a very popular children's story it's called the race between the Hedgehog and the rabbit and what it goes is basically that the Hedgehog knows um the rabbit sorry knows it's very fast and it's challenging the Hedgehog to racee and the Hedgehog says yes because the Hedgehog is very smart and so the Hedgehog tells um the Hedgehog wife who looks just like him to stand at the Finishing Line and when the rabbit arrives to say I'm already here challenging the rabbit to run back and there's a real hedgehog they are already here so the Hedgehog the Hedgehog basically wins the race even though it's much slower now German parents love this story for several reasons one is nobody gets eaten by a witch which is always nice and the other one is that people just love the moral of it like you don't have to be the best one you don't have to be the fastest you just have to be be smart now I have a very mixed feeling about this story because I I just really hate it I just I really don't like the idea of having to pretend to be fast or to be something when I have great skills so if you didn't get it it's my little metaphor that I'm going to use the rabbit is the developers and the Hedgehogs is the designers and both have their own great tools and so I want to use the next 30 minutes to encourage you to just move this little closer understand each other and embrace each other's tools um rather than trying to mimic or rather than building walls between them so first of all we have to start at the beginning what is a media query in order if we later want to understand container queries so what is a media query so media query looks like this we say at media and CSS we say minwidth maxwidth whatever we have some sort of threshold and then within the brackets we have our CSS that changes according um to whatever we want to change at different sizes so it' be something like this a font size changing becoming larger for different screens now usually it looks like this this is what we imagine responsive design these days we have different break points I know there is different techniques we could use purely Flex box and things like that but still this is quite a common approach that we have different break points um and our design might change at these break points now in figma until now we don't have um break points so what we do is we use other tools we use Auto layout which translates pretty much to flexbox we have grids we have constraints and with these tools we can actually build really nice responsive designs components and even pages but you will notice that at some point if we're going too small or too large as we're putting this all together in a page it just doesn't work anymore and we need some sort of breako so what we do is and this is still absolutely fine we set up different pages or designs for breakpoints or we test our components on these different um ranges um and then we would Define how they behave per breakpoint so we don't have just one design that would scale up and down now we have a new feature since around two three months called variables in figma and variables in figma you use mainly for things like tokens um color spacing but you can also use them um for responsive design really well but I want to give you a quick introduction for those of you who don't know variables so we're all on the same page so figma variables um the ones we have is color numbers strings booleans and we're desperately desperately waiting for typography to be released because we really need that and they said they're going to ship that till the end of the of the year and also some image um variables are expected so they look like this we have a value uh we have a name that we um assign in our variables panel and we assign a value to it which we can obviously change and update everything we can have several collections so we can have color collections we can can have sizing Collections and we can have mixed collections which is something you're going to use for responsive design we can save them in a library just as we did with Styles before and everybody can use the same variables um as you've seen in Molly's talk you can get to really Advanced levels you can have Primitives you can reference them so you can set up a very sophisticated system with these variables and we apply them just as we did before in our user interface um via the different sizing or color menus now um modes is where they become magic and you don't need to use modes with variables but you can and I want to show you in order to understand responsive modes we're first going to do the modes of all the mother of all modes the light and dark mode and how that works is pretty much so the color that I just showed you you add a mode and then some of them you might change for your dark mode some of them you you don't need to change and um you simply going to add the changes you want to that collection and thereby it's basically um um independent of the value but the name that you assign the the variable you assign is going to hold all of this information and the great thing is that this inherits so you can set parent frames to inherit and therefore you don't need these huge sets of different components in light and dark anymore you simply have one component that holds that knows everything that you want to do with it in different modes and as you drag it onto a design that has a different mode assigned it will then simply pull in the correct mode for you now we can do the same with responsive design we can assign it in such a way that we pull in the correct component the correct setup of that component for the mode that we're working on so we can see this is a mobile mode and this is a desktop mode now how does that work well we need this whole setup here so you're not you can't run away from water layout anymore we need water to layout we need variance and by the way variance and variables are two things they sound very similar and I'm trying not to confuse them then variables we need min max and we need something called WP which if you work with flexbox you're familiar with so uh just to remind you uh what is a component set with variance it's something like that that in figma if we have a component that has a similar state so we have a default and a hover state for example we can package them in a component set and therefore it's a bit like what I showed you with variables it's going to remember everything uh that you told it like all this relatives basically so we can go between between um different states of hover and so on and you these sets can also become quite complex so you can add much more in there and you can add component properties on top and you've seen again in Molly's talk how sophisticated you can go with these systems now we're going to do the same with our um responsive setup so we're just going to have one let's say our navigation with a burger menu for a as a variable as a variant and then we're going to have one for the larger screens and then what we can do now we can set set up we can add Min and Max width so we can say till what point we want this to be used now if you're coming from a development background and then see that seems really minor but this one was just released a few months ago we did not have Min and Max and figman had to use lots of hacks to get this going so now we can also use wrap because we can use Min and Max and therefore you don't have to have all of these rows anymore um you can just have this nice set as you would in code and you can just have it together and as you resize they will reshu automatically now the cool thing is that we can not only add this min max to our components but we can also and again here we're going a little hacky we can use this for our frames the frames that represent our devices and so therefore I can set up this Frame and I can say um this is the range that you're operating in so I can set the break points here so I can set up a collection with my components and in that collection I can set up the different break points and I can say pull in just as I did with colors for these break points pull in those variants from our set so again so this would be this set I say pull in the S and pull in the M for another set so like this and so what we do now we simply apply this and so this is a bit of the tricky part and if you've been at my workshop then you know that it it doesn't go as smooth as in this little recording it's a recording for a reason so first of all we add um the cers here we have to add the variables we have to tell our frames um what they are and then we have to tell them which mode they're operating in and so once we've set that up so let's tell this one here it's small and then once we set this up we can now pull out an instance and these instances we also need to tell them that they are part of our new component set and we can now tell them that they have a variable assigned this is the navigation type and we can now pull it over on the screen and you will see again you need to add some Auto layout obviously because it's just a standard layout then but you will see that you will automatically get the right variable uh the get the right version of your component for wherever you're designing I think I have this further and then as we're resizing I think here um yes we need to add a little bit more so the thing is that you're not going to get around your auto layout applying your auto layout you can still use all of your variables again to set up the spacing and everything now let's have a look let's place it over here here ah I'm adding some more sorry you have to clip it and then you can add it and now you can see as we're adding it to mobile then this is going to adjust to mobile and you can now have these groups inside of your design that if you're pulling them over to a new version you get this white space which you can then solve by just adding the W and then you're getting the correct component with the correct distribution for your different screen sizes and now as you're resizing these screen sizes you're also getting um an idea of how this design will behave um you can shorten this with Boolean so if you have something um like a navigation where you're not making major layout changes but you're just showing and hiding you can add a Boolean so we can add for example all the information in one component and we can now simply say um we have a variable for burger and we have a variable for our navigation items and we can switch this on and off so we're saying on one on small the burger is on and the rest is off and the other way around you need to assign this and this is really weird because in order to assign this you need to go to the layers menu right click on the eye icon and this is where you find the Boolean um variable I didn't put it there um and so now we can simply drag this inside of our design and we're going to get exactly the same effect that we had before but we can actually delete lead our whole component set because we just have one component that we can use for everything that has all the information in baked now this looks really nice on a simple example and I want to be honest with you today I promise so um it's not a perfect solution yet we still have to change the overall layout so we still have to go into the details it doesn't adapt to grids and it doesn't adapt to unequal units so that means because we're not adapting to unequal units we cannot use stuff like fractional units in CSS grid which is I find a real limitation we don't have typography adjusting automatically this should be solved by the end of the year and as you saw this gets quite complex so you need a lot of team training so sometimes this might not be the best solution if for example you have a lot of people that just get started with figma to use this but it's not perfect but it's a really great help and it's a really great start to get people going using the right components on the right screens so how are we doing okay so we are around around uh media aquaries and flexbox were doing really well flexbox Is Amazing by now with auto layout media aquaries you can see they're doing pretty well um but we want to go there I want to be at container queries that's the cool thing so what are these container queries actually so I actually heard the first time about container queries last year during smashing conference in New York when unic critz was giving a talk about new developments in the browser and I thought it was the coolest thing ever um and I noticed that a lot of frontend developers they knew about this but um everybody in design um hadn't really heard or hadn't really started working with this yet so um this is my little mission to give this to you and hopefully you're equally excited so what they look like they look pretty much like media Crees instead of media you say container you also have min max whatever you want to set and you have a threshold value and within it changes now the big big difference is that we're not querying the viewport anymore so we don't care about the viewport we're suddenly having a look at the container that holds our component and this is a huge difference because the difference is that you basically have one component that knows how to behave wherever you put it so you might have one component set up and it look different whether you put it in a sidebar or whether you have it in your design and as people resize the browser it's going to automatically adjust to its perfect size so it's something like this so you have a card and it would know at a certain threshold that it's now supposed to change its size so here's an example what this might look like so you can see here this is all the same component and as we're resizing you can see that the card on the right that it's staying exactly the same and all other cards are um resizing now there is more that we're not going to cover today but I want you to be aware of you can Nest container query so you can for example put a button into a card and then that button might have an icon and as the card gets too small small the icon disappears because the button itself can be a container query you can combine break combine it with break points you can combine it with CSS grit that I believe is a match made in heaven and there are con container quer units so as you would use viewport width you could now use container query width and this is really great if you're using something like clamp where you're using your your typography changes according to your viewport you could now also do that with your typography being adjusted to how much space you're giving that component which is really great um there are more um container queries there is style container queries and we're not going to talk about them because they're not quite ready yet um and what I'm mentioning today is all related to size so the container query sizes you can have um a pretty good um support already unless you're using Oprah mini and you don't use anything in this world um so there's really great um polyfills there's great workarounds and there's fantastic art articles about all of this so they're pretty much ready to uh be planned for um as in design we don't have container querries in figma surprise but what can we do well you might say well you showed us these modes right now right we can just use those modes and we just put them instead of putting them on the screen we just put them on the containers and then it switches that's what I thought it's not going to work the reason why it's not going to work is because with the modes you could assign them and you could switch them but you have to manually switch it they simply don't communicate like the the component if you resize it there's no way to say did you change size what size do you have what mode should you have you can just say you have this mode um so in other words we can query in figma so this wasn't a problem when we're dealing with classic break points because we can just we have like four or five pages we're dealing with so we just assign those uh break points to those pages or even if you're testing just a row of components and making them indiv individually you can you can adjust that and you know where it's going to happen but if we're going with media queries and we're going to go inside of our design into all these details and this is a very simplified version you're can to have all these containers around that you might or might not need to query so that doesn't work and another reason is that's um where we're going to have a a bit of a struggle is you can set up container queries in such a way that they respect the a grid um and therefore you can do stuff like this that you have sit nicely and once you have a CSS grid around it you can make it respond to that grid and take that as a parent we cannot do that in figma either okay so how to query when you can't query a question that 0.1% of the population frequently ask themselves when they wake up and go to sleep like me um so the cool thing is if we think about how they set up these um container queries then the container itself actually doesn't hold any information the only thing we do we query it we it doesn't have any responsive information otherwise all the information is stored and that's a beauty about this within the component and we can do that as designers we can this is how we set up our component in figma because we're going back to a component set with variants inside of it so what we can do is we can use these variants in a way that we can say well we're going to set up the different versions for this um container query now and I want to be really clear this is not about designers coding this is not about developers coming into figment resizing if you want to I think it's all great but the idea behind it really is that we communicate a final design idea and decision as final as stuff gets no in web design but that we as designers can try things that we know the new technologies that are happening that we can plan for them and can we bring ideas on the table that we had and that we can use the time that we have as a designer and a development team together to talk about the valuable stuff to polish the edges and to not start from scratch talking about the most basic things which we can already test and um discuss in figma as a design team so I would encourage you to always what I'm going to show you to package that away have like a playground file somewhere where you're doing all of this so what I do in this little playground file is basically I I start my basic design and I bring my components over and then um I play with them I put more cont content less content I resize them and by that I can find this little magic area where they should break into a new way and when I found that then I go over to where I have my components um stored where everybody would access them and look for the information and I'm adding this I added to the naming depends on your team setup might not be the ideal solution um and I most importantly add a Min and a max value to make sure that if someone uses it they're like stopped from using it further on and then what I like doing is I like adding this as a uh property name so I name this at component um there might be people that have like heavy breathing now because uh naming properties as an art but what I believe that this does is that it helps because this is really new people don't know about this so if someone pulls this out and they have this instance in their design and they see at component they're going to be like what what is this all about and then they would go back to the documentation and they would find information or ask someone and developers they would see in new def mode in figma a playground and in this playground they would see an ads container and they would be encouraged to play with it so it will be very clear that we're trying to design together for this new thing coming up so can we push this any further you could if you um have something that doesn't change like that doesn't show and hide that doesn't require um uh changing font sizes and stuff like this then if you simply have a layout change and you can actually use use the min max and um the auto layout that we have in figma as if it was sort of a nested CSS grid which I've seen a lot of people adding to container queries so what we could do we could add min max and therefore we could make this component um automatically change sizes as we're resizing it we would obviously need to add information and documentation about this because this will not will not be logic to everyone else also this isn't the ideal solution for everything thing um because if you're in dep mode you will see that you'll still have the translation to flexbox so it will require a bit of um discussing and um adding information um and it comes with a few limitations again so um even though we want to use and communicate CSS Grid in a lot of cases we cannot do that in fig just doesn't have that output um we cannot deal with booleans like show and hide with this approach typography doesn't resize even if variables were released this would still be an issue and we can cannot change things like colors and again you need team training you need communication but this is a new thing so it's going to it's the same whenever new Things Are release that shouldn't stop you so let us use it you're going to say great it looks like we can set up these container query things it looks we can use variables um and we can use variants we can um set up these new fancy things so let's build a design with it yeah sorry this is where the problem happens because once we adding this to our design again we have the problem we can't query so we have to go in there and we have to find the nested elements and switch them around and everything and it's going to be messy and in German we call this a sisifus arit which is sisifus work if you don't know sisifus um he was sisifus was a king who was punished in the afterlife for his deceitfulness his internal punishment was to roll a large boulder up a hill only to have it roll back down every time he reached the top this task was repetitive and file symbolizing a NeverEnding and ultimately meaningless effort sounds about right if you're trying to do this and we're coming back to this we don't want to race the rabbit we want to be a hedgehog communicating with the rabbit so as you're getting in this thing of I'm GNA make this the real thing in figma don't figma isn't code and it's absolutely fine what we want to do let's reflect back let's focus on the actual goal why are we doing this because we want to create components using a new thing called container queries and we want to communicate that with the rest of our designers in the team and we want to communicate this to the developers to come a step closer and start building with them together so what we do is we basically can set up a static design where we use the components that we set up with all that thinking and then we have a static design and refer back to component now you might be able disappointing being okay so we're talking for 20 minutes that you tell me I'm setting up a static design well yes and no because the thing is this might be static but you've done all the work you've done all the work you know why this component is like this and the important stuff is the documentation you're going to tell everybody else how it works and when they pull out an instance when they work with your component they're going to see how this works there is different ways where you document it's like it could be a small project on the separate page it could be a separate file it could be a whole sophisticated design system that you're using so it doesn't matter where so this is just a little example of about how you could add this so this is um if you would have something inside of figma you would have your component set and that component set um holds other versions so you have a bit of information about Anatomy you might have some specs in there um very important your component doesn't only change size it also has things like hover effects so we would would still keep that in our documentation but then down here we simply add what we found and we add a link what is what is this um new technique we're using where does it break why does it break and um explaining it a little bit you can also use that if you're just using a classic grit system to demonstrate how things are sitting because this component by the way could still be used in your classic git system and just in some cases you could add container queries it doesn't have to be everywhere a little tip because documenting is hard and timec consuming there is a plugin called H shape specs plugin and it takes this long as you saw to make a documentation you simply select your um instance you click a button and it's going to create a documentation for you and then all you have to do is you can add however this is used responsively you can simply add this um to your information additionally because it's little frames you can pull them around so how are we doing well we did reach the present we can use container queries now we need to talk they're not going to you you you're not going to be able to set this up in figma throw it out there and it's going to magically appear you really need to sit down again as a team of developers and designers which hopefully you do all the time but a lot of the time it gets lost because we believe there can be a documentation to solve that it's not going to work in that case and it's a beautiful thing but what we can do as designers is that we can prep this we can make this talk enjoyable we can design so we can design our components we can plan that we can design what we really want this to look like we can test it to quite a good extent in figma already then we need to sit together we need to say this is what we want this is work this is where in figma we can't go any further we need to see this in the browser as a whole now and then we can document this together for everybody else joining the team and for everybody else having the opportunity to push this further so I think if if we're doing it like this then we can really move a little closer together as developers and designers and then we can go from racing each other and get ready this is really cheesy to embracing each other and uh thank you I'm not done um because I can tell you that's really hard to make a rabit in a hedgehog hug with mid Journey it's been a long J really difficult stuff do that so um if you like that um and want to know more about being nice rabbits and hedgehogs and lovely with each other um then follow me um these days mainly on LinkedIn and visit Moon learning. where I talk and teach about these sort of things and I hope to see you soon thank you so much for your attention I really really appreciated [Music] it thank you so much Christine we have some questions as it always is and wonderful questions uh Casper was probably writing at the very first moment when you started he wrote thank you so much for comparing developers to the rabbits I've never been compared with something fast for my speed I'm glad I made your day that's you know that's wonderful as to hear um Pina also came like right the moment when you actually mentioned eight shapes by Nan Curtis right there were a lot of questions around can you recommend any other magical figma plugins that you use a lot I do I do love figma magical figma plugins so uh we did a whole session on pulling in data um with figma and you can do a lot of great stuff you can connect to apis and things which a lot of people don't know so I would recommend um um Google I forgot the name of the plugin great Google Sync plugin so that's really great and the best thing is go on YouTube and Google um smashing meets and you will see there is a video up and there is a link to a figma file with the plugin in it showing how it works there's a video of the whole discussion we had about it so yeah I love that like pulling in real stuff into figma and another one is HTML to design um that is really great because what you can do is sometimes you have you have a website or some old stuff or you worked in another software and you have to just pull in things so that will create a figma version of uh with a URL of a live website I also really like that okay uh Olivier is wondering at some point we're implementing the UI twice once in figma and once in code but just how far should we actually go in figma you know so that you have to discuss with your team I mean in the end there's a lot of factors to it there's how many designers do you have how many developers do you have what's your budget um and also how do they work together some I'm I have met teams they just do just a quick sketch in figma they don't even bother with the responsiveness because they have such a strong front end team that would jump in right with them so you can absolutely do that others have teams at the other end of the world they can hardly speak with each other so you have to do more in figma so I think yeah you have to find that within your team and also that everybody everybody is Happy um and how far they they're going to go into different areas MH I think there there actually a number of questions about the Handover and how it's going to work and hand off I noticed that is another topic yes it's it's always kind of conversation of course um I think one interesting thing that I've noticed recently in teams is that whenever it comes to handoff like even one thing that really helps is to just create that meeting where designers and developers get together and just discuss just even if it's 30 minutes or 45 minutes um and there were actually a number of questions around how do you manage handoff better so if we are working in a place where like you know organization Enterprise environment and all where you have designers on the seventh floor developers in another country somewhere right um how would you what would you suggest to teams that are remote not that are kind of collaborating but still water fly in a way to improve it to get better with this entire hand of problem I mean I think the the remote as much as I love it it's also a problem because the most stuff I ever found out about like coding and and looking at the other side is um not at work but it was like you had that coffee break you had that moment um so I I feel very strongly that this is getting lost I would encourage you to go to live events go to meetups where people have time where they're relaxed there's no at work there's so much pressure sometimes to get things done um so go to where people are coming to relax and talk about code and design and where they enjoy um changing like conferences like this where you can exchange these ideas and try to find out and I always found when I come with a little bit of knowledge like when I say um when CSS grid and all of that started uh when I came and I said I I I read a little bit about this great thing can you explain me more that was a great intro rather than coming with like zero and being like I have I I designed this how do I can you explain me how the world Works in code so read articles about code um get started to understand what's happening how does typography work in code don't just design with typography understand how that's going to be implemented because then you have a conversation that people can actually start at a different level and I think even with design you would also appreciate that if someone um doesn't start talking to you about the basics but comes at the level where you where you feel you also have a value about it mhm there is an unpopular opinion okay great bring it out it's coming it's coming um how do you make sure that developers understand designers oh we get in a very philosophical debate um how do you prepare the the the design what works well based on your experience it's kind of all I think a lot of questions all around kind of handoff but I think it's more about the question I guess the angle is is documentation and enough or you can go a lot like with Ed shapes and all to really document everything and have the pixel value for everything or the token that you're using and everything is this enough or what needs to happen developers not understanding us this a conference where fire I usually the last one was a developers conference and it was the other way around developers how can you make designers understand us this well first of all I always find the term developer very broad because I find that if your front end developer and a backend developer the mindset that what you're working on is so different um and so usually yes a lot of the time backend developers probably not going to be too interested in um your your pixel art uh where you're going all detailed um there is some full SE developers I've met very few where I believe that is really the full range but your frontend developers they're genuinely interested in design that they also want this to to look good um and so I would would try to to do stuff with your frontend Dev developers and sit together and yeah the the documentation is not going to um be a substitute for a good talk but it's going to be like what I said it's going to be this it you putting the talk you're having on another level you're not starting from scratch every time you're talking about the details you're saying I thought about this I'm trying to make your life easy and if your frontend developer says I don't want you to do all of this testing I prefer doing it in the browser go for it like that's fine I would still document it because he might go on holidays he might be away someone else I keep on saying he want to see developer he she everyone sorry about that I'm really know about this myself thank yeah totally with you um so like be prepared that someone else might come in that might need a documentation so I always I am always for a good documentation with a good talk mhm yonas is wondering how do you manage iterations within figma especially when working on larger projects with multiple team members pardon iterations I think like when we're talking about revision version history and all things yeah yeah it's a tricky one I mean if you're in an organizational plan I think you get something where you can branch and things like that uh I don't usually work with this so I'm not at firm with this so have a look at these uh organizational and Enterprise plant you can do branching and stuff like that and I think if you in these plant and you even get training from figma like don't I think so on how to do that so I would have a look at at that sort of branching things rather than having having these different files mhm mhm uh a few other questions that came up one from Bruno we have a few minutes uh currently we're struggling with the device pixel rate Windows DPR mostly 125% scale on Windows laptops uh could you also set this up with variables and modes if you're having like pixels yeah so it's like we're talking about Windows DPR device pixel rate which is different I guess from from Mac um but but I mean usually maybe I'm getting this wrong but usually when you're designing in figma you always design at 1X where one point is one pixel and the re reason is that um everybody is like everything Vector base is fine with that and everything like images you can export at any rate and there's presets for Android for iOS so you would use that so usually the scaling up and down that wouldn't be an issue mhm okay m is also wondering how do you create a responsive image with a fixed aspect ratio in figma Plugin or no plugin uh no I I I personally don't like the plugin but I've used the last plugin I've used like a year ago so maybe there's new stuff out there um no I use um a if you go to the figma community and you type in aspect ratio there is a really great file there is several files It's usually the first one that turns up um and someone made a very very complicated hack about nesting and nesting and nesting and I usually use that image um you can simply um he has lots of different aspect ratios you can take that image put it in your own file and design with it and put your image in mhh okay so we have a few more one of them is coming from Raj but I think that might be difficult to answer so are you aware of any plans to have better support for container queries inside figma any Brands um any plans any plant um no uh I mean not even the we still have the responsive stuff not solved completely it it I don't know like I didn't ask but it doesn't look like something focused I feel the container queries for how powerful I believe they are they're getting a bit bit under the Raa in the design community and so um but if all of you now use container queries and all of you write to figma that you want us then um that's how it works yeah so I think that there are many many questions around basically one single topic uh and hendrik is saying so I'm not looking to start a fight here I'm GL now I have like a timer here the timer is like very dramatic getting to zero almost but if you're adding all of the abstract elements to design tool for mimicking browser Behavior why not design immediately in the browser or why not move faster to the browser where should this design work be happening well a lot of the time because there aren't enough developer in the team that want to do that they're very expensive and uh that's a brutal reality and it's cheaper a lot of the time to do it in figma um and you don't have to use it just because they're adding features there if you are that team that can jump right in the browser with a lot of teams out it's wonderful then go for it but um I see a lot of designers being stuck not being able to try it out and then having very limited resources in development for a Next Step that makes sense uh finally do you have any particular wish list features that you'd love to see implemented in figma anytime soon I do and I do nag my friends at figma about them all time aspect ratio and um CSS um great support much rather than container query still like in the future but fractional units I I need fractional units well the future looks uh interesting I think it's it's very interesting just to see the evolution of how many things actually have come out recently yeah uh of course there is always is the question in the room about Adobe XT figma you know some people are actually using adob XT and they kind of feel a bit stuck to we can we move how do we move but this is probably difficult question to answer within minus 43 seconds that's right if it works for you and your team the tool then use it um figma is great now I think it's the best tool on the market right now um but then stuff is going to change and so who knows what's going to happen in five years if you're starting right now I say look into figma because it's it's really amazing excellent well thank you so much for being with us Christine wonderful wonderful [Applause] insights

2025-02-18 12:09

Other news