Designing responsive web design in FIGMA

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

Image credit : Stéphanie Walter

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 :

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.

Anatomy and Breakpoints for Responsive Layout Grid

Before start designing, let us understand some important anatomy and breakpoints for a Grid.

  1. A responsive layout grid consists of three elements:

1.1. Column

1.2. Gutter

1.3. Margin

Image Credit : Material Design

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

Image Credit : Material Design

1.2. Gutters

Gutters are the gaps between the columns. Gutter widths are fixed values at each breakpoint range.

Image Credit : Material Design

1.3. Margin

Margins are the space between content and the left and right edges of the screen.

Image Credit : Material Design

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

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.

  1. Mobile : 360 px
  2. Tablet : 768 px
  3. 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 explaining.

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

  1. Constraint,
  2. Auto Layout,

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

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

3.3 Add image and apply Center constraint to it. Great! The entire website header section is now responsive.

3.4 Similarly, design the tablet layout using proper constraint and auto layout.

3.5 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

5.1- Open the plugin and create a new adaptive layout.

5.2- Add breakpoints we have defined. 360, 768, 1280

5.3- Select designed frame in the respective breakpoint.

Bingo! 😎. 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 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.
We, here at Fibonalabs love to experiment with new design tools and trends to build appealing, responsive and functional digital products. You can also read about Human Centered Design framework for gamification in UX.

Catch us candid on LinkedIn for more interesting updates.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.