Figma Intermediate: Responsive Layouts

Name: Figma Intermediate: Responsive Layouts
Author: Justin Billmeier

Learn best practices for creating responsive layouts in Figma

Preview the first lesson free — get full access to all 4 lessons.

Course: On-Demand

Hello, my name is Justin and in these lessons you will learn about responsive layouts. You'll learn about constraints, auto layout and grids. In this lesson we'll talk about how to make the best use of constraints. By the end of the lesson you'll know how to use them to create a responsive design. Constraints are there to make designers lives easier when they need to resize elements for different size screens, like for different devices for example. They allow you to fix elements of your design to different sides of the parent frame. Let's start out with a really simple example here. I've made an arrow shape here, just a polygon and a rectangle. I'm going to unify these. If I selected this and I drag it back and forth, you can see that I can resize this, but maybe I'm making this for an arrow for different things and a flowchart or something like that. I don't like how the size of the end is getting squished and stretched as I drag it around, but you'll notice over here on the constraints panel, it says mixed here, let's see, look at the options. It's mixed because there are different shapes together that I unify them, but they're still two different shapes. I'm just going to leave that alone and it's centered between top and bottom, so that's fine. If I change the actual parent frame, look at that. It's much nicer. The end of it is not getting squished or stretched. What I might do here then is take my frame, go up here to resize to fit, make it resize to fit, remove the fill, and now I have a nice arrow that I can resize to any length. That example, so on to our design. Here we have our form that we made, and let's say that this is for an iPhone, and we want this to be for something else, we want this to adapt to an iPad maybe or a bigger phone or a smaller phone, and when I change the size of the screen, it doesn't resize at all. That means that I have to go to everything in here and manually grab it and resize it for every single screen size that I want, but there's a better way. Now if I click on these things, I can see over here we have a constraints panel and it says left and top, and that means that everything here is going to stay fixed to the left side in the top side no matter what I do here. But what I could do is select all of these and change this to let's try center. Now if I change the width of the screen, it stays in the center, and that's kind of nice. That might be exactly what I want. Another option might be to select all of these, and another option might be to select all of these, and when I do that, now it is stretching, but you know what, I actually don't want the button to do that, so I'm going to keep the button on the left there. And it's a fully responsive form now, like it will do this for any size screen. The text might have to play with a little bit. I think if I go went in here and I might have to do something a little bit more, yeah, I could go up here to text. I think with if I change this to either hug contents or I think feel contained or probably no, yeah, so not even that's working too. So it gives you a really nice way of saving yourself a little time when you're working with anything that you might need to resize. In the next lesson, we'll talk about using auto layout. Thanks for watching.

Intermediate Provider : Justin Billmeier 4 Lessons · 17m in English

Course Description

In this KnowledgeCity course on Figma Intermediate: Responsive Layouts, you’ll learn how to use constraints, auto layouts, and grids to create responsive designs. We’ll show you how to make a website accessible to anyone, regardless of how they’re viewing it. Lastly, we’ll go over some best practices for creating responsive layouts in Figma.

Responsive design is a way of making a single website that automatically adjusts to fit any and all device sizes. Figma’s responsive design provides you and your team with a preview of how the site will look when scaled to match a particular device. Figma’s advantages include the ability to reuse components and styles, to prototype your design to see if it’s working before developing it, and to make your design responsive. Responsive design in Figma is size based; this means that you can see your design change in real time as you design it. If Figma was device based, you would need to move to a different device to see the effect.

What You'll Learn

Use constraints to control how design elements respond when layouts resize
Apply auto layout to build flexible, adjustable designs in Figma
Create and work with grids to structure responsive layouts
Follow best practices for creating responsive layouts in Figma
Build a single design that automatically adjusts to fit any device size

Key Takeaways

Responsive design is a way of making a single website that automatically adjusts to fit any and all device sizes.
Figma's responsive design provides you and your team with a preview of how the site will look when scaled to match a particular device.
Figma's advantages include reusing components and styles, prototyping a design before developing it, and making a design responsive.
Responsive design in Figma is size based, so you can see your design change in real time as you design it.
Because Figma is size based rather than device based, you do not need to move to a different device to see the effect.

Frequently Asked Questions

What will I learn in this course?

You'll learn how to use constraints, auto layouts, and grids to create responsive designs in Figma, plus best practices for creating responsive layouts.

What topics do the lessons cover?

The lessons cover Using Constraints, Using Auto Layout, Using Grids, and Responsive Layout Best Practices.

What is responsive design in Figma?

Responsive design is a way of making a single website that automatically adjusts to fit any and all device sizes; in Figma it is size based, so you can see your design change in real time as you design it.

Why use Figma for responsive design?

Figma lets you reuse components and styles, prototype your design to see if it's working before developing it, make your design responsive, and preview how the site will look when scaled to match a particular device.