2 Workspace Tour & Figma Fundamentals

In the last chapter, you started by going over the importance of design and how it can help you, as a developer, to collaborate effectively with your design team. You also set up your design workspace in Figma and learned how to import the project files that you’ll use going forward. Now, you’re ready to be part of the early conversations that steer the direction of your product’s development.

While learning how to use Figma is an important part of this book, the most important thing to come away with is an understanding of foundational design principles that you can leverage with any tool.

Tools come and go, and there will always be a newer, fancier one you might want to use. But as long as you approach design from first principles, you’ll be able to translate your ideas into real-world designs, regardless of which tool you use. The ultimate goal of this book is to make the tools take a back seat, becoming merely a means to your creative expression.

You might wonder, why pick Figma instead of Sketch, Photoshop or another popular tool? There are a few strong reasons to use Figma:

• It’s is free to start with, unlike other programs that require an upfront purchase or subscription.
• Figma plays nicely with other popular tools, like Sketch and Adobe XD, so you can bring files created in those tools over to Figma without issues.

But, by far, the biggest motivation behind using Figma is that it’s a browser-based design tool, which makes it universally accessible. As long as you can open websites on your device, you can use Figma, whether you have a Mac, a Windows computer, a Linux machine or even an iPad!

While Figma comes with a fairly minimal interface and toolset, it has powerful features that make rapid prototyping and iteration extremely easy. When designing, you want to explore as many alternatives as possible and iterate over them quickly. You don’t want your creative exploration to get bogged down by tedious revisions and adjustments. Learning how to harness Figma’s features will help you get more done with less effort.

In this chapter, you’ll go over Figma’s interface, look at its fundamental features and play with the different tools and options to get a feel for how they work.

Now, it’s time for your introduction to Figma.

Exploring the Figma Interface

Log in to Figma, if you haven’t yet. Then create a new Draft. Figma’s UI has four distinct sections:

1. The canvas: The main area in the middle of the screen, where you’ll work.
2. Layers panel: Located on the left side, the Layers panel houses all your screens and the components that make them.
3. Properties panel: Find this panel on the right side of your screen. You’ll use it to tweak and change the attributes — height, width, color, etc. — of the different elements you’ll work with.
4. Toolbar: This sits on top of the screen as a horizontal strip. You’ll find the basic building blocks used to create designs — shapes, texts, frames, etc. — on the toolbar alongside options to navigate your workspace and access Figma’s preferences and files.

Now that you’ve gotten a look at the Figma interface, it’s time to create the frame where your design will live.

Starting With a Frame

Frames are central to any design that you create. You can think of them as containers that house the different elements that make up your design.

Figma ships with frames that mimic the display area of popular devices. For the screens you’ll design in this book, you’ll use iPhone 11 Pro Max as the frame.

Select it by pressing F on your keyboard or by clicking Frame in the toolbar, then selecting the iPhone 11 Pro Max option.

It now shows up in your Layers panel on the left.

Note

The default frame options are handy, but you can always create a custom frame by pressing F and clicking and dragging anywhere on the canvas.

Zoom in and out of the canvas by pressing Command/Control and scrolling up or down.

Now that you’ve added a frame to work with, it’s time to learn about another fundamental part of Figma: shapes. In the next section, you’ll learn how to work with and style shapes by creating a simple sign-up button.

Adding Shapes

Click the Shape Tools option on the toolbar to reveal the different kinds of shapes available.

Note

If there’s a shortcut available for an option in Figma, it will show up next to the option. In this case, the shortcut to add a rectangle is R, for an oval, it’s O, etc. Over time, the more you use keyboard shortcuts, the more quickly you’ll navigate through Figma’s options.

Select the Rectangle option (R) and click anywhere inside the iPhone frame you added earlier to add the rectangle to your frame. You’ll eventually turn this rectangle into your sign-up button.

Note

Whenever you add a layer to a frame, you’ll also see that layer enclosed inside the frame in the Layers panel on the left.

To modify the rectangle’s size, drag the four handles on the corners or edit the height and width in the Design tab of the Properties panel on the right. Move the rectangle by clicking and dragging it.

Note

When using the handles to manipulate a shape’s size, hold Shift to maintain the proportions. Holding Shift while dragging a shape will allow you to move it in straight lines horizontally or vertically.

Change the size of the rectangle to 252x55 and give it a corner radius of 8.

Click the + icon in the Fill section of the Properties panel and select a fill of #087FA5. This gives the shape a nice blue color.

Note

A fill fills a shape with a specific color. A stroke colors the shape’s border. The stroke width determines the thickness of the border.

For the final touch, click the + icon in the Effects section and give your button a drop shadow. Use the default values of the drop shadow for now.

Now, press T and click inside the shape to add a text layer to the frame. Type Sign up.

In the Text section of the Properties panel on the right, change the font to Rubik. Use a font-weight of Medium and a font size of 18. In the Fill section below, select #000000 as the fill color.

Your canvas should look like this:

Note

Figma comes with the entire Google Fonts library, you just have to search for the font by name.

Now that you’ve put the basic elements of a button in place, it’s time to learn about alignment.

Aligning Layers

The first row in the Properties panel is made up of six alignment options. These options help you align your layers with respect to either your frame or to each other.

Select the text layer and click the Align Horizontal Centers option. This will align your text layer to the horizontal center of the frame.

Next, click Align Vertical Centers to align the text layer with the vertical center of the frame. Note that this will move the text outside of your shape. Don’t worry, you’ll fix that in a moment.

To be sure the vertical positioning is correct, validate it by checking the positioning of the layer. Select the text layer and bring your mouse outside the text layer while still within the frame, then press Alt/Option. Red lines will appear on all four sides of the text field, showing the distance from the frame edges on all four sides.

Now, do the same for the rectangle.

Once both the text layer and rectangle are in the frame’s center, you’ll group them so you can move them together as one.

Grouping Layers

To group the layers, select the text layer, press and hold Shift, then click the rectangle. You can see that both layers are selected in the Layers panel on the left.

Once you’ve selected both layers, right-click and select Group Selection or press Command/Control-G.

Now, you can move both layers collectively.

Note

You can use the four arrow keys to move shapes and groups around in increments of 1. This is extremely helpful when you want to align things precisely. To move in increments of 10, hold down the Shift key while you press the arrow keys.

There are four more alignment options, which you should play around with. They let you position your shapes to the left, top, right and bottom with respect to each other or the enclosing frame.

Now that you know a bit about how to add elements to your design, it’s time to create a beautiful login screen for your app.

Creating Cinematic’s Login Screen

You’ll now leverage your knowledge of shapes, text and properties to create the following screen:

Change the fill of the text layer you created earlier to white and change the text to I’m new to Cinematic. You will notice that the text no longer fits within the rectangle.

You could fix the alignment of the rectangle and the text, but wouldn’t it be nicer to have buttons that resize automatically?

This is where one of Figma’s most powerful features comes into play: Auto Layout.

Auto Layout

Auto Layout lets you create frames that adapt to the size of their contents. This makes it easy to create responsive UI elements.

Press Command/Control-Z and change the text back to Sign up, then make sure your text and rectangle are horizontally and vertically aligned. Once that’s done, select the group and click the + icon under the Auto Layout section of the Properties panel to add Auto Layout. You can also use the keyboard shortcut: Shift-A.

Visually, nothing’s changed — but your button is now an Auto Layout frame that dynamically resizes based on the text.

To test it, change the text to I’m new to Cinematic again. You’ll see your button grow automatically while respecting the alignment.

You’ll use Auto Layout quite extensively in this book, so it makes sense to get a deeper understanding of how it works.

Auto Layout is pretty analogous to how Auto Layout in iOS or LinearLayout on Android works. It lets you lay out elements horizontally or vertically with specified margin and padding values.

With that brief definition in mind, here are the options available in Figma’s Auto Layout tool:

• 1: Auto Layout direction. This option lets you stack items in the horizontal or vertical direction.
• 2: Spacing between items, i.e., the margin value.
• 3: Padding around items. This option lets you define the padding values across all four directions at once, as seen in the screenshot.
• 4: Alignment & padding values.

Within the Alignment & Padding option, you can determine the space distribution.

Items can be packed, meaning they start stacking from the specified direction with the alignment, margins and padding applied.

You can also lay out items using the space between them. This means items are laid out from the specified directions with margins and padding applied so that the space between them is equally distributed along the direction specified.

This option is handy when you want to stretch items across a frame, like in the navigation bar of a website.

The Alignment & Padding option also lets you define how the contents of the Auto Layout frame will be aligned.

The alignment options available to you in each direction are:

• Top left
• Top center
• Top right
• Left
• Center
• Right
• Bottom left
• Bottom center
• Bottom right

If you’re using the space between distribution, you’ll only have three options in each direction, namely:

• Left, center or right in the vertical Auto Layout.
• Top, center or bottom in the horizontal Auto Layout.

Now that you’re familiar with these options, it’s time to continue building the login screen.

Creating a Grid Layout

The login screen’s final design has a grid of movie posters in the background with a gradient overlay. There are two posters per row.

Start setting this up by adding a rectangle (R) to the frame. Give it a width of 414/2 — half of the width of your frame — and a height of 283.

Note

Figma supports arithmetic expressions in the fields that accept numeric input. Use this handy feature to create elements with precise dimensions.

Select this rectangle, then press and hold Alt/Option and drag it to the right to create a duplicate.

Now, select both of the rectangles and duplicate the row vertically three times so you have eight rectangles in total. Your last two rectangles might go out of the frame, as shown in the screenshot below.

That’s because, if a shape’s dimension exceeds the frame bounds, it gets added to the canvas but stays outside the frame. To fix this, just select the two rectangles outside of the frame bounds in the Layers panel and drag them back into the frame.

Select all the rectangles you just created and put them in a group. Then rename the group to posters-grid by double-clicking the name in the Layers panel.

While you’re at it, rename the button frame to sign-up-button and move the layer above the posters-grid layer to make it visible.

Your Layers panel will look like this when you’re done:

Now that you have your grid set up, you’ll fill it in with gorgeous movie poster images.

Adding Images to the Background

Press and hold Command/Control and click the rectangle on the top left. From the Fill section, click the fill color and from the drop-down menu at the top-left of the pop-up, click Image.

Click the Choose image button in the middle of the pop-up and navigate to the movie-imagesfolder in your downloaded project files for this chapter.

Pick any image and close the pop-up, then repeat the same process for all the other rectangles until you fill the grid with images.

Once done, click the lock icon next to posters-grid in the Layers panel. Locking a layer prevents you from accidentally changing it or moving it out of place.

Next, you’ll add a background color to make the images blend together seamlessly.

Adding a Gradient

To create a gradient background, add a rectangle to the frame and give it a size of 414×896, which is the size of your frame, then place it at X = 0 and Y = 0. Place this layer between the sign-up-button and posters-grid layers and name it gradient.

Now, from the Fill section’s drop-down, click Linear to give this layer a linear gradient.

Select the left handle in the gradient slider and give it a color of #018AA8 and 50% opacity. Then select the right handle in the gradient slider and give it a color of #060D31 and 100%opacity.

Your gradient layer will look like this:

Displaying the Cinematic Name

Next, add a text layer above the gradient layer and enter Cinematic, the name of the app. Give this layer a fill color of white, a font size of 77, and use the Pacifico font with a Regular weight. Add a drop shadow to this layer, using the default values, by clicking the + in the Effectssection and selecting Drop Shadow.

Finally, align it horizontally to the frame and position it 204 from the top by entering 204 in the Y field of the Properties panel.

At this point, you have nearly all of the elements you need for your log-in screen. Congratulations!

Adding a Sign-in Button

The last piece you need on this screen is the sign-in button. You’ll add that now.

First, place the sign-up-button at a margin of 119 from the bottom.

Now, add another text layer with the text Sign in. Give it a font size of 16 and use the Rubikfont with a font-weight of Medium. Give this layer a fill color of white.

Align it horizontally and position it 36 below the sign-up-button by using the arrow keys.

Remember, you can always see how far one layer is from another by using the Alt/Optionbutton while the layer is selected.

Group the two buttons and rename the group: buttons-group. Position this group 64 from the bottom edge of the frame and align it horizontally. Remember to use the Alt/Option key to check the positioning.

Congratulations! You now have all the elements of your log-in screen in place. Next, you’ll do some polishing to ensure the screen always looks great.

Constraining the Layers

Right now, the log-in screen looks great. But what happens if you use a different device than the one you selected for your frame? The design will shift out of place if the screen size is different.

Since you always want the buttons to be on the bottom part of the screen, you can use constraints to configure the button group so that no matter what your frame or device size is, the group always aligns itself to the bottom.

Constraints are another powerful feature in Figma. They allow you to configure how your objects and layers are positioned relative to one another, across different frames or screen sizes.

Constraints, along with Auto Layout, are concepts that iOS developers will already be familiar with, but using them in Figma doesn’t translate exactly to how they work in code.

Auto Layout and constraints do similar things in both environments, letting you build responsive and adaptive UIs. For Android Developers, Constraint Layout offers constraint and Auto Layout features.

Click the frame and decrease the height to 759. You’ll notice that the buttons get cut off.

Reset the frame to its original height and select buttons-group. From the Constraints option in the Properties panel, Select Left & Right for the horizontal constraints and Bottom for the vertical constraint.

Do the same for the Cinematic layer and pin its position to the top of the screen. Now, modify the frame height and you’ll see the button group and Cinematic layers retain their positions, no matter the size of the frame. And that’s it! Reset the frame to its original height of 896. Your screen in its final state will look like this:

Great job with your first screen! Even though you’ve only explored a tiny subset of Figma’s capabilities, you managed to make a fabulous screen. Pat yourself on the back.

Key Points

• You learned about the different parts of Figma’s interface and explored the various panels.
• You learned about the concept of frames and looked at the built-in frames within Figma.
• You used the shape tools to create basic shapes and styled them using the shape attributes.
• You learned about the different options to align multiple layers.
• You learned about Auto Layout and how to create adaptive UI elements.
• You explored constraints and learned how to build responsive UI that adapt to frame size changes.

In Chapter 3, “App Teardowns”, you’ll look at two popular apps and perform a design teardown. You’ll break down their discovery screens into their key components and recreate their scaffolds by drawing over them with some basic shapes.