Heads up... You're reading this book for free, with parts of this chapter shown beyond this point astext.
In the last chapter, you created wireframes for the app and established a well-thought-out scaffold. These are essential steps in designing a product. Having set a general direction for your team, you’ll now start working on the finer details by fleshing out the screens with real data.
Among the more useful features in Figma are components, which you briefly touched upon in the last chapter. Even without going into detail, having an overview of components helped speed up the iteration.
In this chapter, you’ll take a closer look at components and how you can leverage them to create flexible designs. More importantly, you’ll learn the value of reusability when building designs — this chapter focuses specifically on building reusable components. You’ll also learn how to better organize your components and their variations.
Visualizing When to Use Components
A common question when you start using components is: Which pieces of my screen would benefit from being a reusable component? Frankly, it’s not a straightforward question to answer.
A lot of this boils down to the idea behind the product and its complexity. The more information your app surfaces, the more elements it has on the screen. But that’s not all. If there are variations in how you surface similar information, you’ll end up with more unique elements on your screen.
You might’ve noticed this with the app teardown exercises. Airbnb used just two components to build the entire screen, whereas Pocket Casts used multiple design variations to surface the same information. In both these apps, their underlying information was similar, but how they surfaced it varied.
So, how do you decide on the component breakdown? A neat trick is to visualize the silhouette of the app. You did this in the teardown exercise. After tracing each screen, you hid the screenshot to view the app structure. Hiding the specific information helped you analyze how many components the screen uses.
Once you’ve built a wireframe of a screen, it’s easier to notice these details. In the future, any time you use an element in more than one place with slight or no variations, you can extract it as a component.
From the project files for this chapter, load chapter-5-starter.fig into Figma. You can drag the file into the Figma window to import it.
Building the Movie List Item
Add a new Macbook frame (F) to the file. Name this frame Posters.
Customizing the Text and Fill Color
Next, you’ll change the movie name to Birds of Prey and the weight to bold.
Iterating on the Movie List Item
Add a rectangle (R) to the Posters frame measuring 414 × 263. Click the Fill option on the Properties panel and select Image.
Organizing With Pages
If you keep creating multiple component frames on the same canvas, your workspace will eventually become cluttered and difficult to navigate. It’s good practice to continuously tidy up and organize your workspace. As the Boy Scouts say, “Leave the campground cleaner than you found it.”
Setting up Your Pages
On the Layers panel, click + to add a new page and call it Components.
Reusing and Restyling Components
You’ll now create the genre component. Instead of making it from scratch, you’ll reuse the wireframe’s genres component and style it.
Creating the Rating Component
Moving along, it’s time to build the rating component. Add a new frame (F) measuring 250 × 50 to the canvas, give it a black fill, and name it Rating.
Placing the New Component in a Screen
It’s now time to use this component in a screen. Go to the Cinematic App page, add a new iPhone 11 Pro Max frame (F) to this page and increase its height to 1578. Call the frame movie-list.
Component Organization Using Variants
When working with components, you’ll often run into situations where you need to design the same element more than once with only slight differences. These can be simple buttons with variations in their clicked, disabled and hover states. Or a form element with multiple variations for input types.
Testing the Power of Components
You may notice an abnormality in all six instances after you rename the movie titles: The title text wraps over to the next line, overlapping with the movie-info layer.
Exploring UI Kits & Plugins
When designing a product, it’s easy to get carried away and want to create everything from scratch. While that’s always an option, it’s certainly not the most efficient one.
Using a Design Kit
For the iOS status bar, you’ll use a design kit. Open https://www.figma.com/resources/assets/facebook-ios11-ui-kit/ in a different tab and click Open the UI Kit in Figma. The Figma file will open in a new editor.
Using an Icon Set
For the navigation bar, you’ll use an icon set. Open https://www.figma.com/community/file/1014241558898418245 and click the Duplicate button on the top.
Creating the Navigation Items
Add a new frame (F) measuring 450 × 90 and name it Bottom Navigation. Here, you’ll place navigation to bring the user to three different types of movies to browse.
Implementing the Navigation Bar
Now that you have the navigation bar looking the way you want, it’s time to use it in the movie list.
Designing the Movie Details Screen
Moving along, it’s time to build the movie details screen. Add a new iPhone 11 Pro Max frame (F) to the screen and name it movie-details. Increase the frame height to 1680.
Adding Details to the Background
Add a rectangle (R) measuring 414 × 1314, and place it at a margin of 366 from the top. Give it a white fill and call it background-card.
Adding the Movie Picture
Add a 157 × 221 rectangle (R) with a corner radius of 8. Place it at a margin of 16 from the left and 323 from the top.
Adding the Details
Copy the title and movie-info text layers from the movie-card component in the Components page, then place them to the right of the movie-details-image with a margin of 28 from the movie-details-image.
When to Use Components
You could’ve made the movie-info and title layers into components, but that wouldn’t have any added benefit. Even if they were components, you’d have to:
Setting up the Overview
Add a text layer (T) with the text Overview to the movie-details frame. Use Roboto-Bold as the font with a font size of 18. Place it below movie-details-image at a margin of 40 from the top and 16 from the left. Name this layer overview-header.
The synopsis text is way too long to show in its entirety on this screen. It would save screen space and look cleaner to show just the first paragraph and allow the user to expand to read more.
Fading out the Visible Text
Now, you’ll sprinkle some visual flair over this layer by making the text paler as it approaches the cutoff point.
Making the Cut-off Text Readable
For the final piece of the overview section, add a text field (T) and enter Read More. Use the font Roboto-Bold with a font size of 12 and a letter spacing of 3px. Under the Type Details option, use Uppercase for the letter casing.
Adding the Cast Section
Next up — the cast section. Copy the overview-header and change the text to Cast. Place it below the overview-text group at a margin of 32 from the bottom of the masked layer and 16 from the left. Name it cast-header.
Installing and Using a Third-Party Plugin
Plugins are critical to a designer’s workflow. They help you automate your mundane and repetitive workflows, saving time and letting you concentrate on things that are more fun.
Adding the User Ratings
For the user rating section header, repeat the same process you used for the cast-header and change the text to Ratings — 4. Place it below the cast-images at a margin of 40 from the top and 16 from the left. Finally, name it ratings-header.
Adding Movie Recommendations to the Details
For your next task, you’ll deviate a little from the mock-up. Wouldn’t it be nice to get recommendations for other movies within the movie’s details screen? It would go a long way toward increasing user engagement within the app.
All you need to finalize this screen is the Add to Watchlist button, a Back button and the status bar. Instead of giving you instructions on creating these elements, this seems like the perfect challenge for you. Here’s what they should look like:
- Organize components and designs using pages.
- Compose components to build larger design elements and, when it makes sense, create a component.
- Use variants to logically group similar components.
- Establishing naming conventions for components helps with instance swapping and logical grouping.
- The Figma community offers third-party icon sets and plugins to make your job easier.