Learning objectives:

  • Learn about Constraints
  • Research some tablet or desktop design patterns
  • Practice adapting the mobile app design for a larger screen size
  • Consolidate yesterday’s prototyping skills

Time to complete: 45 minutes


Today’s tutorial

Today, we’re setting you free! It’s time to get creative and make your own designs for a tablet or desktop version of the app, by adapting your existing layouts for a different screen size.

Just before you get started, though, let’s cover one more awesome feature in Figma called Constraints. This is particularly useful to know when transposing a design from one device or screen size to another.

Constraints define how any object will behave if its containing Frame is resized. Each Layer in Figma actually has Constraints set by default—select any object in your Figma file and you’ll be able to see these settings in the Inspector on the right of the window:

Using constraints

The first dropdown (which here says “Left”) tells Figma how to manage the object’s horizontal position, while the second dropdown (which by default says “Top”) sets its vertical position.

The advantage of Constraints is that we can use them to make our design resize intelligently, which saves us the work of sizing and positioning elements manually. As an example, follow these steps to make the nav bar resizable.

  1. Click and drag to select all the elements in the nav bar. Group those elements with G (Mac) or CtrlG (PC). Then, convert the new Group to a Frame using the dropdown menu at the top of the Inspector. In Figma, Frames can be nested—meaning that one Frame can contain another Frame. Rename this new Frame “Nav Bar”.
  2. Next, let’s set the constraints for how the “Nav Bar” frame will relate to its container “Photo Page - Menu” frame. With the Nav Bar frame selected, change the Constraints settings to “Left & Right” and “Bottom” respectively. This means that Figma will preserve the Nav Bar’s position relative to both left and right edges, and that it will keep it tethered to the bottom edge of the Frame.
  3. Finally, we need to set how the objects within the Nav Bar Frame relate to their container. Double-click the Nav Bar Frame, then select each object in turn and set its Constraints as follows:
    • Background rectangle: Left & Right, Bottom
    • Camera icon: Center, Bottom
    • Back arrow: Left, Bottom
    • Hamburger button: Right, Bottom
    Have a go resizing the Frame. Hey presto! A nav bar that resizes and scales correctly, and stays pinned to the bottom of the Frame.

You might like to apply this method to other screen elements as you develop your tablet or desktop version of the app. Anyway, to get you started, here are instructions to set up an initial Frame and layout grid for your chosen device:

Tablet (landscape):

  1. Hit F to select the Frame tool
  2. Click the “Tablet” drill-down menu in the Inspector
  3. Click “iPad Pro 10.5”
  4. Once the Frame has been created, switch the orientation to Landscape at the top of the Inspector, next to the drilldown menu we just used to create the Frame
  5. In the Inspector, add a Layout Grid like we did on the first day, change the column count to 12, and set the gutter to 16 and the margin to 32

Desktop:

  1. Hit F to select the Frame tool
  2. Click the “Desktop” drill-down menu in the Inspector
  3. Click “Desktop” (1440 * 1024)
  4. In the Inspector, add a Layout Grid like we did on the first day, change the column count to 12, and set the gutter to 16 and the margin to 128

A good option for translating your work from mobile to tablet or desktop is to make a duplicate of the original mobile screen design, and drag that frame so it’s next to the new frame you’re working on. You can copy elements across, or simply use it as a point of reference.

Here’s a checklist to keep in mind as you work on this:

  • As a user, what might you want to be consistent between the mobile and tablet/desktop versions of the app? (Perhaps color, or certain layout patterns like the photostream?)
  • Equally, what might you want to be different? (For example, how might navigation and menus be different on tablet or desktop?)
  • Take a look at other sites to get a sense of how the relative scale, sizing, and spacing of elements might need to be different on a larger device.
  • Check out the site UI Patterns for some inspiration on how you might want to lay out elements in a different format: ui-patterns.com

Have fun, and look back to previous lessons if you need to check how to do anything! In case you get stuck, we’ve included our own version below that you can use for inspiration—or, if you prefer, have a go at duplicating the layouts we made.

Today’s bonuses

+ Sample file with today’s completed assignment