Responsive Design Mastery in Adobe XD, Figma, Sketch

Learning to make the responsive design and auto layout is very vital. Being a ui, UX and product designer, because it's not only the smartphones what we use, or laptop or tablet or any device even we use watches. Whatever interface you are trying to communicate with your user should be responsive for all the devices, right? This podcast is going to give you exactly the steps, how you can learn that and make sure you are becoming master in auto layout systems when it comes to managing multiple devices. Okay, so take a lot of notes and if you open your Adobe XTN FIGMA software right now, if you listen to this podcast, it would be better. Okay, let's jump into this podcast. Let me tell you first why it is very vital for a designer to learn this skill. Because nowadays we use lot of mobile devices and we use, you know what, the mobile traffic is very high, just like 60 to 75 percentage of the users are in the mobile zone. Now. That is why it is very, very vital to really understand this first. It's not only the mobile, it's about using tablets, it's about using iPads, it's about using watches and there are some irregular sized devices also which is coming in industrial segment and even for toy segment where kids play. So interface could be like n number of sizes could be there. But how do you really make sure the designs, whatever you're making is replicable in website, in mobile app, in watches. And it looks like a same homogeneous what you call site or your brand image, which is reflecting that. This is the power of understanding the responsiveness design of your concept, whatever you're making. It's a very critical aspect, guys, in this modern ui, UX and product design world to have a very seamless experience across different sizes. Define design. Students and professional needs to learn the skills for creating a stunning experience. Okay, so first you need to understand the layout management. If you're making a very good responsive design, you need to make sure to understand the strategic organization of your content and design your graphics, your picture, your icons in a more responsive way. I'll tell you, if you use a software called Adobe xd, you can find there is something called repeat grid. Okay, you can find Alt G, you can find that particular group repeating in vertical direction, in horizontal direction, etc. If you're using Figma, you can use something called auto layout where you can group objects and then you can scale it up and scale it down. So in responsive design, it's very, very important to understand how to structure your content very flexibly. Okay, you know what, this makes you arrange or rearrange your elements in a more easier way across the different different sizes and screens. So this ensures some consistency. Guys, to really experience a seamless device experience in mobile, tablet, laptop, etc. You need to understand there is another terminology called grid. Grid is a very, very vital element. Guys, let me tell you one thing. If you are not using grid properly, what happens is whatever design you are making, it will not come into a proper play. It will be very much rearranged here and there. And if you shrink the device, like let us say if your mobile is very small, let's say if your website has a big sentence which is like a one line, when it comes to mobile, it should fold like three to four lines. If you are not putting it in a grid, if you're rearranging here and there with your pictures and it will look very shabby in your mobile. Okay? Lot of software nowadays are having both views. Like let's say if you're constructing a website in webflow or in your wix or anything, so it gives parallelly the mobile view how it really looks, right? You can rearrange. But primarily being a designer, you can even construct that using those options, which is called auto layer, which is called what you call repeat grid. So these are all the options which makes you do it very comfortably. Because grid provides your framework for organizing and structuring your content. It majorly helps your consistency and alignment guys in various screens. So this creates a visual harmony. Then and only people will really celebrate and enjoy, right? Okay, now let me tell you. Figma. In figma, take advantage of a feature called Auto layout. What you can do is you can create a small rectangle or you can even create a small icon or whatever you wanted to do. Create responsive design using this feedback. Right click it and create and click Auto Layout. Any object. If you right click, you'll, you'll see this option, Auto layout. Okay, so what you can do is you can create some constraints. Guys, if the moment you click auto layout, you can see in the right hand side, right now this is a visual, it's audio podcast, okay? It's not a video podcast. So you need to understand if you open the figma, you can find the right click option. And if you put what you call auto layout, you can find there is something called four which is coming, like upper which is bottom, which is left and right side. That's called padding. The moment, if you click on left side, it gives you a little distance, like let's say 5 or 10 mm will be default and you can change that. What does it mean? This is a space from the edge of the box to this content which is placed inside it. Let's say if you're placing a content inside the box which is called submit, if you wanted to submit some form, if you are putting the word S u A S u B M I t. Let's say if you put a left side what you call padding of 5mm, the yes will come exactly 5mm opposite to that. And if you want to give a upper padding automatically the box will move high. If you give a right hand side padding, obviously the button will go high. So you can change your submit option inside the box in a left, right, up, down way using this. You can ask me hey Jagdish, why it's important. I can manually rearrange it. No. Yes, you can do. I'll tell you what is the problem. The layout will not be very much seamless if you do it manually. Like let's say if you put the submit option separately, let's say a text, or if you draw a box separately. Even if you're not using auto layout, the moment when you keep submit on top of this box and when you squeeze it to mobile view, the submit will go one side. The box will go one side. What happens now? It will create a huge problem for you and your user will not understand what you are trying to say. Right? Of course submit is a button. It is an interaction. Right? You need to show that as an interaction. But when you place it inside a box and create an auto layout, what happens is it creates the automatic layout inside your screen. The name itself suggests what is the meaning. You don't have to get too much confused. Okay? You can try it by clicking right click and do it and you can space your padding. Let's say if you want to put your submit left side or right side or up or down, you can do it anything nice. The beauty comes when you rearrange a lot of elements. Let's say if you have a submit button, you have another icon inside it. You can drag and drop that icon inside that button. You will see automatically it goes and fix it. You can make the space in between the icon and the letters very easily. Using auto layout, there will be a red what you call hatched line which will be shown when you move your mouse over there. If you hover your mouse, if you click that and move it, the submit will go neatly to the right hand side. The icon will go to the left hand side. So you can give a very beautiful space between the box and inside the icon and next to the text. So have you seen paytm option? You have a lock button and the payment button and then you have a secure pay. It's beautifully spaced, right? Even if you see in website, even if you see in mobile, everything looks seamlessly same, same color, same icon, same sizing is because they've used auto layout very easily. This is the power of using this guys. And the beauty is you can save it and you can create it as a component and you can use it multiple times across your screen. What happens if you use manually submit button in box? You will have to go and find copy paste again and again. This is a huge time consuming activity. So explore a lot of constraints guys and try to adapt different screen sizes. And Figma preview option will show you how it happening in real time. You can test it live. This is all about figma. The second important part of this podcast is Adobe xd. So having learned the importance, you need to know how to use in different softwares as well. First I told you about Figma in Adobe xd. Your life is very simple. It offers a huge responsive resize case. Designers can easily adjust and resize different screens. I'll tell you there is an option called repeat grid alt G you can put or control G I think in Mac uses in window the moment if you click that object and when you put Ctrl G and there will be a right side small bar coming and the bottom there will be a bar coming the moment if you click the right hand bar and slide you will see repeatedly elements coming. When you put it vertically, it will again rearrange you vertically. And the beautiful option is you can hover your mouse and you can keep the spacing, whatever you want. You can rearrange the content, drag and drop, you can keep the spacing, you can automatically pad it and Adobe XD will give you that seamless spacing and you can even manually change it also on the right hand side by giving the 5mm or 7mm or whatever. It's the most efficient replication of design element. Guys, let me tell you it's better than Figma because I've used both the software. That's why I'm telling this allows your prototype for designers to even seamlessly integrate and have a very good interaction to simulate to your users, to your testing team, to your prototyping team. And you can even test it using your preview button and chip. So this is about Adobe xd because the moment when you are learning this, you should be able to communicate it to your testing team or other team as well. Let's come to another software called Sketch. Sketch users can rely on Anima's Auto layout plugin because that sketch doesn't have a direct option. You need to install a plugin called Anima for a streamlined response so you can leverage the symbols and it overrides the efficient management of design components. Sketch Artboard really features helps in visual elements and it makes you flow across text and graphics and icons across multiple devices. It's a good option. You can use this plugin Anima. Now let me tell you what are the plugins you can use for these three software. It's a very important the third part of this podcast. When it comes to Figma plugins, you can use a plugin called Anima Toolkit. This enhances figma's capability for responsive design. It offers lot of auto layouts and stacks. Guys, it's a beautiful thing. See you don't have to manually play around. There are some UI guidelines, there are some what you call WCAG website alignment content guidelines, accessibility content guidelines. And you can use that readymade template which is already tested and proven to use it. And there is another plugin called figmify F I G M I F I. This provides a great responsive design components and templates to speed up your design process. If you are an Adobe XD user, you can use a plugin called Viewport Resize. Beautiful tool. Allows designers to really preview and test your designs in various sizes. And you can use something called Auto Animate. This enhances your smoother transition across different different screens. And Auto Animates really makes a beautiful alignment because a lot of people think it's only animation option. But this helps you in responsiveness also because it transitions your pictures, elements, icons into another screen seamlessly. Okay, if you wanted to really go into this deep, if you want to really master end to end, definitely you need a little bit practice it. Okay, so begin by understanding some principles of this layout grid, responsive design, whatever I told you. And practice some simple simple shapes and icons. Initially drag and drop some icons inside the box, put some text, move the padding, rearrange it in left hand side and right hand side. Constrain left hand side, constrain right hand side. Try to give a different option because the moment when you try to play with constraint, you will see which is moving, which is fixed and then hands on. Practice it for one and half hours, guys. Every single day, continuously for 21 days using some pictures and icons. What happens is when you work on a real time project for 90 minutes every single day, you will start using lot more options in outdoor layout. Constraints, padding, responsive resizing and different different sizes. And if you use plugins, it will even multiply your productivity to a larger extent. And you know what? When you really make your really workflow very smooth when it comes to testing out and iterating, your design people will find it's more relevant and easily replicatable because you already tested and you tried it right using your preview options. So refine, iterate and and based on your feedback one more time, resize it automatically. You will get a hang of it in just 20 days guys. And if you're really a hard worker, if you want to spend only few days to learn it, spend four to five hours a day and in three days you'll become a master. Even in the entire software you can master. But I'm saying with respect to only responsive layout and grid management and layout system, okay, because some people really take a lot of time. But that's okay. So this is, this is the whole thing about this podcast. Now let me give you some useful materials also you can go to a content called Responsive Web Design Basics. I'll paste you in the description. Don't worry. It's a Google developer software. It's an excellent resource for finding responsive design layouts and figma learning resources has already a lot of tutorials and documentation and what you call some assets which is there you can use it. Adobe XD offers some support and comprehensive guides and tutorials for Adobe users. And sketch documentation really gives you a lot of advanced features in sketch so that you can find out. Okay. Because use these materials guys. Then automatically you will also get a hang of what is really happening. Okay, I hope this podcast would have given you exactly the steps how you can master this responsive layout. Taking action will only give you mistakes and taking action will only correct your mistakes. And taking action will only make you practice. And taking action will only make your practice become hands on so that this becomes a second natural response for you automatically. You, you'll create a button, you'll create a icon, you'll create a layout for any sizes. You become a mass profit. Okay, so thank you so much guys. Thank you for listening to this podcast. I hope this would have given you a great clarity in using this responsive layout. Stay tuned for further episodes. If you find this as useful, give me a best star rating in Apple and Spotify. If you join my mentorship support to learn lot more things in product design and UI UX design and if you're really damn serious wanted to improve your salaried to x3x growth or if you're coming from a different background who wanted to get job in just less than two or three months, send an email to me and our team or myself will contact you to help you out to join this program. Okay? Thank you so much guys. All the best. Bye bye. Take care.