From: Figma 101: Design the Next Two App Screens. (n.d.). Retrieved from https://designlab.com/figma-101-course/design-the-next-two-app-screens
Add a photo stream and post page to your app.
Today we’re going to add two more app screens to the one we already have. Our second screen will be a photo stream, and the third screen will be the page for an individual photo post.
You know the routine by now: open your Figma file, hit F, and select iPhone SE. Then, set up the layout grid in your new frame: 3 columns, 16-pixel gutter, 16-pixel margin.
First, create the “bottom nav”—the row of navigation icons often found at the bottom of the screen in mobile apps. This is also known as the “tab bar” for iOS design. Create a rectangle that spans the screen’s width and is 64 pixels tall. Set a fill color for the rectangle—we’ve gone with the blue we used for the background of the first screen the other day (#2F80ED).
We also need a profile button for the bottom nav. Since we didn’t create this one yesterday, we’ll need to use the Ellipse tool O to create it.
Once that’s done, duplicate and drag the home and profile icons from the Frame containing your icons. Let’s align them to the left and right edges of the column grid, respectively. Recolor them to white and increase the stroke weight to 2 Properties panel.
Duplicate and bring over the camera logo. Resize it to match the other two icons and change its color to white as well.
To do this, duplicate the wordmark from the first screen and drag it across to the new Frame. Then change the font size to 20 pixels, and switch the color to match the background color you chose yesterday (ours was #2F80ED). Place the logo towards the top of the frame, ensuring it’s centered. There’s a comfortable amount of space above it (our logo is 32 pixels from the top of the frame—remember, you can check this by selecting the logo, holding down Option (Mac) or Alt (PC), and hovering over the frame.)
There are a few ways to insert a photo into a Figma document. The cleanest way is to use the Place command, which you’ll be familiar with if you’ve used Adobe products. For the next steps, you’ll need some photos to insert. Feel free to use your own—but we’ve prepared a set to download if you’d prefer.
In Figma, the “Place Image” function works a bit differently from other software you might have used. For a start, it won’t stretch an image by default—it masks it instead. Also, if you hold down Shift ⇧ while placing the image, Figma will constrain it to its original dimensions, rather than making it square.
Press ⌘Shift ⇧K (Mac) or CtrlShift ⇧K, and select a photo to upload. (You can also access this command via the File menu in the top left.)
Figma will then display a crosshair mouse pointer. Click and drag within the Frame to place the image. We want it to be 1 column wide and square. You might need to tweak this in the Inspector after adding the image—set the image to be 85 pixels wide and 85 pixels high.
Repeat this step to add all 12 photos to the photo stream. Take this opportunity to experiment with the different ways of inserting photos in Figma. Note that when you insert an image, Figma creates a rectangle with the image set as the fill.
So you can also do that manually (create the rectangle, then from the “Fill” drop-down menu, select “Image” and follow the instructions). Other ways to add an image include dragging an image into the Figma window and copying + pasting an image—⌘C then ⌘V (Mac), or CtrlC then CtrlV (PC). Note that using the copy + paste technique will insert the image at the actual pixel size, so it’ll probably be huge, and you’ll need to size it down.
Set each image to be 85 pixels by 85 pixels, then arrange the photos in a grid formation with the rows separated by 16 pixels, so that they’re consistent with the column spacing.
Also, note that we can select multiple photos using the Place Image command. We then have to wait for those images to upload to Figma before clicking and dragging to place them. Here’s a video of the whole process of inserting, resizing, and aligning the images.
This time, instead of creating a new Frame from scratch, let’s duplicate the Frame we’ve just been working on. To do this, click on the Frame’s name (either from the Canvas or from the Layers list). Then, hit ⌘D (Mac) or CtrlD (PC) to duplicate the frame and its contents.
Delete all but one of the images in the new frame. Then, resize the remaining image so that it occupies all three columns of the grid. Holding down Shift ⇧ will ensure the image keeps its square shape when resized.
Then, let’s create two Text layers: the first with the caption for the photo and the second with a date stamp for the post. Create some “visual hierarchy” between these two by making the caption larger and bolder than the date. We chose Inter Bold at 16 pixels for the caption and Inter Regular at 12 pixels for the date. Adding visual hierarchy in this way allows one element to be more prominent than another, helping the user read the information in an order that optimizes their experience.
Let’s create a circular avatar next to the caption and date stamp! This time, we’ll use the Mask function. Using a mask, rather than simply filling a shape using an image fill, means that we can easily scale the image up and down and also position it exactly how we want it within the circle. To do this, follow these steps:
4. Hit ⌘Shift ⇧K (Mac) or CtrlShift ⇧K (PC) to bring up the “Place Image” dialog box, and select an image to use as an avatar
5. When the crosshair appears, click and drag to place the image on top of the circle you created.
6. Then, click and drag around both the image and the circle shape to select them. The image will be obscuring the circle, but that’s fine! Just glance at the Layers list to make sure both are selected.
7. Finally, click the “Use as Mask” button at the top of the screen. The circle will now clip the image.
Before moving on, let’s take a look at how the Mask is displayed in the Layers list. If you click the little arrow to drill down into the Mask group, you can then select the image you just placed, and reposition or resize the image until you’re happy with it.
Finally, the avatar, caption, and date-stamp Text layers should be repositioned so that they are lined up properly with the 6-column grid and there is consistent spacing between elements. It’s always good to take a cue for spacing from the grid. We chose 16-pixel spacing for the grid, so we could aim to stick to multiples of 8 pixels, for example, to keep things consistent. Remember that Option (Mac) or Alt (PC) can hover over other elements and check the spacing.
Finally, for today, hit R and create a rectangle below these elements to form a comment box. Set it to be a light gray (like #F1F1F1), then add a text layer on top of it that reads “Add a comment…”:
From: Figma 101: Design the Next Two App Screens. (n.d.). Retrieved from https://designlab.com/figma-101-course/design-the-next-two-app-screens