Learning objectives:
- Create a 3-column layout grid
- Learn how to duplicate elements
- Set Layer opacity (transparency)
- Use fill colors and gradients
- Practice locking and unlocking layers
- Consolidate yesterday’s learning
Time to complete: 30 minutes
Today’s tutorial
Welcome to the second day of Figma 101! Yesterday we took a look around the interface and checked out a few of Figma’s core functions. Today, we’re going to be using these commands and more to build the whole first screen of our app!
Over the next few days, we’re going to create screen designs for a photo-sharing app. Feel free to pick whatever name you like—we’re choosing “filter” for ours. Let’s get started!
1. Open up your Figma file, and create the Frame for your app screen.
First things first—open up the same Figma file you were working on yesterday. (It should show up in the “Recent” tab on the Figma home screen.)
Just like we did yesterday, hit F to select the Frame tool, and pick iPhone 8 from the options on the right of the window. Then let’s set a background color for this screen. With the new Frame selected, look over to the Inspector on the right of the Figma window. Click the white square under where it says “Background”, and choose a color. We’ve gone for #2F80ED, which is the shade of blue in the bottom-left of Figma’s default color swatches.
2. Add a column grid
It’s important to work using a column grid, even when we’re designing for mobile. Doing this means that we make positive decisions about spacing and layout—for example, the amount of space we leave between elements and the edge of the screen.
In Figma, it’s super easy to add a column grid. With the Frame selected, simply click the “+” icon in the Inspector under where it says “Layout Grid”.
- Count: 3 (this creates 3 columns)
- Gutter: 16 (this adds 16 pixels of space between each column)
- Margin: 16 (this adds 16 pixels of space at the edges of the Frame)
3. Add the name of your app
Let’s create a simple “wordmark” using the Text tool. A wordmark is basically the name of a company or product set in a beautiful way using text only. (Tomorrow we’ll work on a logo!) Press T to select the Text tool, then click in the frame and type out your app’s name. We’ve set ours all lowercase in Roboto Bold, text size 42 pixels, and set the text to be white (#FFFFFF). (Check out the lovely ligature that joins the f and the i!)
4. Reposition the wordmark
If you click and drag on the text you’ve just created, you can move it around the frame to reposition it. You’ll notice if you drag it near the horizontal middle of the frame, guides will pop up to indicate that the text is centered. Once it’s centered, release the mouse button!
5. Create the username field
We can easily create some sleek login fields just using rectangles and text. First, select the Rectangle tool R and click and drag to create a rectangle about 250 pixels wide and about 30 pixels high. Notice how Figma displays the size of the shape in numbers as you’re drawing it?
Change the fill color to be white (#FFFFFF). We then need to change the Opacity setting to make the shape semi-transparent. This isn’t actually labeled in the Figma interface, but it does exist: it’s the number shown in the Inspector under “Layer”. It’s set to 100% by default—let’s change that to 25%. You can also set this by simply selecting the object and typing in the opacity value you want. Try it—select the rectangle and simply type “25”. (This is strangely satisfying, you’ll agree.)
Next, press T to go back to the Text tool. Click anywhere in the frame, and type “Username”. The font will probably still be set to the size you just used for the wordmark, so once you’ve typed the text, select the Text layer and change the text size to 16 pixels. Change the font color to white, and again change the opacity—this time let’s go for 70%. Drag the text label over the rectangle. Hey presto! A form field.
As a final step, make sure that the “Username” text is positioned nicely in relation to the rectangle. You can do this by clicking once on the text layer, and then “nudging” it 1 pixel at a time using the arrow keys. If you hold down Shift ⇧ while using the arrow keys, the selection will move in 10 pixel increments.
6. Duplicate the username field to create a password field
It’s very easy to duplicate elements in Figma. With the Move tool selected V, just drag a marquee (rectangular selection) around the rectangle and text you just created. You can use old-school copy and paste (⌘C then ⌘V on Mac, or CtrlC then CtrlV on PC).
Alternatively, you can hold down Option (Mac) or Alt (PC), and then click and drag from the selection to make a duplicate.
Place your duplicate objects so that they’re sat directly below the username field. Then, simply double-click the “Username” text and change it to “Password”.
7. Duplicate the button you made yesterday.
Another way to duplicate elements is by selecting them and hitting ⌘D (Mac) or CtrlD (PC). Try this with the button you created yesterday. The duplicate will be placed directly on top of the original—so once you’ve created the copy, just drag it across to the other frame. This shows how easy it is to move elements between frames in Figma—it’s a simple drag and drop.
8. Make a more interesting background
In Figma, we can only apply flat colors as Frame backgrounds. To do something more exciting, let’s draw a Rectangle R the same size as the Frame. Just click in the top-left and drag down to the bottom-right: Figma will try to snap the shape to the edges of the Frame, but if it’s not quite right, you can always use the resizing handles to tweak it.
Once we’ve made the rectangle, the first thing to do is to send this huge new shape behind the other elements in the Frame. With the rectangle still selected, press ⌘Option[ (Mac) or CtrlShift ⇧[ (PC) to send the shape to the back.
Next, click the Fill color in the Inspector, and click where it says “Solid” in the top-left of the color panel. Choose “Linear” to apply a linear gradient. Pick a color that you think transitions nicely into the background color for the frame. Creative! We’ve gone for a pinky-gray (#E36FA6).
9. Lock the background layer
When we create a background layer like this, we’ll often want to lock it so that it doesn’t accidentally get selected every time we try to create or edit other objects. To lock that background rectangle, hover over it in the Layers list (on the left of the window), and click the open padlock. If you ever want to unlock it, you just go back over and click the padlock again.
You can also lock and unlock layers with the keyboard shortcut ⌘Shift ⇧L (Mac) or CtrlShift ⇧L (PC). Or, indeed, right click (Mac+PC) or Ctrl + click (Mac) and select the lock/unlock option from the menu that pops up.
10. Align & refine the layout
The last thing to do today is to make sure that everything is nicely aligned. Here are some things to check:
- Is the “Username” and “Password” text beautifully positioned relative to the rectangles behind the text?
- Do those rectangles line up perfectly with the grid columns?
- Are all the screen elements centered?
We also made some other refinements at this stage too: we changed the background color of the “Sign in” button to be white, and made the button a bit wider so that it occupied a whole column of the grid. We also made the app name a bit bigger, and changed the vertical position of elements until things were looking balanced:
Ta-da!
Congrats on completing your first app screen in Figma. There’s just got one more thing to do before we finish—and that’s to save today’s work to our Version History.
You can access this command through the menu (File > Save to Version History), or by pressing ⌘OptionS (Mac) or CtrlAltS (PC).
Completing this step means we can easily look back at the changes we made each day, and even revert to an earlier version if we want to.
That’s it for Day 2—tomorrow, we’ll be creating a logo and some icons using the pen tool. See you then!
