Mockup a multi-screen mobile app

Version 1.0

Objective: your team will design screens for an app that allows users to post notices of lost pets. The goal is not to make a masterpiece but just practice mocking up an app with recurring interface components. The three required screens are:

• "Welcome" screen with login fields
• "Pets" screen with a feed of lost animals
• "Detail" screen with more information about a sample pet, such as image, name, breed, etc.

If you have time you can also design these screens:

• "Submit" screen lets you add a lost pet
• "Profile" screen gives details on a user or pet owner
• "Message" screen to send an owner a private message
• Any other screen you can imagine

Your design should presume some recurring custom components, such as:

• Screen headers
• Custom buttons
• Cards to represent records in a feed
• Tabs for navigating between screens

Create your team and canvas

1. Every team member signs up for a free account at Figma.com.
2. The team chooses a Coordinator.
3. Once at the dashboard, the Coordinator clicks Create a new team, gives it a name of your choosing, and invites the group members by their emails.
4. The Coordinator creates a new Design File for your team, which will leave everyone at a blank canvas.
5. Before you begin, read over all instructions.
6. Decide who will perform what role.

For example, each person could be responsible for a different screen; or one person could choose images, another colors, and another the shapes.

⚠️ The Coordinator cannot be the only one to access the canvas; everyone must contribute to modifying the design in some way.

Collaborate in real-time

• Click the Share button in the top right corner, adjust the settings to allow editing, and share the link with your team members. They can now jump into the file and work with you in real time.
• Use the Comment mode (speech bubble icon) to leave feedback for your teammates directly on the design.

Navigate Figma

• Top toolbar to add elements.
• Left sidebar to show your layers and assets.
• Right sidebar to tweak the properties of selected elements.
• Cmd + or Ctrl + to zoom in, Cmd - or Ctrl - to zoom out. Hold the Spacebar and drag to move around the canvas.
• Click outside of an element you've drawn to switch to a pointer icon that lets you reposition it.

Gather images for the app

One or more teammates should download from the Internet a half-dozen small images corresponding to:

• Closeups of at least three pets (go for personality!).
• A suitable logo (make it crisp and graphic).
• One or more potential images for a screen background (better if bland and not too distracting).

Set up the screens

1. Click the Frame tool (the hashtag icon, not the plain square) in the toolbar or press F.
2. On the right side, under the Frame pulldown, choose a device preset of iPhone 11 Pro Max/XR (896 x 414 pixels) to set your screen ("frame") size.
3. Add a separate frame for the Welcome, Pets, and Detail screens.

Design recurring interface elements

You'll first draw these in the blank space outside of frames, then add them to the screens later.

1. Header and text: Select the Text tool (T) or press T, click anywhere on the frame, and type your header, e.g., "Welcome to My App". To change the font size or family, use the options in the right sidebar. Add a background with (say) the rectangle tool, and move elements to the front or to the back with the Layers palette at left.
2. Buttons: Follow the same procedure as for the header to draw a button, but adjust the number next to the arc icon at right to round the corners.
3. Draw any other interface elements you want, such as cards, tabs, or a logo.

Style your elements:

1. To change colors, select an element and click the color picker in the right sidebar. Play around with different colors for your text, buttons, and background. 🎩 Switch from hex to HSL for easier legibility.
2. Select your text and choose a font from the dropdown menu in the right sidebar (the default is Inter). ⚠️ Remember that not every font is available on a given device.

Add images

1. Start by identifying (or creating new) shapes to be filled by images.
2. File > Place Image to pick files from your hard drive.
3. Click in the appropriate shape to "fill" it with the image.

Bundle elements into a component:

1. For each compound component (such as a header and button), group the text and rectangle by selecting both (Shift + Click) and pressing Cmd + G or Ctrl + G.
2. Right-click on your selection and choose Create component.
3. In the right sidebar, add a name to help your collaborators identify the component (the default is Group 1).

Add component instances to your screens

1. Find the component you made in the Assets tab in the left sidebar.
2. Click and drag the component onto a frame on the canvas to lay out multiple instances on that screen (eg, a row of tabs, or a column or grid of cards).
3. Click on each component on the canvas to customize its text. ⚠️ You will not be able to override every aspect of a component.

Post your mockup

1. At upper left, choose File > Export frames to PDF...
2. Post resulting PDF to #x-pet-finder-mockup

Notes

⚠️ We recommend against Figma "Dev Mode," which is costly and only permits limited coding options.