Chapters
Chapters

Chapters

Hide chapters

App Design Apprentice

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Design & Tool Fundamentals

Section 1: 3 chapters
Show chapters Hide chapters

Section II: Components & Design Systems

Section 2: 5 chapters
Show chapters Hide chapters

Section III: Interactive prototypes & Developer Handoff

Section 3: 4 chapters
Show chapters Hide chapters

5. Reusable Elements & Data
Written by Prateek Prasad

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

You can unlock the rest of this book, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

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.

Getting Started

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.

Using Masks

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.

Challenge

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:

Key Points

  • 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.
4. Wireframing & Screen Layout
6. Typography
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2023 Kodeco Inc.

You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now