1 / 13

Designing responsive web design in FIGMA

Responsive web design holds your audience and responds to the useru2019s behavior and environment based on screen size, platform, and orientation.

Fibona
Download Presentation

Designing responsive web design in FIGMA

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Designing responsive web design in FIGMA

  2. Let us first understand what is Responsive Web Design Nowadays, the use of same website design for all devices like iPhone, Nokia mobile, iPad, Windows laptop, Macbook, iMac, etc. is a standard practice. But, keeping in mind that design should be compatible with every device. A website page consists of content like Text, Images, Videos, Buttons, etc. In responsive web design, content is like water. Website content changes itself as per the size of the device person is using (mobile, tablet, laptop, PC, etc.)

  3. Responsive web design is an approach to web design that aims to make web pages render well on various devices or screen sizes from minimum to maximum display size. The website automatically scales its content and elements to match the screen size it is viewed. We should also know why responsive design is important Nowadays, most of our audience uses the internet on mobile devices. Responsive design makes the website mobile-friendly and improves how it looks on all screen sizes. It can also help in improving website rankings on search engines. It enhances the browsing experience along with being cost-effective.

  4. Anatomy and Breakpoints for Responsive Layout Grid Before start designing, let us understand some important anatomy and breakpoints for a Grid. • A responsive layout grid consists of three elements: • Column • Gutter • Margin

  5. Column Columns are vertical blocks used to arrange the content in a website. Column widths can be defined as a fixed value or percentage (%). Generally, 4, 8, and 12 columns are used for mobile, tablet & web, respectively. • Gutters Gutters are the gaps between the columns. Gutter widths are fixed values at each breakpoint range.

  6. Margin Margins are the space between content and the left and right edges of the screen. 2. Breakpoints for responsive design Breakpoints are customizable widths to help responsive layout behave across devices. Although there can be more than three breakpoints, I will use the following three. • 360–767: Mobile devices • 768–1179: Tablet devices • 1280+ : Laptop, Desktop

  7. Note: Different design system like bootstrap, material design, etc., suggests different breakpoints range. I have taken the above breakpoints based on common use cases. OK! Enough theory. Now, Let's do some action The tool I have used is FIGMA which is, off-course, most loved ❤️ by the designers. Step 1: Create three frames in FIGMA with following the width. • Mobile : 360 px • Tablet : 768 px • Web : 1280 px

  8. Step 2: Apply following grids • Mobile: Columns-4, Type- stretch, Margin- 24 px, Gutter- 24px • Tablet: Columns-8, Type- stretch, Margin- 48 px, Gutter- 24px • Web: Columns-12, Type- stretch, Margin- 120 px, Gutter- 24px Note: I have taken standard values for columns, gutter & margin. One can use different values based on the requirement. Step 3: Design the website for web, tablet, and mobile. Here, I have designed a website header only for explaining. I have used two essential features of FIGMA to create a responsive layout. One should have good knowledge & practice of both features.

  9. Constraint • Auto Layout 3. Design for the web • Add heading. Align the text box to the ends of columns and give left and right constraints to width. By doing this, the text box will behave responsively upon changing the screen width. • Add subtext and button below the heading and apply Auto Layout to all three elements. Also, give Fill Container constraint under Resizing to text boxes after using auto layout. Now entire block will behave responsively. As I said above, I hope you are doing this after practicing auto-layout and constraint features.

  10. Add image and apply Center constraint to it. Great! The entire website header section is now responsive. • Similarly, design the tablet layout using proper constraint and auto layout. • Design the mobile layout using proper constraint and auto layout. Note: Keep image width as fixed; otherwise, image width will get scaled and look distorted. Step 4: Download the Breakpoints plugin from FIGMA. Breakpoints is a Figma plugin to preview responsive layout inside a Figma frame. Step 5: Use breakpoints plugin to create a responsive layout • Open the plugin and create a new adaptive layout.

  11. Add breakpoints we have defined. 360, 768, 1280 • Select designed frame in the respective breakpoint. Bingo! 😎. Responsive layout is ready. Final thoughts Responsive web design holds your audience and responds to the user’s behavior and environment based on screen size, platform and orientation. As mentioned above, through Figma you to provide responsive layout in no time. If you find this useful, please share your thoughts.

  12. THANK YOU

More Related