Designing responsive web design in FIGMA

Bharat Sati -

What Is Responsive Web Design?

Nowadays, the use of the same website design for all devices like iPhone, Nokia mobile, iPad, Windows laptop, Macbook, iMac, etc. is 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.)

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.
Credit : https://dribbble.com/shots/5336091-Responsive-Web-Design

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.

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:
  1. Column
  2. Gutter
  3. Margin
Image Credit : Material Design
  • Column: Columns are vertical blocks used to arrange the content on 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.
Image Credit : Material Design
  • Gutters: Gutters are the gaps between the columns. Gutter widths are fixed values at each breakpoint range.
Image Credit : Material Design
  • Margin: Margins are the space between content and the left and right edges of the screen.
Image Credit : Material Design
  • 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.
  1. 360–767: Mobile devices
  2. 768–1179: Tablet devices
  3. 1280+: Laptop, Desktop

Note: Different design system like bootstrap, material design, etc., suggests different breakpoints range. I have taken the above breakpoints based on common use cases.

How To Design A Responsive Website Using FIGMA?:

The tool I have used is FIGMA which is, off-course, most loved ❤️ by the designers.

Step 1: Create three frames in FIGMA following the width.

  • Mobile : 360 px
  • Tablet : 768 px
  • Web : 1280 px

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 explaination.

I have used two essential features of FIGMA to create a responsive layout. One should have good knowledge & practice of both features.

  1. Constraint, https://www.youtube.com/watch?v=LHY9cm_2zwU
  2. Auto Layout, https://www.youtube.com/watch?v=TyaGpGDFczw
  • 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 practising auto-layout and constraint features.

  • Add the image and apply the 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 fixed; otherwise, image width will get scaled and look distorted.

Step 4: Download the Breakpoints plugin from FIGMA. Breakpoints are a Figma plugin to preview responsive layouts inside a Figma frame.

Step 5: Use The Breakpoints Plugin To Create A Responsive Layout

  • Open the plugin and create a new adaptive layout.
  • Add breakpoints we have defined. 360, 768, 1280
  • Select the designed frame in the respective breakpoint.

Bingo! 😎. The responsive layout is ready

You can also create the prototype and share it with clients, developers, and your boss😁.

Final Thoughts

Responsive web design holds your audience and responds to the user’s behaviour and environment based on screen size, platform and orientation. As mentioned above, through Figma you to provide a responsive layout in no time. If you find this useful, please share your thoughts.