Creating Responsive Components

Creating responsive components is as easy as setting up Auto layout in Figma to tell it how to behave. To demo this, we’ll take a look at how a simple navbar was set up so that the logo sticks to the left side and the links stick to the right side.

In this example, we have a component with a child frame so we can set the padding and 2 children frames inside that for the left and right side.

On the top-level frame, it is set to Auto layout > horizontal. We’re using this top frame to really set the padding of the elements within. In this case we’re setting the padding on the left and right to 80px but the top and bottom to only 11px. This is something that’s up to you, but adding a good amount of padding on the left and right gives it a more modern look letting the eye more easily catch the logo and links rather than it too closely hugging the corners of the screen. In fact, more modern navbars are using much more than even 80px but again this is simply a personal preference.

You can set the resizing to Fixed Width and Fixed Height. The width will be later set in Quest for all top-level frames of the component so mostly best to leave it to fixed width for now and adjust later. For this navbar, we never want the height to change so we’ll definitely want to keep that to Fixed height.

For the first child frame of the component, called “Items” here, we will want to set up Auto layout horizontally, with 0 padding (as that’s already set) and change it from “Packed” to “Space between”.

Space between is important because it changes how the children behave in that frame. If you miss this step, the links on the right side. This will set the “Space between items” to Auto which equally spaces things inside the parent which is set to “Fill container”. This parent / child relationship / setup is very important for how to properly get things to be responsive using Auto layout.

Before moving onto the 2 children frames, be sure you have the horizontal spacing set to “Fill container” and not “Fixed width” or “Hug contents”. Anything else will not work properly to keep things responsive.

For vertical resizing, you can set this to either “Hug contents” or simply “Fixed width”.

Now for the menu items (“Menu structure” frame layer), we simply have Auto layout set to horizontal and “Space between items” set to 40px for the padding between each layer. The resizing is then set to “Hug contents” for both horizontal and vertical. There are no pixels of padding.

For “Frame 1”, the logo, we keep it to the same exact settings as the “Menu structure”. Everything needs to be inside a frame so even though this only has the 1 child layer which is the logo image, it still needs to have a separate Auto layout, or else the positioning won’t work.

Once you have everything setup in Figma, you can export it to Quest using the Quest plugin for Figma. What you see inside of Quest is an actual working React component that you just created. By changing the width of your browser, you’ll be able to see how the navbar is responsive and that the logo stays on the left while the menu items stay on the right while respecting the padding on both sides that you have set.