I think we have all become “iPad babies” as we scroll on social media, websites and apps on our devices while eating, sitting on the toilet or waiting for public transport.
Due to the portability of mobile devices, it is more likely a user will be accessing your website or app using their phone. That being said, many people now own multiple devices, and if you are an Apple addict, you know first hand how easy it is to move from your iPad/laptop/desktop and continue whatever you were doing on your mobile.
What does this mean with respect to responsive design?
Responsive design is not a nice add on or after thought, it should be a number 1 priority if you are designing an app or website. Responsive design is an approach that ensures all content on a website or app responds and adapts to the size of the device it is being viewed on. This is essential considering the range of devices users can use. It is also important to the experience a user has and could make or break their first impression of the usability of a website or app.
Product designers and responsive design
As a product designer, creating responsive design is essential especially when conveying how your beautifully crafted designs will behave on different screen sizes. So how does one make responsive designs on Figma, a widely used tool for product designers? Using a feature called ‘Auto Layout’.
According to Figma themselves, Auto Layout ‘is a property you can add to frames and components. It lets you create designs that grow to fill or shrink to fit, and reflow as their contents change.’
Once the auto layout feature is applied to an element (right click and apply auto layout or shortcut cmd+a/ctrl+a) the below properties appears in the right hand panel.
- Direction: selecting vertical direction is useful if you have content in a list and that is how it will appear. Horizontal direction is useful if you have content that should be ordered in a row.
- Space between: if you have multiple elements in an auto layout this ensures there is equal space between them.
- Padding: this is the empty space between the element and the edge of the container. This can be set as equal for both top, bottom or different for all adjusting by the icon in the bottom right corner.
- Alignment: this is how the elements in the auto layout appear. They could be centred or to the right/left and bottom/top.
If you click the 3 dots, advanced layout properties appear.
- Spacing mode: if you have multiple elements you can change how they appear next to each other in an auto layout — either packed or with equal space between them
- Strokes: chose if strokes are to be included or excluded in the auto layout
- Canvas stacking: if you chose to apply negative spacing, you can change which element is on top — the last on top or first on top
What is pertinent to responsive design is the below. This drop down appears when you click on the element inside the auto layout. When selecting “fill container” and it does exactly what it says — when you resize the auto layout, the element inside will fill it.
Now you know how to make your designs responsive. Happy designing!
