Creating a responsive design

Responsive design is one that responds to the size of the device from which the web is being viewed, adapting the dimensions of the content.

Objective

In this tutorial, we will teach you how to create a responsive design for all your projects, using a landing page as an example, specifically the footer, since it is an element that necessarily has to change its structure.

Steps

1. Open your Figma project

2. Once your desktop version and your mobile version have been laid out, everything must be within an auto-layout. As we are using the footer, it is an element of the WrapperRoute (tutorial) that is also found in the same auto-layout.

3. Select the desktop version item.

4. Open Uncodie and go to the Appearance screen.

5. Add a new property in Inline CSS, choose the Width property, and assign it a value of 100%, This will make it take up the entire screen.

6. Now being in the Appearance tab, create a new condition.

7. Choose EnvContext and screenSize.

8. In Trigger, choose “Greater than” and in OptionMenu write “medium” in value, this tells us that this element will be seen on screens larger than medium, this data depends on your design and how you want it to be displayed.

9. Repeat steps 3, 4, 5, 6, and 7 for the mobile version element.

10. Select the condition “Smaller than” and the value “large”, this indicates that the element will be seen on screens smaller than large, this also depends on your design.

11. Ready, you have the basic principles of responsiveness with Uncodie.

Use cases

Most of the designs we want to be responsive since it generate adaptive content, these steps need to be done for the complete elements, for example, the footer, the header, or already a full screen.

When not to use

If your design is not responsive, you do not need to make these settings.

How not to use

Pay attention to your design and the conditions you want to add, they will not always be the same.

Common problems

Bad visibility settings

Fixed width instead of fill