How to create a Responsive Screen that adapts its Navigation Bar

Please note that design systems such as the one laid out in this article are only available on education, professional or organization Figma accounts.

Add assets to your Figma design file and follow the tutorial below to create a design system that uses variables.

To create responsive type, create the relevant styles for each breakpoint. In the case of delasign.com, we have two different categories: mobile or desktop, which we apply depending on the breakpoint and orientation.

Create a component for the navigation bar, with variants for each version that is required for your website.

Please note that the parent frame cannot be an auto-layout, as if you use auto-layout you will not be able to set the relevant constraints.

Once created, apply variables and text styles where necessary.

In the case of delasign.com, we have two versions of the navigation bar (mobile and desktop) and have applied variables for the navigation bar height, typography and text elements.

Create a component for the responsive screen that holds the navigation bar and apply the maximum and minimum width token. This will allow us to preview it using sections later on.

Add both navigation bars to the responsive screen component and set the visibility to match a variable from the layout manager (i.e. isMobile, isTablet, isDesktop) and that the constraints of the component variants are set to top and left and right.

Make sure that the width of both navigation bars are set to the maximum and minimum width token and that the horizontal resizing is set to Fill Container.

Finally, make sure that the navigation bars edges are touching the left and right of the responsive screen.

Create sections for each breakpoint of your design and add the component to each section.

Set the breakpoint of each section to the relevant breakpoint you'd like to preview.

Within each section, drag the edges of the screen to scale the component between the minimum and maximum width of the breakpoint to see how it looks and feels.

To learn how to use margin-auto, follow the tutorial below.

We recommend you check out our Responsive Design Figma Guide or search our blog to find educational content on learning how to use Figma.