Responsive Web Design Tutorial by Figma Breakpoints Plugin - Figma Responsive Web Design Tutorial

now you might be thinking what's so special about it it's another responsive website that we usually see all the time and every developer makes sure they make the responsive version of the site when they develop it's nothing to be excited about and this is one of our premium wordpress themes it is obviously a responsive website you can check the link in the description by the way but what if i told you it is not a developed website in fact it's a figma design and you can make it right in figma so we are gonna do this today also we are gonna see how you can convert a desktop website into a tablet and mobile version hi i am alex from essential web apps and we make videos on wordpress website and social media strategy web design and development to see our regularly uploaded videos please hit the subscribe buttons and click the bell icon for notification okay this is the ashley wordpress theme designed in figma so we are going to make two different versions of it one for tablet devices and another one for mobile devices for that we need to understand type scaling you see when the screen property shrinks down the fonts also shrinks down to fit within the screen properly we use two different fonts here this is the color palette by the way so for the headings we use the font playfair display and for the body text we use the font source sans pro before we get into the type scaling let's discuss the font hierarchy and there are a lot of ways to set up the fonts hierarchy but we are going to use this number today this is the golden ratio number so what we are going to do here take the body text size which are 16 pixels here so for say for heading 3 we are just going to multiply this font size with the golden ratio number we can do the same for heading 2. and also for display fonts and as you see it looks like a perfect step down font setup we can also set a perfect line height for paragraphs and all i have to do is multiply the golden ratio number with text size in the line height box here and just like that it becomes more comfortable to read if you want to see a detailed video on typography let me know in the comment section okay now let's move on to the scaling as we created the hierarchy we have to reconsider every size of the hierarchy for three types of devices the first one is the desktop the next one is the tablet and the final one is the mobile device like we did here well there are no rules in particular you can do your own experiment on the design system and see what fits better and looks good so for heading one or display font we choose three different font sizes depending on the device but for heading 2 we choose 32 pixels for desktop but 24 pixels for both tablet and mobile because as we tested our design it looks good and even fits well in both of the screen sizes and we did the same for heading 3 2. finally for paragraphs for all devices 16 pixels fits best and even looks good too quick tip always try to test your design on an actual device like on a phone or tablet figma has this mirror app where you can actually open your design prototype on a phone or tablet and you can interact with it see on the devices what looks good and only then make your decision by the way adobe xd also has its own app to test prototypes if you want to see any design tutorial on adobe xd let us know in the comments section now it's design time but we have to do a bit of setup for that our goal here is to make each of the frames fully responsive we already discussed in a previous video about responsive design and for that how important the column grid system is you can check that video in the description so here we already set the desktop versions grid system now we are going to set the column grid for tablet and mobile device frames for that we are going to follow the rules from this site it's material.io by google you can follow apple's guidelines too but here i'm going to use google's guideline so as per material.io in my tablet frame i will put 8 columns with 24 pixels cutter and for mobile devices i will put four columns with 16 pixels gutter ok fonts and grid all set now let's design it design is done let's put constraints on our designs so we have already discussed the constraints in our responsive design video i am not going to discuss it in detail but let me just walk you through it very briefly basically if i want this one to stick to the right side i will put constraints to the right so if i expand the frame to the right it will respond accordingly same as i will stick it to the left side and it will also respond likewise but the paragraph's lines are always fixed here if you want to change it as it gets more space to fill in you can do it by selecting left and right you can set a paragraph like this but you can also set it to the center like this so no matter the size of the screen it will always be in the center you can do this for headings mostly and not just text any shapes or objects can be constrained too and if you set this to the bottom it will stick to the bottom mainly footers can be set like this by following this rule let's put constraints on our designs elements and as you can see all three frames are fully responsive now let's make it adaptive for that we are going to use this plugin called breakpoint after installing it open the plugin now click on the new adaptive layout now set the break points we have three break points here first is 414 pixels width and 768 pixels then 1439 pixels and max 1600 pixels you can fix the minimum and maximum height also if needed or you can set it manually then you need to define frames for particular screen break points so for 414-768 width i will set the mobile device frame for this range i will set the tablet device frame and finally for 1439 or higher pixels width i will set the desktop view and that's it now if you reshape the width of the frame it will automatically adapt the layout setup as per breakpoints this very handy plugin makes design explanation to clients or even to developers very easy so there you go i hope you like this video if so please share it if you want to ask us anything you can use the comment section the demo link of this beautiful wordpress theme is in the description please check that out and i will see you in the next video you

Channel: Essential Web Apps

Views: 12,359

Keywords: responsive web design tutorial, figma breakpoints, responsive design figma, typography figma, type scale, figma constraints and resizing, responsive web design, web design tutorial, web design course, responsive web development, responsive web sites, figma, breakpoint plugin, figma plugin, figma tutorial, adaptive design, figma breakpoint, web design breakpoint, auto response in figma, wordpress theme, premium wodpress theme

Id: lBNlRw90v5w

Length: 12min 46sec (766 seconds)

Published: Tue May 25 2021